Принцип работы. Пример использования AJAX. Из истории AJAX

Набор пар ключ/значение, которые настраивают запрос AJAX . Все параметры являются необязательными . Допускается, но не рекомендовано установить значение по умолчанию для любого параметра с использованием метода $.ajaxSetup() .
Метод $.ajax() поддерживает следующие параметры:

accepts (по умолчанию: зависит от dataType ).

Тип: PlainObject .
Набор пар ключ/значение, которые отправляется в Accept заголовка запроса. Этот заголовок сообщает серверу, какой ответ запрос будет принимать в ответ. Обратите внимание, что значение параметра, указанного в dataType (тип данных, которые мы ожидаем от сервера) сопоставляется с указанным в параметре. Кроме того, для корректной обработки ответа от сервера необходимо в параметре converters указать функцию, которая возвращает преобразованное значение ответа. Например: $.ajax({ accepts : { mycustomtype: "application/x-some-custom-type " } , // указываем как обрабатывать ответ converters : { "text mycustomtype ": function (result ) { // возвращаем преобразованное значение ответа return newresult; } } , // Ожидаемый тип данных ("mycustomtype") dataType : "mycustomtype " } );

async (по умолчанию: true ).

Тип: Boolean .
По умолчанию, все запросы отправляются асинхронно, если вам необходимо организовать синхронные запросы, то установите этот параметр в false . Обратите внимание, что кроссдоменные запросы и элемент, параметр dataType которого имеет значение "jsonp" не поддерживают запросы в синхронном режиме. Учтите, что используя синхронные запросы вы можете временно заблокировать браузер отключив какие-либо действия пока запрос будет активен.

beforeSend . Тип: Function (jqXHR jqXHR , PlainObject settings ).
Функция обратного вызова, которая будет вызвана перед осуществлением AJAX запроса. Функция позволяет изменить объект jqXHR (в jQuery 1.4.х объект XMLHTTPRequest ) до его отправки. Объект jqXHR это надстройка расширяющая объект XMLHttpRequest , объект содержит множество свойств и методов, которые позволяет получить более полную информацию об ответе сервера, а так же объект содержит Promise методы. Если функция beforeSend возвращает false , то AJAX запрос будет отменен. Начиная с версии jQuery 1.5 функция beforeSend будет вызываться независимо от типа запроса.

cache (по умолчанию: true , для dataType "script" и "jsonp" false ).

Тип: Boolean .
Если задано значение false , то это заставит запрашиваемые страницы не кэшироваться браузером. Обратите внимание, что значение false будет правильно работать только с HEAD и GET запросами.

complete .

Тип: Function (jqXHR jqXHR , String textStatus ).
Функция, которая вызывается, когда запрос заканчивается (функция выполняется после AJAX событий "success" или "error" ). В функцию передаются два параметра: jqXHR (в jQuery 1.4.х объект XMLHTTPRequest ) и строка соответствующая статусу запроса ("success" , "notmodified" , "nocontent" , "error" , "timeout" , "abort" , или "parsererror" ). Начиная с версии jQuery 1.5 параметр complete может принимать массив из функций, которые будут вызываться по очереди.

contents .

Тип: PlainObject .
Объект состоящий из пар строка/регулярное выражение, определяющих, как jQuery будет обрабатывать (парсить) ответ в зависимости от типа содержимого. Добавлен в версии jQuery 1.5.

contentType (по умолчанию: "application/x-www-form-urlencoded; charset=UTF-8" ).

Тип: Boolean , или String .
Определяет тип содержимого, которое указывается в запросе при передаче данных на сервер. С версии с jQuery 1.6 допускается указать значение false , в этом случае jQuery не передает в заголовке поле Content-Type совсем.

context .

Тип: PlainObject .
При выполнении AJAX функций обратного вызова контекстом их выполнения является объект window . Параметр context позволяет настроить контекст исполнения функции таким образом, что $(this ) будет ссылаться на определенный DOM элемент, или объект. Например: $.ajax({ url : "test.html ", context : $(".myClass "), // новый контекст исполнения функции success : function (){ // если запрос успешен вызываем функцию $(this ).html("Всё ок "); // добавлем текстовое содержимое в элемент с классом.myClass } } );

converters

Значения по умолчанию:
{ "* text ": window.String, // любой тип в текст "text html ": true , // текст в html "text json ": jQuery.parseJSON, // текст в JSON "text xml ": jQuery.parseXML // текст в XML } Тип: PlainObject .
Объект, содержащий тип данных для конвертации и способ его преобразования. Значение каждого преобразователя является функцией, которая возвращает преобразованное значение ответа. Добавлен в версии jQuery 1.5.

crossDomain (по умолчанию: false для запросов внутри того же домена, true для кроссдоменных запросов).

Тип: Boolean .
Если вы хотите сделать кроссдоменный запрос находясь на том же домене (например jsonp-запрос), то установите этот параметр в true . Это позволит, к примеру, сделать перенаправление запроса на другой домен с вашего сервера. Добавлен в версии jQuery 1.5.

Тип: PlainObject , или String , или Array .
Данные, которые будут отправлены на сервер. Если они не является строкой, то преобразуются в строку запроса. Для GET запросов строка будет добавлена к URL. Для того, чтобы предотвратить автоматическую обработку вы можете воспользоваться параметром processData со значением false . Если данные передаются в составе объекта, то он должен состоять из пар ключ/значение. Если значение является массивом, то jQuery сериализует несколько значений с одним и тем же ключом (в зависимости от значения параметра traditional , который позволяет задействовать традиционный тип сериализации основанный на методе $.param).

dataFilter .

Тип: Function (String data , String type ) => Anything .
Функция вызывается после успешного выполнения AJAX запроса и позволяет обработать "сырые" данные, полученные из ответа сервера. Возврат данных должен происходить сразу после их обработки. Функция принимает два аргумента: data - данные полученные от сервера в виде строки и type - тип этих данных (значение параметра dataType ).

dataType (по умолчанию: xml , json , script , или html ).

Тип: String .
Определяет тип данных, который вы ожидаете получить от сервера. Если тип данных не указан, то jQuery будет пытаться определить его на основе типа MIME из ответа (XML тип MIME приведет к получению XML , с версии jQuery 1.4 json будет давать объект JavaScript , script будет выполнять скрипт, а все остальное будет возвращено в виде строки).


Основные типы (результат передается в качестве первого аргумента в функцию обратного вызова success ):

• "xml" - возвращает XML документ, который может быть обработан с помощью jQuery.
• "html" - возвращает HTML как обычный текст, теги будут обработаны и выполнены после вставки в объектную модель документа (DOM ).
• "script" - расценивает ответ как JavaScript и возвращает его как обычный текст. Отключает кэширование с помощью добавления параметра к строке запроса _= , даже если парамета cache имеет значение true . Это превратит метод POST в GET для кроссдоменных запросов.
• "json" - расценивает ответ как JSON и возвращает объект JavaScript . Кроссдоменные "json" запросы преобразуются в "jsonp" , если в параметрах запроса не указано jsonp : false . Данные JSON парсятся в строгом порядке и должны соответствовать общепринятому формату , любой некорректный JSON отвергается и выдается ошибка. С версии jQuery 1.9, пустой ответ не принимается, сервер должен вернуть в качестве ответа NULL , или {} .
• "jsonp" - загружает данные в формате JSON , используя при этом формат загрузки JSONP . Добавляет дополнительный параметр "?callback=? " в конец URL адреса для указания имени функции обработчика. Отключает кэширование путем добавления параметра _= к URL адресу,даже если парамета cache имеет значение true .
• "text" - обычная текстовая строка.
• несколько значений - значения разделяются пробелом. Начиная с версии 1.5, jQuery может преобразовать тип данных, который получен в Content-Type заголовка, в тип данных, который вам требуется. Например, если вы хотите, чтобы текстовый ответ был расценен как XML, используйте "text XML" для этого типа данных. Вы также можете сделать JSONP запрос, получить его в виде текста и интерпретировать его в формате XML : "jsonp text XML" . Следующая строка позволит сделать тоже самое: "jsonp XML" , jQuery будет пытаться конвертировать из JSONP в XML , после неудачной попытки попытается преобразовать JSONP в текст, а затем из текста уже в XML .

• Тип: Function (jqXHR jqXHR , String textStatus , String errorThrown ).
  Функция обратного вызова, которая вызывается если AJAX запрос не был выполнен. Функция получает три аргумента:

  • jqXHR - объект jqXHR (в jQuery 1.4.х, объект XMLHttpRequest ).
  • textStatus - строка, описывающую тип ошибки, которая произошла. Возможные значения (кроме null ) не "timeout" , "error" , "abort" и "parsererror" .
  • errorThrown - дополнительный объект исключения, если произошло. При возникновении ошибки HTTP аргумент получает текстовую часть состояния, например, "Not Found" , или "Internal Server Error" .
  Начиная с версии jQuery 1.5 допускается передавать в качестве значения параметра массив функций, при этом каждая функция будет вызвана в свою очедерь. Обратите внимание, что этот обработчик не вызывается для кроссдоменных скриптов и запросов JSONP .

• global (по умолчанию: true ).

  Тип: Boolean .
  Логический параметр, который определяет допускается ли вызвать глобальные обработчики событий AJAX для этого запроса. Значением по умолчанию является true . Если Вам необходимо предотвратить вызов глобальных обработчиков событий, таких как.ajaxStart() , или.ajaxStop() , то используйте значение false .

  headers (по умолчанию: { } ).

  Тип: PlainObject .
  Объект, который содержит пары ключ/значение дополнительных заголовков запроса, предназначенные для отправки вместе с запросом с использованием объекта XMLHttpRequest . Обращаю Ваше внимание, что заголовок X-Requested-With: XMLHttpRequest добавляется всегда, но значение XMLHttpRequest по умоланию допускается изменить с использованием этого параметра. Значения headers также могут быть переопределены параметром beforeSend . Добавлен в версии jQuery 1.5.

  ifModified (по умолчанию: false ).

  Тип: Boolean .
  По умолчанию значение false , игнорирует поля заголовка HTTP запроса, а при значении true AJAX запрос переводится в статус успешно (success ), только в том случае, если ответ от сервера изменился с момента последнего запроса. Проверка производится путем проверки поля заголовка Last-Modified . Начиная с версии jQuery 1.4 , помимо заголовка Last-Modified производится проверка и "etag" (entity tag ) - это закрытый идентификатор, присвоенный веб-сервером на определенную версию ресурса, найденного на URL. Если содержание ресурса для этого адреса меняется на новое, назначается и новый etag.

  isLocal (по умолчанию: зависит от текущего местоположения).

  Тип: Boolean .
  Используйте значение true для определения текущего окружения как "локального" (например, file:///url), даже если jQuery не распознает его таким по умоланию. Следующие протоколы в настоящее время признаются как локальные: file , *-extension и widget . Если Вам необходимо изменить параметр isLocal , то рекомендуется сделать это один раз при помощи функции $.ajaxSetup() . Добавлен в версии jQuery 1.5.1.

  Тип: Boolean , или String .
  Переопределяет имя функции обратного вызова в JSONP запросе. Это значение будет использоваться вместо "callback " ("http://domain.ru/test.php?callback=?" ) в составе части строки запроса в URL адресе. Например, значение { jsonp : "onLoad "} передастся на сервер в виде следующей строки запроса "http://domain/test.php?onLoad=?" .
  Начиная с версии jQuery 1.5 при установке значения параметра jsonp в значение false предотвращает добавление строки "?callback " к URL адресу, или попытки использовать "=? " для преобразования ответа. В этом случае Вы дополнительно должны указать значение параметра jsonpCallback , например: { jsonp : false , jsonpCallback : "callbackName " } По соображениям безопасности, если Вы не доверяете цели ваших AJAX запросов, то рекомендуется установить значение параметра jsonp в значение false .

  jsonpCallback .

  Тип: String , или Function .
  Задает имя функции обратного вызова для JSONP запроса. Это значение будет использоваться вместо случайного имени, которое автоматически генерируется и присваивается библиотекой jQuery. Рекомендуется, чтобы jQuery самостоятелно генерировало уникальное имя, это позволит легче управлять запросами и обрабатывать возможные ошибки. В некоторых случаях установка собственного имени функции позволит улучшить браузерное кеширование GET запросов.
  Начиная с версии jQuery 1.5, вы можете в качестве значения параметра jsonpCallback указать функцию. В этом случае, в значение параметра jsonpCallback должно быть установлено возвращаемое значение этой функцией.

  method (по умолчанию: "GET" ).

  Тип: String .
  Метод HTTP , используемый для запроса (например, "POST" , "GET" , "PUT" ). Добавлен в версии jQuery 1.9.0.

  mimeType .

  Тип: String .
  MIME тип, который переопределяет MIME тип, указанынй в объекте XHR по умолчанию. Добавлен в версии jQuery 1.5.1.

  password .

  Тип: String .
  Пароль, который будет использован с XMLHttpRequest в ответе на запрос проверки подлинности доступа HTTP .

  processData (по умолчанию: true ).

  Тип: Boolean .
  По умолчанию данные, передаваемые в параметр data в качестве объекта будут обработаны и преобразованы в строку запроса, подходящую для типа данных по умолчанию "application/x-www-form-urlencoded" . Если Вам необходимо отправить DOMDocument , или другие не обработанные данные, то установите значение этого параметра в false .

  scriptCharset .

  Тип: String .
  Устанавливает атрибут charset (кодировка символов) на HTML тег , используемый в запросе. Используется, когда кодировка на странице отличается от кодировки удаленного скрипта. Обратите внимание, что параметр scriptCharset применяется только в кроссдоменных запросах с параметром type со значением "GET" (по умолчанию) и параметром dataType со значением "jsonp" , или "script" .

  statusCode (по умолчанию: { } ).

  Тип: PlainObject .
  Объект числовых кодов HTTP и функции, которые будут вызываться, когда код ответа сервера имеет соотвествующее значение (определенный код HTTP ). Например, следующая функция будет вызвана, если от сервера получен код ответа 404 , или "Not found" (стандартный код ответа HTTP о том, что клиент был в состоянии общаться с сервером, но сервер не может найти данные согласно запросу.): $.ajax({ statusCode : { 404: function (){ // выполнить функцию если код ответа HTTP 404 alert("страница не найдена "); } , 403: function (){ // выполнить функцию если код ответа HTTP 403 alert("доступ запрещен "); } } } );

  success .

  Тип: Function (Anything data , String textStatus , jqXHR jqXHR ).
  Функция обратного вызова, которая вызывается если AJAX запрос выполнится успешно. Функции передаются три аргумента:

  • data - данные возвращенные с сервера. Данные форматируюся в соответствии с параметрами dataType , или dataFilter , если они указаны
  • textStatus - строка описывающая статус запроса.
  • jqXHR - объект jqXHR (до версии jQuery 1.4.x объект XMLHttpRequest ).
  Начиная с версии jQuery 1.5 допускается передавать в качестве значения параметра массив функций, при этом каждая функция будет вызвана в свою очедерь.

• timeout .

  Тип: Number .
  Устанавливает в миллисекундах таймаут для запроса. Значение 0 означает, что таймаут не установлен. Обращаю Ваше внимание, что этот параметр переопределяет значение таймаута, установленного с помощью функции $.ajaxSetup() . Таймаут ожидания начинается в момент вызова метода $.ajax() .

  traditional .

  Тип: Boolean .
  Если вы планируете использовать традиционные параметры сериализации (подходит для использования в строке URL запроса или запроса AJAX ), то установите значение этого параметра в true .

  type (по умолчанию: "GET" ).

  Тип: String .
  Псевдоним (алиас) для параметра method . Вы должны использовать type , если вы используете версии jQuery до 1.9.0 .

  url (по умолчанию: текущая страница ).

  Тип: String .
  Строка, содержащая URL адрес, на который отправляется запрос.

  username .

  Тип: String .
  Имя пользователя, которое будет использовано с XMLHttpRequest в ответе на запрос проверки подлинности доступа HTTP .

  xhr (по умолчанию: ActiveXObject , когда доступен (Internet Explorer ), в других случаях XMLHttpRequest .

  Тип: Function() .
  Обратный вызов для создания объекта XMLHttpRequest . С помощью этого параметра Вы можете переопределить объект XMLHttpRequest , чтобы обеспечить свою собственную реализацию.

  xhrFields .

  Тип: PlainObject .
  Объект, содержащий пары имя_поля: значение_поля, которые будут установлены на объект XHR . Например, вы можете определить, должны ли создаваться кроссдоменные запросы с использованием таких идентификационных данных как cookie , авторизационные заголовки или TLS сертификаты: $.ajax({ url : "cross_domain_url ", // адрес, на который будет отправлен запрос xhrFields : { withCredentials: true // поддерживается в jQuery 1.5.1 + } } );

Пять лет назад вы были гадким утенком (с которым никто не разговаривал), если не знали 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. Создание нового объекта XMLHttpRequest

var xmlHttp = new XMLHttpRequest();

Я детально расскажу об этом объекте в следующей статье, а сейчас осознайте, что это объект, который управляет всем вашим взаимодействием с сервером. Прежде чем идти дальше, остановитесь и подумайте об этом – это технология 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-код для небольшого числа основных задач:

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

Листинг 2. Сбор и установка значений полей при помощи JavaScript-кода

// Получить значение поля "phone" и записать его в переменную phone var phone = document.getElementById("phone").value; // Установить значения в форме, используя массив response document.getElementById("order").value = response; document.getElementById("address").value = response;

Здесь нет ничего такого уж выдающегося, и это здорово! Вы должны начать понимать, что нет ничего чрезмерно сложного во всем этом. Как только вы освоите XMLHttpRequest , оставшаяся часть вашего Ajax-приложения будет простым JavaScript-кодом, похожим на приведенный в , смешанным с немного более умным 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-приложений (и, возможно, нов для многих из вас) я начну с него. Как вы видели в , создать этот объект и использовать его должно быть просто, не правда ли? Подождите минуточку.

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

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

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

Однако, это не так то и легко. На самом деле в ходу две различных версии MSXML. Версия MSXML зависит от версии технологии JavaScript, установленной в Internet Explorer, поэтому вам нужно написать код, подходящий для обеих версий. Взгляните на , в котором приведен код для создания 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, вам нужен другой код. Фактически, это простая строка, которую вы видели в :

var xmlHttp = new XMLHttpRequest object; .

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

Объединение

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

Листинг 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 . Основу этого кода можно разделить на три шага:

Создайте переменную xmlHttp для ссылки на объект XMLHttpRequest , который вы создадите.

В блоке try создайте объект в браузерах Microsoft:

• В блоке try создайте объект с использованием объекта Msxml2.XMLHTTP .
• Если это не получится, В блоке try создайте объект с использованием объекта Microsoft.XMLHTTP .

Если xmlHttp все еще не установлен, создайте объект для остальных браузеров.

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

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

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

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

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

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

Выполнение запроса

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

Получить какие-либо данные из Web-формы.

Создать URL для подключения.

Открыть соединение с сервером.

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

Передать запрос.

Листинг 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. Запуск Ajax-процесса

City:

State:

Zip Code:

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

В заключение

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

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

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

РесурсыНаучиться

• Оригинал статьи .
• Adaptive Path – это одна из передовых компаний в области проектирования пользовательского интерфейса. Вы можете получить кучу информации по Ajax, внимательно исследуя их страницы. (developerWorks, октябрь 2005) демонстрирует пять путей сериализации данных в Ajax-приложениях. (O"Reilly Media, Inc., February 2006) берет идеи, выделенные в этой статье и всей серии, и предоставляет их (и много чего еще) вам в инновационном и передовом формате "Вперед головой".
• JavaScript: Полное руководство , 4-я редакция (O"Reilly Media, Inc., ноябрь 2001) – отличный ресурс по языку JavaScript и работе с динамическими Web-страницами.

Обсудить

• Ajax.NET Professional - это отличных блог обо всем, что связано с Ajax.
• Присоединяйтесь к сообществу developerWorks, участвуя в .

Наша жизнь непостоянна. Все в этом мире эволюционирует и изменяется. В том числе и виртуальная реальность. И одно из слов, с которым связаны эти изменения,- это AJAX. Об AJAX уже слышали не только веб-программисты, но и рядовые пользователи. Что реально кроется за этой магической аббревиатурой? Как это использовать на своем сайте? На эти вопросы я и попытаюсь ответить в данной статье.

Впервые об AJAX я услышал весной этого года. Сразу заинтересовался этой технологией, и, как и положено в таких случаях, отправился в поиск за статьями, которые смогли бы ответить на возникшие у меня вопросы: "Что это такое? Как это работает? И в чем преимущества? Что нужно дополнительно установить на сервер/клиент для работы с AJAX? Как это можно использовать на своем сайте?". Прочтя с десяток статей, я получил ответ лишь на первые два вопроса, но на остальные ответа так нигде не нашел. И лишь после прочтения нескольких публикаций на английском языке я окончательно понял, что к чему. Это и подвигло меня к написанию данного материала.

В первую очередь статья адресуется подготовленным людям, пишущим программы для интернета и знакомым с такими терминами как "объект", "метод", "свойства". Однако частично может оказаться полезной и тем, кто просто интересуется данным вопросом. В списке литературы имеется необходимый перечень ссылок, воспользовавшись которыми вполне реально освоить технологию "с нуля".

По ходу изложения под термином "браузер" мы будем понимать браузеры: Internet Explorer 5.0+, Safari 1.3 и 2.0+, Netscape 7+, Opera 8.5+, Mozilla Firefox (плюс означает данную версию и более новые). Если речь станет заходить о других версиях, об этом будет упоминаться отдельно."Что это такое? Как это работает и в чем преимущества?"

Для того чтобы понимать, какие преимущества дает AJAX, нужно знать, как работают веб-приложения в настоящее время. А работают они по клиент-серверной технологии (рис. 1).

Пользователь в браузере открывает какую-либо страницу page . На странице есть гиперссылки, которые ведут на другие страницы. При нажатии на любую из них браузер посылает запрос URL на сервер, с которым связана эта ссылка. Если в природе не существует сервера, связанного с этой ссылкой (например, когда, набирая URL в адресной строке, вы ошиблись при написании имени ресурса), или имеются проблемы связи с интернетом, то браузер сгенерирует страницу, подобную показанной на картинке (так она выглядит в Operа-е):

В случае существования сервера, но отсутствии на нем документа, указанного в запросе сервер сам создаст HTML страницу с описанием ошибки. Например, это может быть всем известная 404-ая ошибка (документ не найден). Или, если все верно, в ответ сервер отдаст новую страницу. В любом случае, в браузер будет загружена новая страница new_page, даже если по сравнению со старой на ней изменилась лишь пара слов. Довольно существенный минус данной технологии. Кроме того, работа ведется в синхронном режиме. То есть после того как браузер отослал на сервер запрос он ожидает от него ответ, и пока ответ не получен ничего предпринимать не будет. А порой ответ, и загрузка новой страницы может длиться слишком долго. Настолько долго, что пользователь может не дождаться загрузки страницы и просто закрыть её. Поэтому веб-программмисты прибегают к некоторым уловкам.

СВОЙСТВА:

readonly onreadystatechange function

Указывает функцию обратного вызова (callback function), которая будет вызываться каждый раз, когда будет изменяться readyState свойство. Несмотря на то, что вызывается функция, параметры передать в нее не получиться. Но об этом чуть позже в примере.

readonly readyState integer

Состояние запроса. Может принимать значения:

• 0 - не неинициализированный (uninitialized), метод open() еще не был вызван;
• еще не вызван;
• 2 - загружен (loaded), метод send() был вызван и ответные заголовки/статус (свойство status ) получены;
• 3 - интерактивный (interactive), идет прием данных, которые доступны через свойство responseText ;
• 4 - завершенный (completed), в ответ на запрос получены не только все заголовки и статус, но и приняты все данные от сервера, ответ завершен.

readonly responseText string

Ответ сервера в виде обыкновенного текста. Только чтение.

readonly responseXML object

Ответ сервера в виде объекта DOM Document. Используется, если ответ сервера является корректным XML документом. Если документ не корректный, данные не получены или еще не оправлены, то свойство равно NULL. Только чтение.

readonly status string

Статус ответа. Например: 200 (ОК), 404 (документ не найден), 503 (временная перегрузка сервера). МЕТОДЫ:

void abort()

Прерывает HTTP запрос или получение данных. Очищает все свойства объекта, которым присваиваются начальные значения. Метод полезен в связке с таймером, когда по прошествии определенного времени с момента запроса (вылете в тайм-аут) ответ от сервера так и не был получен.

string getAllResponseHeaders()

Возвращает все заголовки ответа сервера в виде отформатированной строки. Каждый новый заголовок начинается с новой строки.

string getResponseHeader (string header)

Вернуть заголовок с именем header.

void open (string method, string uri, [boolean asynch])

Подготавливает запрос по адресу uri методом method (POST или GET) с указанием режима asynch, асинхронный режим или нет. В результате вызова свойство readyState становиться равным 1.

void send (string data)

Инициирует запрос к серверу. В запросе передаются данные data.

void setHeader (string header, string value)

Присваивает заголовку с именем header, значение value. Перед началом использования этого метода не забудьте вызвать open() ! "Как это можно использовать на своем сайте?"

Теперь, когда у нас есть не только необходимые теоретические знания, но и представление о том, на что практически опирается AJAX, можно преступать к написанию своего приложения. Далее я привожу один пример от момента формулирования задачи до полной ей реализации, в виде приложения, поясняя некоторые тонкости по ходу изложения.

Итак, у нас задача: нужно реализовать базу данных (БД) драйверов для различных устройств. При этом БД настолько большая, что нет смысла пересылать её приложению-клиенту и делать выборку из неё посредством JavaScript. Из-за изменения одного значения на странице перегружать её тоже нежелательно. Лично я для реализации данной задачи применяю для серверных скриптов PHP, а реализации БД применяю XML файл.

Структуру БД выбираю следующую:

Листинг БД файл data.xml : ATI 9600 128 DDR (128bit) ATI 9600 256 DDR (128bit) ATI 9600XT 256 DDR (128bit) ATI X800GTO 256 DDR (256 bit) ATI X1300 512 DDR(128bit) ATI X1300 256 DDR (128bit) NVidia 6600 128 DDR (128bit) NVidia 7800GS 256 DDR (256 bit) ATI X1300Pro 256 DDR (128bit) ATI X1600Pro 256 DDR (128bit) ATI X1800GTO 256 DDR (256bit) ATI X1600Pro 256 DDR (128bit) ATI X1900XT 512 DDR (256bit) NVidia 6600 Silencer 128 DDR (128bit) NVidia 6600GT 128 DDR (128bit) ATI X1900XT 512 DDR (256bit) ATI X1900XTX 512 DDR (256bit) ATI X800 SilentPipe 128 DDR(256bit) Nvidia 6600GT 128 DDR (128bit) NVidia 6600GT PassiveHeatsink 128 DDR (128bit) PCI-E ATI X550 128 DDR (128bit) PCI-E ATI X800GT Uniwise 256 DDR (256 bit) ATI X800GTO 256 DDR (128bit) Audigy 2 6.1 Audigy 2 ZS 7.1 X-Fi Platinum Audiophile 192 Revolution 5.1 Audiophile Audiophile Fast Track PIXMA iP 90 PIXMA iP4200 PIXMA iP6600D Picture Mate 100 Stylus Color C48 Stylus Color C87U DeskJet 1280 DeskJet 5443 Photo Smart 385 Laser Shot LBP2900 Laser Shot LBP3300 ML 1615 ML 2015 LaserJet 1018 LaserJet 2420 LaserJet 2420DN 4200F LiDE500F LiDE60 Perfection 1270 Perfection 3590 Perfection 4990 Bear Paw 2400CU Perfection 4990

Как в этой БД человек ведет поиск? Скорее всего, он от корневого элемента шел бы по дереву документа до тех пока в нужной ветви не нашел ссылку или убедился, что драйвера для данного устройства нет в базе. Также поступим и мы, используя для нахождения нужного узла или набора узлов выражения языка XPath .

Листинг формы для отправки данных index.htm :

видео картазвуковая картапринтерсканер

В форме есть две переменные: path и flag . В первой хранится запрашиваемый путь, который отправляется на сервер. Так как один элемент в форме уже есть, то у этой переменной уже есть начальное значение. Вторая переменная служит для того, чтобы указать серверному скрипту, что из документа нужно извлечь определенный элемент Device . Кроме того, формат возвращаемых данных с сервера изменится.

Теперь рассмотрим JS-движок. Все функции клиентской части собраны в скрипте ajax.js : y = new Object(); function httpRequest() { if (window.XMLHttpRequest) { //создание объекта для всех браузеров кроме IE requestObj = new XMLHttpRequest(); } else if (window.ActiveXObject) { //для IE requestObj = new ActiveXObject("Msxml2.XMLHTTP"); if (!requestObj) { requestObj = new ActiveXObject("Microsoft.XMLHTTP"); }; }; }; function sendRequest (url,data) { httpRequest(); //определяем call-back функцию requestObj.onreadystatechange = responseServer; //подготовка отправки данных, readyState=1 requestObj.open("POST",url,true); /* Т.к. данные отправляются POST методом, то необходимо серверу отослать заголовок информирующий его об этом */ requestObj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8"); //отправка данных на сервер requestObj.send(data); }; function responseServer() { if (requestObj.readyState == 4) { var status = requestObj.status; if (status == 200) { addSelect(y); } else if (status == 400) { alert("Неправильный запрос"); } else if (status == 500) { alert("Внутреняя ошибка на сервере"); } else if (status == 503) { var time = requestObj.getResponseHeader("Retry-After")*1000; alert("Сервер перегружен. Запрос будет повторен через: "+time+" секунд"); setTimeout(sendRequest(url,path),time); } else { alert("Ошибочный ответ сервера"); }; }; }; function sendData(obj) { var Elpath = document.form.path; var url = "index.php"; if (document.form.flag.value == "0") { var path = Elpath.value + "/" + obj.value; } else { var path = Elpath.value + "/Device["" + obj.value + ""]"; /* методом GET отправляем серверному скрипту информация о том что необходим конкретный элемент Device */ url = "index.php?flag=1"; }; //присваиваем переменной формы path значение текущего запроса Elpath.value = path; //кодируем передаваемую строку path path = "path="+encodeURIComponent(path); y = obj; sendRequest (url,path); }; function addSelect(obj) { //ответ сервера в виде обычного текста var docTEXT = requestObj.responseText; obj.setAttribute("disabled",true); //создаем элемент div var div = document.createElement("div"); //добавляем ответ сервера в div div.innerHTML = docTEXT; //добавляем div с ответом сервера в дерево документа document.form.appendChild(div); }; function reset() { document.form.path.value="//Devices"; document.form.flag.value="0"; var NodeListDiv = document.form.getElementsByTagName("div"); var length = NodeListDiv.length; if (length > 1) { while (NodeListDiv != undefined) { document.form.removeChild(NodeListDiv); }; }; document.form.Devices.removeAttribute("disabled"); };

Как я уже говорил, в функцию свойства onreadystatechange нельзя передать параметры. Точнее нельзя передавать параметры, которые являются объектами. Поэтому в самом начале создаем переменную, в которой и будем хранить ссылку на вызвавший функцию объект. Поскольку данная переменная находится в глобальной зоне видимости переменных, то обратиться к ней можно будет из любой части программы. На данный момент это самый разумный способ передать параметры call-back функции свойства onreadystatechange объекта.

А теперь разберем по шагам работу движка.

При наступлении события onblur (элемент select потерял фокус) вызывается функция sendData(), которая и подготавливает POST данные для оправки запроса. Кроме того, она формирует XPath выражение в зависимости от значения переменной flag=0 (например, //Devices/VideoCards ) или flag=1 (например, //Devices/VideoCards/AGP/Sapphire/Device["ATI 9600XT 256 DDR (128bit)"] ).

Далее вызываем функцию sendRequest(), в которую передаем URL серверного скрипта, а также переменную типа строка, в которой содержатся готовые POST-данные. И первым делом создаем XMLHttpRequest объект, ссылку на который храним в переменной requestObj . Функция httpRequest() является кросс-браузерной, и будет работать во всех браузерах.

Когда-то обращение к функции httpRequest() я делал сразу при загрузке страницы через и больше не создавал XMLHttpRequest объект. Но как оказалось, это работает для всех браузеров кроме IE, который каждый раз требует создавать новый объект. Поэтому вызов данной функции делается каждый раз перед отправкой данных.

После отправки данных браузер ждет ответа с сервера. При каждом изменении свойства readyState будет вызываться функция responseServer() . Если статус ответа пришел с кодом "200" (все нормально), то будет вызвана функция addSelect(), которая и добавит полученный данные в DOM текущего документа. Все браузеры будут ждать ответа от сервера. Однако по истечении некоторого времени (time-out) принудительно назначат XMLHttpRequest.readyState = 4 и перестанут ожидать ответа с сервера. Например, для Opera значение тайм-аута составляет 10 секунд. Используя другие статусы, можно добавить в движок обработчик ошибок в ответах сервера.

Функция addSelect() добавляет в DOM текущего документа еще один узел DIV, в который и помещает ответ с сервера. Может возникнуть вопрос, почему используется свойство responseText , а не responseXML ? У кого-то обязательно возникнет желание, используя это свойство, импортировать ответ сервера (а серверный скрипт в ответ присылает XML документ) прямо в DOM документа. Возникло такое желание и у меня. Я хотел импортировать корневой элемент присланного XML файла и все его потомки методом importNode . Но браузер импортировал элемент без потомков, даже несмотря на то, что второй параметр данного метода был установлен в true : importNode(Object importedNode,true) . Поэтому не точная реализация этого метода пока исключает его использование.

Равнозначное решение было найдено, используя innerHTML метод элемента.

На этом работа клиентской части заканчивается. Оставшаяся нерассмотренной функция reset() призвана вернуть DOM документа к начальному виду. Достичь того же можно, обновив страницу по F5, но AJAX-движок как раз и пишется для того, чтобы избежать перезагрузки страницы. Поэтому все элементы, добавленные в документ скриптом, должны быть удалены из него также скриптом.

В ответ на запрос серверный скрипт формирует XML данные вида: childrenElementName_1 .... childrenElementName_1

Если запрашиваемый узел имеет имя Device , то возвращается обычный отформатированный текст. Серверный скрипт написан на PHP V5 и не будет работать на более ранних версиях этого интерпретатора, так как расширение для работы с DOM было введено в этот язык только с пятой версии, и заменило собой расширение DOM XML, интерфейс которого не соответствовал спецификации. А теперь посмотрим на код серверного скрипта.

Листинг файла index.php : load("data.xml"); //создаем объект XPath $DOMXPath = new DOMXPath($doc); $DOMNodeList = $DOMXPath -> query($_POST); //согласно запросу извлекаем нужный элемент $DOMNode = $DOMNodeList -> item(0); //создаем объект XML-документ $replyXML = new DOMDocument("1.0", "windows-1251"); /* если flag не равен единице, значит текущий элемент не является элементом Device и необходимо найти все элементы-потомки текущего элемента DOMNode */ if ($_GET != 1) { //получаем список все потомков элемента $childNodes = $DOMNode -> childNodes; /* Поскольку потомки могут быть не только элементы, но и узлы, то создаем индексный массив который содержит только элементы-потомки */ foreach ($childNodes as $Node) { if ($Node->nodeType == 1) { $arrayNodes = $Node; }; }; //создаем корневой элемент XML-документа $root = $replyXML->createElement("select"); $optgroup = $replyXML->createElement("optgroup"); /* если элементы-потомки не являются Device, то задаем атрибуты для корневого элемента и его элемента-потомка optgroup */ if ($arrayNodes -> nodeName != "Device") { $root->setAttribute("name",$DOMNode->nodeName); $AttributeNode = $arrayNodes->getAttributeNode("title"); $optgroup->setAttribute("label",$AttributeNode->value); $root->setAttribute("onblur","sendData(this)"); } else { /* в противном случае создаем атрибут с JS кодом который и присвоит переменной в форме flag значение "1" */ $root->setAttribute("onblur", "document.form.flag.value=1;sendData(this);"); }; /* цикл создающий для каждого элемента-потомка новые элементы option; сколько потомков, столько и элементов */ foreach ($arrayNodes as $Node) { $option = $replyXML->createElement("option"); $setNode = $Node->nodeName; if ($Node->nodeName == "Device") { $setNode = $Node->nodeValue; }; $option-> nodeValue = $setNode; $option->setAttribute("value",$setNode); $optgroup->appendChild($option); }; //вставляем в XML-документ получившиеся элементы $replyXML->appendChild($root); $root->appendChild($optgroup); /* если flag=1, то значит текущий элемент является Device элементом; элементы-потомки не нужны, а нужны атрибуты текущего элемента */ } else { //создаем корневой элемент $root = $replyXML->createElement("pre"); $DOMText = new DOMText(" OS URL"); $root -> appendChild($DOMText); $NamedNodeMapAttr = $DOMNode->attributes; $i = 0; /* цикл который находит все атрибуты элемента Device и для каждого атрибута создает строку с данными содержание ссылку */ while (($NodeAttr = $NamedNodeMapAttr->item($i)) != null) { if ($NodeAttr->name != "id") { $DOMText = new DOMText(" $NodeAttr->name "); $DOMElement = $replyXML->createElement("a"); $DOMElement -> setAttribute("href",$NodeAttr->value); $DOMElement -> nodeValue = $NodeAttr->value; $root -> appendChild($DOMText); $root -> appendChild($DOMElement); }; $i++; $NodeAttr = $NamedNodeMapAttr->item($i); }; $replyXML->appendChild($root); }; //отсылаем ответ клиенту echo $replyXML->saveHTML(); ?>

AJAX расшифровывается как Asynchronous Javascript And XML, что означает Асинхронный JavaScript и XML. AJAX позволяет обновлять данные HTML-страницы без полной её перезагрузки. Кроме этого технология позволяет работать с интернет-страницами асинхронно. То есть пока JavaScript взаимодействует с Web-сервером, пользователь может продолжать работать с web-страницей.

Примером использования технологии AJAX является Google Suggest . Работа Google Suggest заключается в том, что пока вы вводите слово или фразу для поиска, JavaScript обращается к базе данных Google и запрашивает у неё 10 самых популярных запросов, начинающихся с тех же букв. И затем выводит этот список без перезагрузки страницы.

Для рассмотрения принципов работы технологии AJAX, реализуем на своем сайте механизм подобный Google Suggest. Допустим, у нас есть сайт туроператора. На сайте есть поле поиска предложений по названию страны. Добавим к этому полю раскрывающийся список с автозаполнением по введенным буквам. Приступим к решению этой задачи. Сразу оговорюсь, что для реализации этой задачи необходимо знание HTML и немного JavaScript(знатоком быть не обязательно). В качестве серверного языка будет использован php.

Для начала создадим форму поиска. Для этого на вашем web-сервере создайте файл index.html, откройте его при помощи любого текстового редактора и введите следующий html-код.

Поиск предложений.

Отдых на море

Поиск предложений:

В этом листинге мы создали форму поиска с полем для ввода текста и кнопкой отправки, и создаем слой div для вывода результатов. К данной странице так же прикрепляется файл ajax.js, который будет содержать функции JavaScript.

Далее напишем функции JavaScript, которые будут посылать запросы серверу и обновлять страничку. Для того чтобы не приходилось перегружать html-документ полностью нам и понадобиться технология Ajax. Итак, приступим. Создайте файл ajax.js, поместите его в ту же папку, что и index.html, и откройте его в текстовом редакторе.

Для начала необходимо создать объект, который будет передавать запросы серверу и принимать ответы. В разных браузерах этот объект создается по разному. Мы напишем универсальную функцию, которая должна работать в разных браузерах. Добавьте в файл ajax.js следующий код JavaScript.

/*переменная для хранения объекта запроса*/
var request;
/*функция создания объекта запроса*/
function CreateRequest()
{
var request=null;
try
{
//создаем объект запроса для Firefox, Opera, Safari
request = new XMLHttpRequest();
}
catch (e)
{
//создаем объект запроса для Internet Explorer
try
{ request=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
request=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return request;
}

Выводить список результатов необходимо при каждом изменении в поле поиска. Для этого воспользуемся обработчиком событий JavaScript. Определять изменения будем при каждом событии клавиатуры keyup . Для этого в наш HTML-код файла index.html в строке, где создается поле поиска с именем country , добавим атрибут onkeyup="KeyPress(this.value)" :

Т. е. при нажатии любой клавиши будет вызываться функция JavaScript KeyPress() , в которую в качестве параметра передаются символы, введенные в строку поиска. Функция KeyPress() должна выполнить следующие задачи:

• Создать новый объект запроса посредством вызова функции CreateRequest();
• Сформировать URL-адрес, к которому необходимо подключиться для получения результатов;
• Настроить объект запроса для установки связи с сервером;
• Отправить запрос серверу.

Приступим к созданию функции KeyPress() . Для создания нового объекта запроса нам просто необходимо переменной request присвоить значение, возвращаемое ранее созданной функцией CreateRequest() . И для надежности проверим переменную request . Если она равна NULL , то объект запроса создать не удалось. Вот так будет выглядеть код JavaScript для решения данной задачи:

Function KeyPress(term) {
request=CreateRequest();

if(request==null)
{
return;
}
}

Далее необходимо указать объекту запроса request какая функция JavaScript будет обрабатывать ответ сервера. Для этого необходимо свойству onreadystatechange присвоить имя соответствующей функции. Данное свойство указывает браузеру, какую функцию запускать при каждом изменении состояния готовности запроса. У нас обработкой ответа будет заниматься функция LoadResults() . Добавьте в функцию следующую строку: request.onreadystatechange = LoadResults; . Отметим, что после названия функции нет скобок.

Затем займемся настройкой подключения. Для этого сначала необходимо указать объекту, куда передавать этот запрос. Сформируем URL-адрес сценария, который будет вычислять результаты, и присвоим его переменной url . Допустим, за вычисление результатов на стороне сервера у нас будет отвечать php-скрипт country.php . Тогда наш URL-адрес будет выглядеть следующим образом: var url = "country.php" + "?s=" + encodeURIComponent(term) + "&sid=" + Math.random(); , где с переменной s передаются введенные в поле поиска символы, а sid присваивается случайное число, чтобы браузер не кэшировал страницу. Добавьте эту строчку в тело функции KeyPress() .

Далее необходимо инициализировать подключение с помощью метода open("GET", url, true) объекта request . Этот метод имеет три параметра. Параметр "GET" указывает, как отправить данные серверу. Мы используем метод GET , потому что введенные символы в строку поиска передаются серверному сценарию через url-адрес. Во второй параметре указывается url-адрес серверного сценария. У нас url-адрес храниться в переменной url , поэтому во втором параметре мы указываем эту переменную. Третий параметр может иметь два значения: true - асинхронный режим и false - синхронный режим. Наше приложение будет работать в асинхронном режиме, поэтому указываем true . После инициализации подключения, необходимо создать подключение и запросить результаты. Для этого просто необходимо вызвать функцию send(null) объекта request . Параметр null указывает, что запрос не содержит данных.

После внесения всех изменений функция KeyPress(this.value) примет следующий вид:

Function KeyPress(term)
{
/*создаем новый объект запроса*/
request=CreateRequest();
/*если не удалось создать объект запроса, то заканчиваем выполнение функции*/
if(request==null)
{
return;
}
/*формируем url-адрес*/
var url = "country.php" + "?s=" + encodeURIComponent(term) + "&sid=" + Math.random();
/*настраиваем объект запроса для установки связи*/
request.onreadystatechange = LoadResults;
request.open("GET", url, true);
/*отправляем запрос серверу*/
request.send(null);
}

Итак, соединение установлено, запрос отправлен, сервер обрабатывает данные и возвращает результат. Далее необходимо получить ответ, обработать и вывести результаты на web-страницу. Всем этим будет заниматься функция LoadResults() , которая будет вызываться при каждом изменении статуса готовности запроса. Рассмотрим, как должна работать эта функция.

Для начала необходимо проверить текущее состояние готовности. Статус готовности хранит свойство объекта запроса readyState . При завершении обработки запроса состояние готовности равно 4. Т.е. если request.readyState == 4 , то можно обрабатывать ответ:

Function LoadResults()
{


/*обрабатываем ответ*/
}
}

Function LoadResults()
{
/*Проверяем состояние готовности*/
if (request.readyState == 4){
/*Проверяем статус запроса*/
if (request.status == 200){
/*все в порядке, обрабатываем ответ*/
}
}
}

Если проверка состояния и статуса запроса закончилась успешно, то можно приступать к обработке данных, полученных от сервера. Получить данные можно двумя способами: request.responseText - получение данных в виде текста, либо request.responseXML - получение данных в виде объекта XMLDocument. Допустим, у нас сервер передает ответ в виде текстового списка стран через запятую. Тогда получаем данные: var answer = request.responseText . Далее обрабатываем данные и выводим их в слой с id="searchresults" .

Я не буду вдаваться в подробности обработки данных, а просто приведу код функции с комментариями:

Function LoadResults()
{
/*Проверяем состояние готовности*/
if (request.readyState == 4){
/*Проверяем статус запроса*/
if (request.status == 200){
//делаем слой searchresults видимым
ShowDiv("searchresults");
//очищаем результаты
ClearResults();
//получаем данные
var answer = request.responseText;
//преобразуем строку текста в массив
var array = answer.split(",");
//определяем размер массива
var count = array.length;
//находим слой searchresults

//создаем таблицу в объектной модели документа
var tbl = document.createElement("table");
var tblbody = document.createElement("tbody");
var tblRow, tblCell, tblNode;
//перебираем все элементы массива array
for(var i = 0; i {
var text = array[i];
//создаем строки таблицы и добавляем в ее тело
tblRow = document.createElement("tr");
tblCell = document.createElement("td");
//задаем атрибуты и функции ячеек
tblCell.onmouseover = function(){this.className="mouseOver";};
tblCell.onmouseout = function(){this.className="mouseOut";};
tblCell.setAttribute("border", "0");
tblCell.onclick = function(){Replace(this);};
tblNode = document.createTextNode(text);
tblCell.appendChild(tblNode);
tblRow.appendChild(tblCell);
tblbody.appendChild(tblRow);
}
//добавляем в таблицу ее тело
tbl.appendChild(tblbody);
//помещаем таблицу в слой
div.appendChild(tbl);
}
}
}

И еще пару вспомогательных функций JavaScript для вывода результатов на экран:

/*делаем слой с результатами видимым*/
function ShowDiv(id)
{
if (document.layers) document.layers.visibility="show";
else document.getElementById(id).style.visibility="visible";
}

/*делаем слой с результатами не видимым*/
function HideDiv(id)
{
if (document.layers) document.layers.visibility="hide";
else document.getElementById(id).style.visibility="hidden";
}

/*очистка результатов*/
function ClearResults()
{
/* Удаление существующих строк из таблицы результатов
var div = document.getElementById("searchresults");
var counter = div.childNodes.length;
for(var i = counter-1; i >= 0; i--)
{
div.removeChild(div.childNodes[i]);
}
}

/*Заменяем значение в поле ввода значением, выбранным щелчком мыши*/
function Replace(tblCell)
{
var inputbox = document.getElementById("country");
inputbox.value = tblCell.firstChild.nodeValue;
ClearResults();
HideDiv("searchresults");
}

Так же в наш html-файл index.html между тегами и добавьте следующие правила CSS:

.mouseOut{ background: #ffffff; color: #0000000; }
.mouseOver{ background: #ccccff; color: #0000000; }
table {width:250px }

На этом все. В данной статье мы рассмотрели основы работы технологии Ajax на примере.

Аббревиатура AJAX (Asynchronous JavaScript and XML) символизирует собой концепцию использования ряда технологий веб - программирования, позволяющих асинхронно обновлять содержимое отдельных областей HTML страницы . Асинхронно означает то, что обновление нужного вам блока HTML разметки может происходить несинхронно с обновлением всей страницы. Как следствие, в браузере не будет наблюдаться мелькание, которым часто сопровождается обновление страницы или переход пользователя на другую страницу по гиперссылке.

Асинхронно может также означать и параллельное обновление сразу нескольких фрагментов . К примеру, когда загружается страница с большим количеством тегов , то сами изображения могут появляться постепенно и параллельно друг другу. Именно способность обновлять не всю интернет страницу, а отдельную ее часть делает технологии AJAX такими популярными и востребованными в области веб-дизайна. Довольно часто AJAX используют в сценариях авторизации (генерация capture) или при отображении статуса длительных операций, выполняемых на сервере.

Если не вдаваться в детали, то AJAX объединяет в себе два основных подхода к созданию интерактивных интернет страниц:

Использование объекта XMLHttpRequest для обращения к серверу и получения от него ответа в фоновом режиме по http протоколу.

Динамическое обновление самой страницы через программные интерфейсы ее объектной модели (Document Object Model , DOM ) в коде . Все вместе это называется .

Что дает использование AJAX? Чтобы понять это нужно его использовать и сравнить с тем, что было без него. Ниже пара неоспоримых преимуществ применения AJAX при построении интернет сайтов:

Сокращение трафика и нагрузки на сервер, поскольку сервер и клиент обмениваются не всей разметкой интернет страницы, а только ее частью.

Более качественная эргономика и более высокая скорость работы пользовательского интерфейса сайта.

Использование AJAX – это не только плюсы, но и недостатки, с которыми приходится мириться, если вы решите применять эту программную концепцию в своих интернет проектах. Вот некоторые из них, которые необходимо иметь в виду:

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


• Содержимое, отображенное в результате AJAX запроса может никогда не попасть в поле зрения поисковых машин (Google, Яндекс), поскольку они не имитируют поведение пользователей и не исполняют JavaScript код.


• Стандартные сервисы учета посетителей и просмотра страниц могут формировать неверную статистику.


• Использование не только программных средств AJAX, но и любых JavaScript сценариев может приводить к тому, что ваша страница будет вести себя по разному под управлением различных браузеров, и это поведение будет не всегда корректно.

Объект XMLHttpRequest

Теперь я кратко опишу сценарий того, как используется AJAX в чистом виде, а затем уже более подробно расскажу, чем в этом деле нам может помочь . Как уже было сказано, асинхронные обращения к серверу выполняются через объект XMLHttpRequest . Для начала его нужно создать, а делается это в разных браузерах по-разному. Процедура создания XMLHttpRequest , которая имеет шансы корректно работать везде, выглядит примерно следующим образом.

Function createRequest() { var request = null; if (window.XMLHttpRequest) { request = new XMLHttpRequest(); } else if (window.ActiveXObject) { try {request = new ActiveXObject("Msxml2.XMLHTTP");} catch (ex) { try { request = new ActiveXObject("Microsoft.XMLHTTP");} catch (ex){return null;} } } return request; }

//Создаем запрос var request = createRequest() //Передаем тип http запроса (GET или POST), URL запроса и режим: асинхронный запрос (true) //или синхронный (false), когда на время выполнения запроса работа браузера приостанавливается. request.open("GET", url, true); //Определяем обработчик завершения запроса request.onreadystatechange = onSuccess; //Выполняем запрос request.send();

Где функция обработки успешного завершения onSuccess запроса может выглядеть примерно следующим образом:

Function onSuccess () { try { if (request.readyState == 4) { //Запрос выполнен if (request.status == 200) { //и выполнен успешно //здесь что-то делаем с результатом запроса var result = request.responseText; } else { //здесь обрабатываем неудачное выполнение запроса alert(request.statusText); } } } catch(ex) {} }

AJAX и jQuery

В принципе ничего сложного в приведенном выше примере нет, но обратите внимание на функцию createRequest . Способность программного кода работать одинаково корректно под управлением любого браузера называется кроссбраузерностью . Чтобы ваш программный код стал кроссбраузерным нужно приложить серьезные усилия: необходимо знать нюансы каждого браузера и пути разрешения проблем несовместимости его инфраструктуры с применяемыми вами программными средствами. Популярная среди веб программистов Javascript библиотека JQuery не только облегчает работу с объектом XMLHttpRequest , но и гарантирует (старается это делать) кроссбраузерность вашего решения. В jQuery есть несколько методов для работы с технологиями AJAX. В первую очередь это сам метод ajax , который является наиболее универсальным и подходит для составления любых запросов к серверу. Методы get и post внутри себя также используют метод ajax (являются его обертками), и предназначены, как несложно догадаться по их названию, для отсылки серверу GET и POST запросов соответственно. Ниже представлены примеры JavaScript кода использования AJAX средствами jQuery.

Function loadArticle_ajax(type, id) { $..php", data: ({article_id:id}), success: OnComplete, error: OnFail }); } function loadArticle_get(id) { $..php", {article_id:id}, OnComplete) .fail(OnFail); } function loadArticle_post(id) { $..php", {article_id:id}, OnComplete) .fail(OnFail); } function OnComplete(html) { $("#content").html(html); } function OnFail(response) { $("#content").html("Ошибка загрузки данных:
" + response.statusText+"
" + response.responseText); }

Приведенные функции выполняют параметризованный http запрос по ссылке (URL) следующего вида:

Http://сайт/readarticle_content.php?article_id=id

Извлекаемое содержимое зависит от параметра id . Если в вашем случае никаких параметров передавать не нужно, то оставьте в качестве соответствующего аргумента пустое множество {}. Посмотреть на работу примера можно . На этом про AJAX и jQuery у меня все.