Пропустить навигацию

Лекция 11. Конструкция try..catch, введение в AJAX

Перехват ошибок, "try..catch"

Конструкция try..catch — мощное встроенное средство по обработке ошибок и управлению потоком выполнения.

Типы ошибок

Ошибки делятся на два глобальных типа.

  1. Синтаксические ошибки — когда нарушена структура кода, например: 
for(a = 5) { // неправильная конструкция for, пропущены точки с запятой ;
]; // неправильная закрывающая скобка

Обычно это ошибки программиста. Браузер не может такой код разобрать и выполнить. 

  2.Семантические ошибки – возникают, когда браузер смог прочитать скрипт и уже выполняет код, но вдруг натыкается на проблему.

alert(nonexistant); // ошибка, переменная не определена!

 Например, «не определена переменная»:

Эти ошибки можно перехватить и обработать самостоятельно, не дать скрипту «упасть».

Например, посмотрим на следующий интерфейс, который переводит введенное пользователем число в заданную систему счисления, используя вызов toString(основание системы счисления). 

var number = +prompt("Введите число", '9');
var base = +prompt("Введите основание системы счисления", '2');
var convertedNumber = number.toString(base);
alert( convertedNumber );  // для 9 в двоичной системе счисления: 1001

Например: (example01.html)Пользователь при его использовании может попытаться ввести что-то нестандартное. Например, не число. А вызов toString с base, не являющимся числом, приведет к ошибке JavaScript.

Мы можем перед вызовом toString дотошно проверять аргументы, с риском забыть какую-то ситуацию. В данном конкретном случае можно ввести и числа, но все равно получить ошибку. В JavaScript существует альтернативный способ поиска ошибок – конструкция try..catch.

Она заключается в том, что мы выполняем код «как есть», а если в нем возникнет ошибка, то он не рухнет, а передаст ее в специально выделенный блок.

Конструкция try..catch

Конструкция try..catch состоит из двух основных блоков: try, и затем catch.    

    try {
   alert('Начало блока try');  // (1) <--
   trprdr; // ошибка, переменная не определена!
   alert('Конец блока try'); 
  } catch(err) {
   alert('Управление получил блок catch!'); // (2) <--
 }

Работает это так:

  1. Выполняется код внутри блока try.
  2. Если в нём возникнет ошибка, то выполнение try прерывается, и управление прыгает в начало блока catch.

Будут два alert'а: (1) и (2).

Внутри catch получает объект с информацией, какая именно ошибка произошла. В примере выше он назван err, но можно и любое другое имя. Мы можем его использовать, для того, чтобы правильно проинформировать посетителя и корректно возобновить работу. Более подробно мы поговорим о нем немного позже, после того, как разберем общую логику работы try..catch.

  1. Если ошибки нет — блок catch игнорируется.

Например: example02.html

try {
  alert('Начало блока try');  // (1) <--
     var x="12345"; // код без ошибок
     alert('Конец блока try');   // (2) <--
  } catch(e) {
   alert('Блок catch не получит управление');
 }

Будут два alert'а: (1) и (2). Блок catch не будет использован. Логика работы try..catch позволяет отловить любые семантические ошибки. В том числе, обработать ошибку при неверном основании системы счисления:

var number = +prompt("Введите число", '9');
var base = +prompt("Введите основание системы счисления", '2');
try {
  var convertedNumber = number.toString(base);
   alert( convertedNumber ); 
} catch(err) {
  alert("Произошла ошибка " + "name: " + err.name + "\nmessage: " + err.message + "\nstack: " + err.stack);
}

Объект ошибки

У блока catch есть аргумент, в примере выше он обозначен err. Это — объект ошибки или, еще он может называться объект исключения (exception object).

Он содержит информацию о том, что произошло, его значение зависит от типа ошибки.

Как правило, err — объект встроенного типа Error и производных от него.

Есть несколько свойств, которые присутствуют в объекте ошибки:

name ­– Тип ошибки. Например, при обращении к несуществующей переменной равен "ReferenceError".

message – Текстовое сообщение о деталях ошибки.

stack – свойство, указывающее, где в точности произошла ошибка.

Секция finally

Конструкция try..catch может содержать ещё один блок: finally. Выглядит этот расширенный синтаксис так:

try {
   .. пробуем выполнить код ..
} catch(e) {
   .. перехватываем исключение ..
} finally {
   .. выполняем всегда ..
}

Секция finally не обязательна, но если она есть, то она выполняется всегда:

  • после блока try, если ошибок не было,
  • после catch, если они были.

Её используют, чтобы завершить начатые операции и очистить ресурсы, которые должны быть очищены в любом случае — как при ошибке, так и при нормальном потоке выполнения.

Блок finally позволяет избежать дублирования кода в try/catch.

finally и return

Блок finally срабатывает при любом выходе из try..catch, в том числе и return.

В примере ниже, из try происходит return, но finally получает управление до того, как контроль возвращается во внешний код.

function func() {
  try {
    // сразу вернуть значение
    return 1;
  } catch(e) {
   alert('Сюда управление не попадёт, ошибок нет');
  } finally {
    alert('Вызов завершён');
  }
}
alert( func() );

Это гарантирует освобождение ресурсов в любом случае.

Введение в Ajax

Ajax – это мощный подход к созданию Web-сайтов.

Ajax даёт возможность работать с динамическими данными благодаря постоянному обмену небольшими сообщениями между браузером клиента и сервером. Сценарий может запросить данные с сервера, например набор записей блога, а сервер доставляет их при помощи технологии Ajax. Сценарий же берёт полученные данные и динамически вставляет их в страницу.

Для обмена данными в Ajax чаще всего используется формат XML.

XML – язык разметки для форматирования данных любого типа.

Основным достоинством языка XML является его гибкость. В отличие от HTML, имеющего фиксированный набор тегов и атрибутов, XML всего лишь задаёт правила их создания и использования. И каждое построенное на XML приложение может по-своему воспользоваться ими для представления определённой информации.

Прелесть языка XML состоит в возможности самостоятельного создавать теги и атрибуты, подгоняя язык под свои цели.

<movie>
  <title>Ghostbusters</title>
  <releaseDate>13/03/1984</releaseDate>
  <genre></genre>
</movie>

Несмотря на то, что раньше вы никогда не видели такого языка разметки, названия тегов дают возможность понять назначение данных.

XML данные это всего лишь текст, хранятся они в текстовых файлах. Файлы XML имеют расширение *.xml.

XML + HTML = XHTML

XHTML – это версия HTML, придерживающаяся более строгих синтаксических правил. Она хорошо иллюстрирует некоторые синтаксические правила языка XML.

Например, каждому открывающемуся тегу должен соответствовать закрывающий, в HTML это правило соблюдать необязательно. Другим важным отличием HTML и XHTML являются пустые теги, такие как <br>, которые теперь комплектуются пробелом и косой чертой, указывающей на отсутствие закрывающего тега. Также, в кавычки закрываются все значения атрибутов.

HTML

XHTML

Paragraph of text in HTML<p>

<p>Paragraph of text in XHTML</p>

This is just a sentence<br>

This is just a sentence<br />

<a href=home.html>Go home</a>

<a href=”home.html”>Go home</a>

Именно формат XML чаще всего используется в Ajax, и, следовательно, именно в нём логично представлять данные, которые будут пересылаться на сервер и обратно.

Перед тем, как я погружусь в детали Ajax, давайте потратим пару минут на осмысление того, что же делает Ajax. Когда в наше время вы пишете приложение, у вас есть два основных варианта:

  • Настольные приложения
  • Web-приложения

От того, где выполняется код этих приложений, зависит их поведение и способ вашего взаимодействия с ними. Настольные приложения обычно достаточно быстрые (они работают на вашем компьютере; вы не ждете интернет-подключения), имеют отличные пользовательские интерфейсы и невероятно динамичны. Вы можете щелкать мышкой, вводить текст, пользоваться ниспадающими и всплывающими меню, перемещаться по окнам практически без каких-либо задержек.

С другой стороны, Web-приложения обычно самые свежие по времени и предоставляют возможности, которые вы никогда бы не смогли иметь на вашем компьютере (вспомните Amazon.com и eBay). Однако с могуществом Web приходит ожидание – ожидание ответа от сервера, ожидание обновления экрана, ожидание ответа на запрос и генерирования новой страницы.

Ajax пытается преодолеть разрыв между функциональностью и интерактивностью настольного приложения и актуальностью Web-приложения.

Ajax – это аббревиатура от Asynchronous JavaScript and XML.

Основные технологии, вовлеченные в Ajax-приложения:

  • HTML используется для создания Web-форм и указания полей для использования в вашем приложении.
  • DOM – будет использоваться (через код JavaScript) для работы и со структурой вашего HTML, и (в некоторых случаях) с XML, полученным от сервера.
  • JavaScript-код – это основной код, выполняющий Ajax-приложения и обеспечивающий взаимодействие с серверными приложениями.
  • DHTML, или Dynamic HTML, помогает динамически обновлять формы. Вы будете использовать div, span и другие динамические HTML-элементы для разметки вашего HTML.

В основе работы Ajax лежит концепция запросов и ответов, означающая поддержку обмена данными между клиентом и сервером. Последовательность шагов для динамического добавления данных на страницу:

    1. Браузер отправляет серверу запрос и ждёт ответа.
    2. Сервер получает запрос и начинает формирование ответа.
    3. Сервер создаёт ответ для браузера и упаковывает данные в файл *.xml.
    4. Браузер распаковывает полученные XML-данные и аккуратно вставляет их в страницу.

Объект XMLHttpRequest

Первый объект, о котором необходимо рассказать называется XMLHttpRequest. Это объект JavaScript, и он создается так же просто, как показано в листинге 1.

Листинг 1. Создание нового объекта XMLHttpRequest
<script language="javascript" type="text/javascript">
var request = new XMLHttpRequest();
</script>

Это объект, который управляет всем вашим взаимодействием с сервером. Прежде чем идти дальше, остановитесь и подумайте об этом – это технология JavaScript в объекте XMLHttpRequest, который общается с сервером. Это не обычный ход работы приложения, и именно здесь заключается почти вся магия Ajax.

В нормальных Web-приложениях пользователи заполняют поля форм и нажимают кнопку Submit (подтвердить). Затем форма передается на сервер полностью, сервер обрабатывает сценарий, а потом передает назад всю новую страницу. Естественно, пока сценарий или программа на сервере не обработается и не возвратится новая форма, пользователи должны ждать. Их экраны очистятся и будут перерисовываться по мере поступления новых данных от сервера.

Ajax по существу помещает технологию JavaScript и объект XMLHttpRequest между вашей Web-формой и сервером. Когда пользователи заполняют формы, данные передаются в какой-то JavaScript-код, а не прямо на сервер. Вместо этого JavaScript-код собирает данные формы и передает запрос на сервер. Пока это происходит, форма на экране пользователя не мелькает, не мигает, не исчезает и не блокируется. Другими словами, код JavaScript передает запрос в фоновом режиме; пользователь даже не замечает, что происходит запрос на сервер. Более того, запрос передается асинхронно, а это означает, что ваш JavaScript-код (и пользователь) не ожидают ответа сервера. То есть, пользователи могут продолжать вводить данные, прокручивать страницу и работать с приложением.

Затем сервер передает данные обратно в ваш JavaScript-код (все еще находящийся в вашей Web-форме), который решает, что делать с данными. Он может обновить поля формы "на лету", придавая свойство немедленности вашему приложению – пользователи получают новые данные без подтверждения или обновления их форм. JavaScript-код может даже получить данные, выполнить какие-либо вычисления и передать еще один запрос, и все это без вмешательства пользователя! В этом заключается мощь XMLHttpRequest.

Основные свойства и методы объекта XMLHttpRequest:

readyState – текущее состояние объекта: 0 (неинициализирован), 1 (открыт), 2 (отправка данных), 3 (получение данных), 4 (данные загружены).

status – HTTP-код статуса запроса, например 404 (не обнаружено) или 200 (ОК).

Эти два свойства определяют, был ли получен корректный ответ на запрос Ajax.

responseText – текст ответа на запрос.

responseXML – текст ответа на запрос в виде дерева XML-узлов.

Эти два свойства хранят данные, полученные с сервера в ответ на запрос.

open() – подготовка запроса путём указания его типа, URL  и других параметров.

send() – отправка запроса на сервер для обработки.

Эти два метода используются в паре для подготовки запросов Ajax и их отправки на сервер.

onreadystatechange – ссылка на функцию, вызываемую при изменении состояния запроса.

Это уникальное свойство содержит ссылку на специальный обработчик события, который вызывается при изменении Ajax-запросов.

abort() – отмена текущего запроса.

Добавление JavaScript-кода

После того, как вы разберетесь с XMLttRequest, оставшийся JavaScript-код превращается в рутинную работу. Фактически, вы будете использовать JavaScript-код для небольшого числа основных задач:

  • Получить данные формы: JavaScript-код упрощает извлечение данных из вашей HTML-формы и передает их на сервер.
  • Выполнить анализ HTML и XML: Вы будете использовать JavaScript-код для управления DOM (см. следующий раздел) и для работы со структурой вашей HTML-формы и всеми XML-данными, возвращаемыми сервером.
  • Изменить значения в форме: Форма обновляется тоже легко, от установки значений полей до замены изображений "на лету".

Для выполнения первых двух задач вы должны очень хорошо знать метод getElementById(), приведенный в листинге 2.

Листинг 2. Сбор и установка значений полей при помощи JavaScript-кода
// Получить значение поля "phone" и записать его в переменную phone
var phone = document.getElementById("phone").value;
 
// Установить значения в форме, используя массив response
document.getElementById("order").value = response[0];
document.getElementById("address").value = response[1];

Нет ничего чрезмерно сложного во всем этом. Как только вы освоите XMLHttpRequest, оставшаяся часть вашего Ajax-приложения будет простым JavaScript-кодом, похожим на приведенный в листинге 2, смешанным с немного более умным HTML. К тому же, время от времени есть немного работы с DOM...

Получение объекта Request

Стоит остановиться на различиях при работе с XMLHttpRequest в современных браузерах.   

Ранее существовала проблема совместимости браузеров, когда ничто не работает одинаково в разных браузерах. Она имеется и сейчас, хотя и с намного меньшим масштабом. И, XMLHttpRequest – это одна из жертв этих войн. Для каждого браузера требуется своя реализация. Набор методов и свойств одинаков для всех браузеров – учитывать разницу требуется только при создании объекта.

Работа с браузерами Microsoft

Браузер Microsoft Internet Explorer для обработки XML использует анализатор MSXML. Поэтому, когда вы пишете Ajax-приложения, которые должны работать в Internet Explorer, необходимо создать объект особым способом. На самом деле в ходу две различных версии MSXML. Версия MSXML зависит от версии технологии JavaScript, установленной в Internet Explorer, поэтому вам нужно написать код, подходящий для обеих версий. Взгляните на листинг 3, в котором приведен код для создания XMLHttpRequest в браузерах Microsoft.

Листинг 3. Создание объекта XMLHttpRequest в браузерах Microsoft
var request = false;
try {
  request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    request = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e2) {
    request = false;
  }
}

В двух словах, этот код пытается создать объект, используя одну версию MSXML; если это не получится, создается объект для второй версии. Если ничего не сработало, переменная request устанавливается в false, для того чтобы указать вашему коду, что что-то не так.

Работа с Mozilla и другими браузерами не от Microsoft

Если вы пишете код для браузеров не от Microsoft, вам нужен другой код. Фактически, это простая строка, которую вы видели в листинге 1:

var request = new XMLHttpRequest object;.

Эта намного более простая строка создает объект XMLHttpRequest в Mozilla, Firefox, Safari, Opera и в большой степени в каждом браузере не от Microsoft, поддерживающем Ajax в любой форме или разновидности.

Объединение

Мы хотим поддерживать все браузеры. Кто хочет писать приложение, работающее только в Internet Explorer, или приложение, работающее только во всех остальных браузерах? Еще хуже, хотите ли вы написать ваше приложение дважды? Конечно, нет! Итак, объединим поддержку для Internet Explorer и для остальных браузеров. В листинге 4 приведен код, делающий это.

Листинг 4. Создание объекта XMLHttpRequest для всех браузеров
/* Создание нового объекта XMLHttpRequest для общения с Web-сервером */
var request = false;
if (window.XMLHttpRequest) { 
  try {
    request = new XMLHttpRequest();
  } catch(e) {
    request = null;
  }
//пробуем версию ActiveX (IE)
} else if (window.ActiveXObject) {
  try {
    request = new ActiveXObject("Msxml2.XMLHTTP");
//пробуем объект ActiveX более старой версии IE
  } catch (e) {
    try {
      request = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {
      request = false;
    }
  }
}

Основу этого кода можно разделить на два шага:

  1. Создание переменную request для ссылки на объект XMLHttpRequest.
  2. Реализация различных подходов к созданию объекта XMLHttpRequest, так как он по-разному поддерживается разными версиями браузера IE.

В конце этого процесса request должен ссылаться на корректный объект XMLHttpRequest, независимо от используемого пользователем браузера.

После того, как объект XMLHttpRequest готов, нужно задать функцию обработки запроса и затем создать сам запрос.

request.onreadystatechange = handler;

request.open(type, url, true); //всегда асинхронный (true).

При открытии запроса следует указывать его тип (GET или POST)), адрес URL сервера, а также является ли этот запрос асинхронным или нет. Асинхронные запросы выполняются в фоновом режиме, не заставляя сценарий ждать, именно поэтому почти все запросы в Ajax являются асинхронными.

Тип запроса

Ajax крайне важен, поскольку отражает не только содержимое запроса, но также и его назначение. Существует два типа запросов, которые применяютcя для отправления HTML-форм:

GET – используется для получения данных и ничего не меняет на сервере. Данный тип запроса подходит для получения какой-либо информации из зранящегося на сервере XML-файла.

request.open(“GET”, “blog.xml”, true);

request.send(null);

Тип GET и URL указываются в момент открытия запроса. Т.е. записи блога в формате XML запрошены из расположенного на сервере файла blog.xml при помощи запроса GET. Если аргумент метода send имеет значение null, значит, отправленный запрос не содержит данных. true значит всегда асинхронный.

POST – отправляет на сервер данные, инциируя изменения, например сохранение данных в базу. При этом возможна отправка данных в ответ на запрос.

request.open(“POST”, “addblogentry.php”, true);

request.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded; charset=UTF-8”);

request.send(“09/26/2006&These dreams just…&cubeapart.png”);

true значит всегда асинхронный. Запрос включает отправляемые на сервер данные, поэтому нужно указывать их тип (request.setRequestHeader). Отправляемые вместе с запросом данные передаются методу send() в качестве аргумента.

Запрос/ответ в мире Ajax

Поскольку XMLHttpRequest вы будете использовать в некоторых формах в каждом вашем Ajax-приложении, рассмотрим коротко, как выглядит базовая модель запрос/ответ в Ajax.

У вас есть новый объект XMLHttpRequest; приведем его в движение. Во-первых, нам понадобится JavaScript-метод, который ваша Web-страница может вызвать (например, когда пользователь вводит текст или выбирает вариант из меню). Затем, нужно следовать одной и той же основной схеме практически во всех Ajax-приложениях:

  1. Получить какие-либо данные из Web-формы.
  2. Создать URL для подключения.
  3. Открыть соединение с сервером.
  4. Установить функцию для сервера, которая выполнится после его ответа.
  5. Передать запрос.

В листинге 5 приведен пример Ajax-метода, который выполняет именно эти операции и именно в этом порядке:

Листинг 5. Выполнить запрос с Ajax
function callServer() {
  // Получить city и state из web-формы
  var city = document.getElementById("city").value;
  var state = document.getElementById("state").value;
  // Продолжать только если есть значения обоих полей
  if ((city == null) || (city == "")) return;
  if ((state == null) || (state == "")) return;
  // Создать URL для подключения
  var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state);
  // Открыть соединение с сервером
  request.open("GET", url, true);
  // Установить функцию для сервера, которая выполнится после его ответа
  request.onreadystatechange = updatePage;
  // SПередать запрос
  request.send(null);
}

Первая часть кода использует базовый JavaScript-код для сбора значений из нескольких полей формы. Затем код устанавливает PHP-сценарий в качестве URL для подключения. Обратите внимание, как указывать URL и как добавлять к нему city и state (из формы), используя простые GET-параметры.

Затем открывается соединение; это первое место, где мы опять увидели в действии XMLHttpRequest. Указывается метод соединения (GET) и URL. Последний параметр, когда установлен в true, запрашивает асинхронное соединение (то есть, делает это способом, сооветствующим названию Ajax). При использовании false код ждал бы выполнения запроса и не продолжал бы работу до получения ответа. При использовании true ваши пользователи могут работать с формой (и даже вызывать другие JavaScript-методы) пока сервер обрабатывает этот запрос в фоновом режиме.

Свойство onreadystatechange request (вспоминайте, это ваш экземпляр объекта XMLHttpRequest) позволяет вам информировать сервер о том, что следует делать после завершения работы (что может быть через пять минут или через пять часов). Поскольку код не собирается ждать сервер, вы должны дать серверу знать, что делать, так чтобы вы смогли среагировать. В данном случае будет инициирован конкретный метод (называемый updatePage()) после завершения сервером обработки вашего запроса.

Наконец, вызывается send() со значением null. Поскольку вы добавили данные для передачи на сервер (city и state) в URL запроса, вам не надо передавать что-либо в запросе. Таким образом, передается ваш запрос, и сервер может делать то, что вы указали ему делать.

Если вы кроме этого ничего больше не делаете, обратите внимание на то, насколько все просто и понятно! Вы оцените то, как это освобождает вас для концентрации внимания на крутых приложениях и интерфейсах, а не на сложном HTTP-коде запроса/ответа.

Код в листинге 5 очень прост. Данные являются простым текстом и могут быть включены как часть URL-запроса. GET посылает запрос вместо более сложного POST. Не добавляется XML, заголовки контента, не передаются данные в теле запроса – можно сказать, Ajax-утопия.

Не беспокойтесь пока о сложных вещах (POST-запросы, установка заголовков запроса и типа содержимого, кодирование XML); узнайте основы и вскоре вы освоите полный арсенал Ajax-средств.

Обработка ответа

Теперь вы должны разобраться с ответом сервера. Пока вы должны знать только два момента:

  • Не делать ничего, пока свойство request.readyState не будет равно 4.
  • Сервер будет записывать свой ответ в свойстве request.responseText.

Первый момент (состояния готовности). Пока вы просто проверяйте на равенство определенному значению (4), и все будет работать. Второй момент (использование свойства request.responseText для получения ответа от сервера) является простым. В листинге 6 приведен пример метода (который сервер может вызвать), основанного на значениях, переданных в листинге 5.

Листинг 6. Обработка ответа от сервера
function updatePage() {
  if (request.readyState == 4) {
    var response = request.responseText;
    document.getElementById("zipCode").value = response;
  }
}

Данный код ожидает, пока сервер не вызовет его с нужным состоянием готовности, и затем использует значение, которое сервер возвращает (в данном случае ZIP-код для введенного пользователем города и штата), для установки другого поля формы. В результате поле zipCode неожиданно появляется с ZIP-кодом, но пользователь ни разу не щелкнул по кнопке! Это поведение настольного приложения, оперативность, ощущение динамичности и т.д., а все с маленьким Ajax-кодом.

Перехват в Web-формах

Что нам осталось? В сущности, не много. Вы имеете JavaScript-метод, собирающий введенную пользователем в форму информацию, передаете ее серверу, предоставляете еще один JavaScript-метод для обработки ответа и даже устанавливаете значение поля, когда этот ответ приходит. Все что осталось на самом деле – вызвать этот первый метод и запустить полный процесс. Воспользуемся возможностями технологии JavaScript, как показано в листинге 7.

Листинг 7. Запуск Ajax-процесса
<form>
 <p>City: <input type="text" name="city" id="city" size="25" 
       onChange="callServer();" /></p>
 <p>State: <input type="text" name="state" id="state" size="25" 
       onChange="callServer();" /></p>
 <p>Zip Code: <input type="text" name="zipCode" id="zipCode" size="5" /></p>
</form>

Когда пользователь вводит новое значение для любого из полей city или state, запускается метод callServer(), и Ajax-функция начинается. Вам кажется, что вы начинаете понимать суть вещей? Отлично!

Вы уже можете начать понимать основную идею о том, как работают такие приложения и что такое объект XMLHttpRequest. Далее вы изучите этот объект, а также то, как контролировать взаимодействие JavaScript-to-server и работать с HTML-формами, и даже разберетесь с DOM.

Пока же потратьте некоторое время на размышления о том, насколько мощными могут быть Ajax-приложения. Представьте себе Web-форму, которая реагирует не только тогда, когда вы нажимаете кнопку, но и когда вы вводите данные в поле, когда выбираете вариант из списка вариантов и даже когда перемещаете курсор по экрану. Подумайте о том, что на самом деле означает слово асинхронный. Подумайте о JavaScript-коде, выполняющемся и не ожидающем, пока сервер возвратит ответы на его запросы. С какими проблемами вы можете столкнуться? С какими вещами следует проявлять осторожность? И как дизайн ваших форм изменится, принимая во внимание этот новый подход в программировании?

Потратив некоторое время на эти моменты, вы получите больше пользы, чем просто при получении какого-либо кода, который можно скопировать и поместить в приложение, не понимая его на самом деле. В последствии вы примените эти идеи на практике; я приведу подробную информацию о коде, который вам нужен для работы аналогичных приложений. А до этого наслаждайтесь возможностями Ajax.