Освоение Ajax: Часть 1. Введение в Ajax

Освоение Ajax: эффективный подход к созданию Web-сайтов и знакомство с тем, как работает эта технология

Ajax, состоящий из HTML, технологии JavaScript™, DHTML и DOM, это замечательный подход, который помогает вам преобразовать тяжеловесные Web-интерфейсы в интерактивные Ajax-приложения. Автор, эксперт по Ajax, демонстрирует совместную работу этих технологий (от общего обзора до детального изучения), цель которой – сделать чрезвычайно эффективную Web-разработку повседневной реальностью. Он также раскрывает основные концепции Ajax, включая объект XMLHttpRequest.

Брэт Маклафлин, автор и редактор, O'Reilly Media Inc.

Photo of Brett McLaughlinБрэт Маклафлин (Brett McLaughlin) работает с компьютерами со времен Logo (помните маленький треугольник?). За последние несколько лет он стал одним из наиболее известных авторов и программистов сообщества по технологиям Java и XML. Он работал в Nextel Communications над реализацией сложных корпоративных систем, в Lutris Technologies, фактически, над созданием сервера приложений, а с недавних пор работает в O'Reilly Media, Inc., где продолжает писать и редактировать книги по данной тематике. В готовящейся Брэтом вместе с популярными авторами Эриком и Бет Фриманами книге Быстрый штурм Ajax использован общепризнанный и передовой подход к Ajax по методу Head First. Его недавняя книга "Java 1.5 Tiger: Заметки разработчика", является первой доступной книгой по новейшей технологии Java, а его классическая "Java и XML" остается одной из наиболее авторитетных работ по использованию технологий XML в языке программирования Java.



06.12.2005

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

Однако, Ajax – это далеко не чья-то прихоть, а мощный подход к созданию Web-сайтов, который не так трудно изучить, как полностью новый язык.

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

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

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

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

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

Ясно, что все это упрощение, но вы получили общее представление. Как вы, возможно, уже подозреваете, Ajax пытается преодолеть разрыв между функциональностью и интерактивностью настольного приложения и всегда обновленным Web-приложением. Вы можете использовать динамические пользовательские интерфейсы, аналогичные имеющимся в настольном приложении, но доступные в Web-приложении.

Так чего же мы ждем? Начнем рассмотрение Ajax и способов превращения ваших неуклюжих Web-интерфейсов в чувствительные Ajax-приложения.

Старая технология, новые хитрости

Что касается Ajax, то реальность такова, что он охватывает много технологий – для его освоения необходимо углубиться в несколько различных технологий (вот почему я разобью на независимые части первые несколько статей из этой серии). Хорошей новостью является то, что вы, возможно, уже знаете достаточно о многих из этих технологий – большинство из этих индивидуальных технологий изучаются легко (определенно не так трудно, как язык программирования полностью, например Java или Ruby).

Определение Ajax

Между прочим, Ajax – это аббревиатура от Asynchronous JavaScript and XML (и DHTML, и т.д.). Фраза была придумана Джессе Джеймсом Гарретом из Adaptive Path (см. раздел Ресурсы) и, по словам Джессе, не предназначалась быть аббревиатурой.

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

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

Рассмотрим все это по отдельности и разберемся в том, что делает каждая из этих технологий. Я исследую каждую из них в следующих статьях; сейчас просто познакомимся поближе с этими компонентами и технологиями. Чем больше вы знаете о них, тем легче перейти от бессистемных знаний к освоению каждой из них (и действительно улучшить процесс разработки Web-приложений).

Объект XMLHttpRequest

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

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

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

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

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

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

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

После того, как вы разберетесь с XMLHttpRequest, оставшийся 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... Итак, давайте рассмотрим это.

Завершение с DOM

И последнее, хотя и не менее важное, - это DOM, Document Object Model (объектная модель документа). Для некоторых из вас слухи о DOM могут быть немного пугающими – она не часто используется HTML-дизайнерами и даже немного не свойственна кодировщикам на JavaScript (пока вы действительно не решаете каких-либо программных задач высокого уровня). Вы можете найти широкое применение DOM в тяжеловесных программах, написанных на языках Java и C/C++; фактически, это и принесло DOM репутацию сложной и трудной для изучения.

К счастью, использование DOM в технологии JavaScript является делом легким и в основном интуитивным. Сейчас мне, наверное, надо было бы рассказать вам, как использовать DOM или хотя бы привести пару примеров кода, но даже это сбило бы вас с верного пути. Дело в том, что вы можете продвинуться довольно далеко в изучении Ajax без необходимости примешивать сюда DOM, и это именно тот путь, который я хочу вам показать. Я вернусь к DOM в следующей статье, но сейчас просто знайте, что она где-то здесь. Когда вы начнете передавать XML-данные вперед и назад между вашим JavaScript-кодом и реальными изменениями HTML-формы, вы углубитесь в DOM. А пока можно эффективно работать с Ajax без DOM, так что пока отложим ее до поры до времени.


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

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

Помните те ужасные войны браузеров, происходившие несколько лет назад, и как ничто не работало одинаково в разных браузерах? Поверите вы или нет, но те войны продолжаются до сих пор, хотя и с намного меньшим масштабом. И, сюрприз: XMLHttpRequest – это одна из жертв этих войн. Поэтому вы должны выполнить несколько различных действий для обеспечения возможности работы XMLHttpRequest. Я покажу вам как это сделать шаг за шагом.

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

Браузер Microsoft Internet Explorer для обработки XML использует анализатор MSXML (ссылки на дополнительную информацию по MSXML вы можете найти в разделе Ресурсы). Поэтому, когда вы пишете Ajax-приложения, которые должны работать в Internet Explorer, необходимо создать объект особым способом.

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

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

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

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

и

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");.

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

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

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

var xmlHttp = new XMLHttpRequest object;.

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

Объединение

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

Листинг 4. Создание объекта XMLHttpRequest для всех браузеров
/* Создание нового объекта XMLHttpRequest для общения с Web-сервером */
var xmlHttp = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e2) {
    xmlHttp = false;
  }
}
@end @*/

if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
  xmlHttp = new XMLHttpRequest();
}

Пока проигнорируйте комментарии и непонятные теги, типа @cc_on; это специальные команды JavaScript-компилятора, которые мы рассмотрим детально в моей следующей статье, которая будет полностью посвящена XMLHttpRequest. Основу этого кода можно разделить на три шага:

  1. Создайте переменную xmlHttp для ссылки на объект XMLHttpRequest, который вы создадите.
  2. В блоке try создайте объект в браузерах Microsoft:
    • В блоке try создайте объект с использованием объекта Msxml2.XMLHTTP.
    • Если это не получится, В блоке try создайте объект с использованием объекта Microsoft.XMLHTTP.
  3. Если xmlHttp все еще не установлен, создайте объект для остальных браузеров.

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

Пара слов о защите

Как насчет защиты? Современные браузеры предлагают пользователям возможность повысить уровень безопасности, отключить технологию JavaScript и запретить множество настроек в своих браузерах. В этих ситуациях ваш код, вероятно, не будет работать ни при каких обстоятельствах. Для таких ситуаций вы должны элегантно решить проблемы – есть, по крайней мере, одна статья об этом, а одну я напишу позднее (это, наверное, будет длинная серия, но не беспокойтесь – вы все освоите до окончания этой серии статей). Пока же вы пишете устойчивый, но не совершенный код, который отлично подходит для изучения Ajax. Вы вернетесь к более качественному коду позже.


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

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

Что мы пропустили? Как на самом деле использовать 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);

  // Открыть соединение с сервером
  xmlHttp.open("GET", url, true);

  // Установить функцию для сервера, которая выполнится после его ответа
  xmlHttp.onreadystatechange = updatePage;

  // SПередать запрос
  xmlHttp.send(null);
}

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

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

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

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

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

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

Не переживайте - ситуация станет более сложной по мере выпуска статей этой серии. Вы научитесь передавать POST-запросы, устанавливать заголовки запроса и типы содержимого, кодировать XML в вашем сообщении, добавлять защиту в ваш запрос – список довольно большой! Не беспокойтесь пока о сложных вещах; узнайте основы и вскоре вы освоите полный арсенал Ajax-средств.

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

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

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

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

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

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

Наблюдательные читатели, возможно, заметят, что поле zipCode является обычным текстовым полем. После возврата сервером ZIP-кода и установки этого поля методом updatePage() в значение ZIP-кода города/штата пользователи могут переопределить это значение. Так сделано умышленно по двум причинам: сохранить этот пример простым и показать вам, что иногда нужно, чтобы пользователи имели возможность переопределить значения, возвращенные сервером. Помните об обоих моментах; они важны при хорошем дизайне пользовательского интерфейса.


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

Что нам осталось? В сущности, не много. Вы имеете JavaScript-метод, собирающий введенную пользователем в форму информацию, передаете ее серверу, предоставляете еще один JavaScript-метод для обработки ответа и даже устанавливаете значение поля, когда этот ответ приходит. Все что осталось на самом деле – вызвать этот первый метод и запустить полный процесс. Вы могли бы, очевидно, добавить кнопку в вашу HTML-форму, но это же старый, добрый 2001 год, не так ли? Воспользуемся возможностями технологии 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-функция начинается. Вам кажется, что вы начинаете понимать суть вещей? Отлично!


В заключение

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

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

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

Ресурсы

Научиться

Обсудить

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Web-архитектура, XML, Технология Java
ArticleID=108403
ArticleTitle=Освоение Ajax: Часть 1. Введение в Ajax
publish-date=12062005