В этой статье AJAX описывается на уровне возможностей и примеров. Рассмотрены особенности асинхронного взаимодействия и примеры использования, но с минимумом технических деталей.
Надеюсь, она будет полезна для понимания, что такое AJAX и с чем его едят.
Что такое AJAX ? Пример реализации.AJAX, или, более длинно, A synchronous J avascript A nd X ml - технология для взаимодействия с сервером без перезагрузки страниц.
За счет этого уменьшается время отклика и веб-приложение по интерактивности больше напоминает десктоп.
Технология AJAX, как указывает первая буква A в ее названии - асинхронна, т.е браузер, отослав запрос, может делать что угодно, например, показать сообщение
об ожидании ответа, прокручивать страницу, и т.п.
Вот код кнопки в примере выше:
При нажатии она вызывает функцию vote , которая отправляет запрос на сервер, ждет ответа, а затем показывает сообщение об этом в div "е под кнопкой:
Здесь будет ответ сервера
Для обмена данными с сервером используется специальный объект XmlHttpRequest , который умеет отправлять запрос и получать ответ с сервера. Кроссбраузерно создать такой объект можно, например, так:
Function getXmlHttp(){ var xmlhttp; try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) { xmlhttp = false; } } if (!xmlhttp && typeof XMLHttpRequest!="undefined") { xmlhttp = new XMLHttpRequest(); } return xmlhttp; }
Более подробно о деталях реализации AJAX с использованием XmlHttpRequest и других транспортов можно почитать в разделе про общение с сервером .
Здесь мы не будем на этом останавливаться и перейдем сразу к функции vote:
// javascript-код голосования из примера function vote() { // (1) создать объект для запроса к серверу var req = getXmlHttp() // (2) // span рядом с кнопкой // в нем будем отображать ход выполнения var statusElem = document.getElementById("vote_status") req.onreadystatechange = function() { // onreadystatechange активируется при получении ответа сервера if (req.readyState == 4) { // если запрос закончил выполняться statusElem.innerHTML = req.statusText // показать статус (Not Found, ОК..) if(req.status == 200) { // если статус 200 (ОК) - выдать ответ пользователю alert("Ответ сервера: "+req.responseText); } // тут можно добавить else с обработкой ошибок запроса } } // (3) задать адрес подключения req.open("GET", "/ajax_intro/vote.php", true); // объект запроса подготовлен: указан адрес и создана функция onreadystatechange // для обработки ответа сервера // (4) req.send(null); // отослать запрос // (5) statusElem.innerHTML = "Ожидаю ответа сервера..." }
Поток выполнения, использованный vote, довольно типичен и выглядит так:
Серверный обработчик, к которому обращен AJAX-запрос (в примере это vote.php) по сути ничем не отличается от обычной страницы. AJAX-запрос, отправляемый XmlHttpRequest , ничем не отличается от обычного запроса.
Просто текст, который возвращает сервер, не показывается как HTML, а читается и обрабатывается функцией onreadystatechange .
Смысл AJAX - в интеграции технологийТехнология AJAX использует комбинацию:
- (X)HTML, CSS для подачи и стилизации информации
- DOM-модель, операции над которой производятся javascript на стороне клиента, чтобы обеспечить динамическое отображение и взаимодействие с информацией
- XMLHttpRequest для асинхронного обмена данными с веб-сервером. В некоторых AJAX-фреймворках и в некоторых ситуациях, вместо XMLHttpRequest используется IFrame, SCRIPT-тег или другой аналогичный транспорт.
- JSON часто используется для обмена данными, однако любой формат подойдет, включая форматированный HTML, текст, XML и даже какой-нибудь EBML
Типичное AJAX-приложение состоит как минимум из двух частей.
Первая выполняется в браузере и написана, как правило, на JavaScript, а вторая - находится на сервере и написана, например, на Ruby, Java или PHP .
Между этими двумя частями происходит обмен данными через XMLHttpRequest(или другой транспорт).
Что я могу сделать с помощью AJAX ?Смысл AJAX - в интерактивности и быстром времени отклика.
Небольшие элементы управленияВ первую очередь AJAX полезен для небольших элементов, связанных с элементарными действиями: добавить в корзину, подписаться, и т.п.
 |
 |
 |
Например, дерево, узлы которого подгружаются по мере раскрытия.
На момент его появления он явился единственным открытым почтовым сервисом, использующим AJAX для следующих фич.
- Проверка ошибок ввода формы ДО сабмита
На сервер передается имя пользователя, результат проверки возвращается на страницу.
- "Мгновенная" загрузка
Браузер обращается к серверу только за данными, а не обновляет весь громоздкий интерфейс
- Автоматическая "доставка" писем в открытую папку
Время от времени отправляется запрос на сервер и, если пришли новые письма, они появляются в браузере.
- Автодополнение
Достаточно ввести первые буквы имени адресата, и остальные дополняются автоматически, как в десктоп-приложениях.
Результат: обширная популярность, высокий спрос на account"ы с момента открытия.
Синхронная модель VS Асинхронная модельВ обычном программировании все операции носят синхронный характер, т.е выполняются одна за другой.
Условно говоря, мы действуем так:
При асинхронном подходе мы:
Т.е, в синхронном случае удочка постоянно приковывает наше внимание. Ловля рыбы - последовательный процесс.
В асинхронном варианте - мы сначала задали программу, что делать при клеве, а затем опустили удочку ловить и занялись другими делами.
Например, поставили еще 5 таких удочек.
Асинхронное программирование сложнее, чем синхронное, и поначалу непривычно, т.к в нем заранее
задается то, что сработает после
.
Т.е, программу "что делать, когда клюнет" нужно задать до того, как клюнуло, и вообще неизвестно, есть ли в водоеме рыба.
Существуют приемы, облегчающие асинхронное программирование, например, отложенный объект Deferred (Twisted,Dojo,Mochikit), но об этом - в отдельной статье.
Синхронная и асинхронная модель в AJAXВернемся к нашим баранам: браузеру, серверу и, скажем, базе данных.
В синхронной модели браузер отправляет запрос на сервер и висит, ждет, пока тот совершит всю необходимую работу. Сервер выполняет запросы к базе данных, заворачивает ответ в необходимый формат и выводит его. Браузер. получив ответ, вызывает функцию показа.
Все процессы выполняются последовательно, один за другим.
Сетевые задержки включены во время ожидания, обозначенное на схеме серым цветом.
Пользователь не может заниматься чем-то другим на этой же странице, пока происходит синхронный обмен данными.
В асинхронной модели запрос отсылается ("удочка поставлена"), и можно заняться чем-то другим. Когда запрос выполнился ("клюнуло") - запускается заранее
подготовленная программистом функция ("подтянуть спиннинг") показа сообщения сервера.
Здесь сервер сразу же уведомляет браузер о том, что запрос принят в обработку и освобождает его для дальнейшей работы. Когда ответ будет готов - сервер перешлет его, и на браузере будет вызвана соответствующая функция показа, но пока этот ответ формируется и пересылается - браузер свободен.
Пользователь может написать комментарии, заполнить и отослать форму и т.п: Могут производиться новые асинхронные запросы.
Асинхронная модель характеризуется почти мгновенной реакцией на действия пользователя, так что создается впечатление удобного и быстрого приложения.
Из-за такого разрыва между действием и реальным результатом приложение становится гораздо более чувствительно к ошибкам.
Особенно в случае нескольких одновременных асинхронных запросов, нужно заботиться об очередности выполнения и ответа (race-conditions) и, в случае ошибки, оставлять приложение в целостном (consistent) состоянии.
Особенности асинхронной модели- Сложность в реализации
- Недостаточные возможности браузера (javascript)
- Асинхронная модель сложнее для отладки
- Race conditions
- Неопределена последовательность выполнения
- Можно делать много одновременных задач ("удочек"), но задача, начатая первой, может окончиться последней.
- Реакция тут же, но неизвестно, какой будет результат. Усложнена обработка ошибок
- Ошибок коммуникации - разрыв связи, и т.п.
- Пользовательских ошибок - например, не хватило привилегий
- Контроль целостности (bugproof)
- Например, редактор отправил асинхронный запрос на удаление ветки дерева. Добавление в нее нужно отключить, пока не придет ответ сервера. Если вдруг не хватило привилегий, то операция не удалась.
- Интерактивность
- Быстрый интерфейс
Плюсов всего два, зато какие! Овчинка стоит выделки.
Асинхронный drag"n"drop.Иногда для асинхронных операций необходимо делать различные "финты ушами". Например, хочется сделать drag"n"drop в дереве, т.е перетаскивать статьи из одного раздела в другой мышкой, и чтобы они на сервере в базе данных меняли родителя.
Drag"n"drop - это "взял мышей объект - положил куда надо - готово". Но в асинхронной модели не может быть все прям сразу "готово".
Надо проверить привилегии на сервере, проверить, существует ли еще объект, вдруг его удалил другой пользователь.
Надо как-то показать, что процесс пошел, но результат "ща будет..". А как? В асинхронной модели указатель мыши не может просто так зависнуть над объектом, превратившись в часики.
В таком случае применяют либо синхронные запросы к серверу - и тогда все действительно подвисает, либо оригинальный выход - положить объект, как будто он перенесен, и проинформировать анимированной иконкой об ожидании ответа.
Если ответ отрицателен - обработчик ответа переносит объект обратно.
В примере с drag"n"drop также затронута проблема "stale context" - устаревшего контекста.
Веб - многопользовательская среда. Если для навигации используется,
скажем, дерево статей, то над ним работают много человек. Один из них может удалить ветку дерева, над которой работает другой: конфликт.
Как правило, для преодоления таких казусов используются следующие средства:
Политика редактированияЭто когда все знают кто чего делает и на уровне деления полномочий и личного общения такие удаления согласовывают. Вариант заведомо небезопасный, но обычно работающий.
Локинг и/или версионный контрольЛокинг - блокирование редактируемых документов.
Версионный контроль - каждый новый документ становится версией, так что изменения никогда не теряются. Версионность влечет за собой конфликты, когда Петя начал редактировать документ раньше Васи, а сохранил - позже. При этом в последней версии изменения Васи оказались потеряны, хотя предпоследняя (Васина) версия в системе обязательно есть.
Более подробно о локинге и версионности можно почитать, например, в документации к системе версионного контроля Subversion .
Автообновление контекстаПроблема устаревшего контента может быть на 99% решена при помощи мгновенного автообновления.
Браузер держит постоянное соединение с сервером (или делает время от времени корректирующие запросы) - и нужные изменения отсылаются по этому каналу.
Например, в раскрытую ветку дерева иногда подгружаются новые статьи, в открытый почтовый интерфейс - новые письма.
Вообще, проблема устаревшего контекста напрямую относится к задаче целостности данных. За конечную проверку целостности, как и при валидации форм, в любом случае несет ответственность сервер.
AJAX - Что это?
Когда существующих возможностей становиться мало, а совершенствовать существующее уже некуда, тогда и происходит технологический прорыв. Таким прорывом и есть AJAX (Asynchronous JavaScript and XML) - подход к построению пользовательских интерфейсов веб-приложений, при котором web-страница, не перезагружаясь, сама догружает нужные пользователю данные. AJAX - один из компонентов концепции DHTML.
Что же дает нам эта технология. В настоящее время разработка WEB приложений стремится к разграничению клиентской части и серверной, этим и обуславливается повсеместное использование шаблонов, таких как Smarty и XSLT. Сейчас проекты становятся сложнее, и переплетать между собой различные технологии становиться слишком дорого для времени разработчика. Так, например, все стили форматирования выносятся в CSS или в XSL файлы, HTML или XML данные хранятся в других разделах, серверные обработчики в третьих, базы данных в четвертых. И если еще 5-6 лет назад практически везде можно было увидеть переплетение всего этого в одном файле, то сейчас это все чаще становиться редкостью.
При разработке более сложных проектов возникает необходимость в структурированности и удобочитаемости кода. Не следует засорять код программиста кодом верстальщика, а код верстальщика - правками дизайнера, и так далее.
Возникает необходимость в разграничении работы. Так, например, дизайнер будет делать свою работу, верстальщик свою, программист свою, и при этом никто друг другу мешать не будет. В итоге каждому участнику проекта достаточно будет знать только те данные, с которыми ему придется работать. В таком случае производительность группы и качество проекта повышается в разы. В настоящее время эта проблема с успехом решается путем использования шаблонов, однако это тоже создает определенные трудности, так как чтобы, скажем, подключить Smarty, необходимо подключить программный модуль обработки шаблонов, и четко связать со структурой проекта. А это далеко не всегда возможно и требует определенных затрат. Немного проще при использовании связки XML + XSL, так как они предоставляют больше возможностей, однако это альтернатива, не более. А что если посмотреть в сторону чего-то радикально нового, что позволяло бы объединить все лучше, используя возможности того, что есть? Попробуйте представить JavaScript, который обладает всем возможностями PHP или Perl, включая работу с графикой и базами данных, который имеет гораздо более удобную расширяемость и практичность, и к тому же кросс-платформен.
Так что же такое AJAX? Впервые об Ajax заговорили после появления в феврале 2005-го года статьи Джесси Джеймса Гарретта (Jesse James Garrett) "Новый подход к веб-приложениям" . Ajax - это не самостоятельная технология. Это идея, которая базируется на двух основных принципах.
Использование DHTML для динамичного изменения содержания страницы.
Использование XMLHttpRequest для обращения к серверу "на лету".
Использование этих двух подходов позволяет создавать намного более удобные WEB-интерфейсы пользователя на тех страницах сайтов, где необходимо активное взаимодействие с пользователем. Использование Ajax стало наиболее популярно после того, как компания Google начала активно использовать его при создании своих сайтов, таких как Gmail, Google maps и Google suggest. Создание этих сайтов подтвердило эффективность использования данного подхода.
Итак подробнее: если взять классическую модель WEB-приложения:
Клиент, набирая в строке поиска адрес интересующего его ресурса, попадая на сервер, делает к нему запрос. Сервер производит вычисления в соответствии с запросом, обращается к базе данных и так далее, после чего полученные данные идут клиенту и, в случае необходимости подставляются в шаблоны и обрабатываются браузером. Результатом является страница, которую мы видим, и которую 80% населения страны находящейся в WEB называют Интернетом. Это классическая модель, которая успела себя зарекомендовать и заслужить себе почетное место под солнцем. Это самая простая модель взаимодействия и, как следствие, самая распространенная. Однако ее все чаще становиться недостаточно. Представьте себе, on-line игру "Морской бой", в которую играют два закоренелых друга - житель ЮАР и житель Японии. Как с помощью такой модели сделать их игру максимально приятной? В любом случае данные потопленных кораблей будут хранится на сервере, и что бы проверить не походил ли оппонент, необходим будет каждый раз обновлять страницу и подгущать устаревшие данные. "Но ведь люди придумали кэширование" - скажете вы и будете абсолютно правы, но легче от этого не становиться. Кэширование всего лишь ускорит время взаимодействия с сервером, но не избавит от необходимости перезагружать страницу. Как вариант можно поставить определенное время самообновления, но и в этом случае страница будет перезагружаться полностью.
Теперь посмотрим на модель взаимодействия AJAX:
Последовательность действий клиента сохраняется и он, скорее всего не поймет того, что будет происходить, а слово AJAX будет ассоциироваться только с названием футбольного клуба. Но на стороне сервера все выглядит иначе.
При обращении к серверу, генерируется страница, которая будет отображаться пользователю, и предлагать ему совершить интересующую его последовательность действий. При сознательном (хотя и не обязательно) выборе клиента, его запрос будет обращаться к AJAX модулю, который и будет производить все интересующие его вычисления и работу с сервером как таковым. Но в чем же новшество? Основное отличие в том что этот метод дает нам возможность динамически обращаться к серверу и выполнять интересующие нас действия. Например, нам нужно выполнить обращение к базе данных и получить интересующие нас данные которые затем будем использовать. Данные мы будем хранить в XML файле который будет формироваться динамически, таким образом:
Создаем новый объект JavaScript:
Var req = new ActiveXObject("Microsoft.XMLHTTP"); (для IE) var req = new XMLHttpRequest(); (Для всего остального)
Затем пишем функцию использующий этот объект
Var req; function loadXMLDoc(url) { // branch for native XMLHttpRequest object if (window.XMLHttpRequest) { req = new XMLHttpRequest(); req.onreadystatechange = processReqChange; req.open("GET", url, true); req.send(null); // branch for IE/Windows ActiveX version } else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); if (req) { req.onreadystatechange = processReqChange; req.open("GET", url, true); req.send(); } } }
Теле HTML файла пишем скрипт, который будет:
Function checkName(input, response) { if (response != ""){ // Response mode message = document.getElementById("nameCheckFailed"); if (response == "1"){ message.className = "error"; }else{ message.className = "hidden"; } }else{ // Input mode url = "http://localhost/xml/checkUserName.php?q=" \\ + input; loadXMLDoc(url); } }
В файле localhost/xml/checkUserName.php мы обрабатываем данные, полученные из командной строки в данном случае в переменной q. А результат сохраняем в XML структуре, которую храним в этом же файле. Так мы можем получить и обработать данные, полученные из БД, или что-нибудь другое необходимое нам. К тому же сервер будет обрабатывать только те данные, которые нам необходимо обновить, а не всю страницу в случае ее перезагрузки.
Теперь вернемся к двум друзьям - любителям морского боя: ввиду появления данного новшества, мы можем сделать следующее: поставить проверку в течении каждых трех секунд XML файла данная проверка подразумевает под собой проверку базы данных на предмет новой записи, то есть - сделанного оппонентом хода. Если ход был сделан, страница без перезагрузки топит корабли, тем самым, портя настроение участникам водных баталий. Данная функциональность достигается элементарным использованием Javascript и таблиц стилей. Этот пример достаточно наглядный, однако далеко не полный, применение данной технологии гораздо существенней.
Однако не все так просто. Давайте теперь рассмотрим отрицательные черты.
Во-первых - мы можем передавать данные только методом GET, соответственно большие объемы данных придется оставить в покое. Данная проблема уже не раз поднималась в разных источниках, но господа, есть ведь Сookies, которые вполне приемлемы в случаях передачи больших данных, чем может вместить в себя GET запрос, а Javascript в свою очередь имеет функции для работы с ними.
Вторая проблема - кросс-браузерность. Объект XMLHttpRequest еще не является частью какого-либо стандарта (хотя нечто подобное уже было предложено в спецификации W3C DOM Level 3 Load and Save). Поэтому существует два отличных друг от друга метода вызова этого объекта в коде скрипта. В Internet Explorer объект ActiveX вызывается так:
Var req = new ActiveXObject("Microsoft.XMLHTTP");
В Mozilla и Safari это делается проще (так как там это объект, встроенный в JavaScript):
Var req = new XMLHttpRequest();
Все современные браузеры поддерживают данный объект и проблемы возникнут только у 1,8% пользователей (согласно данными статистики компании SpyLog), которые пользуются очень старыми версиями браузеров, не поддерживающими этот объект.
И, наконец, защищенность. На этом остановимся поподробнее. Основная проблема заключается в том, что все данные и исходный код JavaScript функций можно увидеть путем просмотра исходного кода страницы, соответственно злоумышленник может проследить логику выполнения запросов и при определенном стечении обстоятельств выполнить необходимый ему набор команд. Это не играет особой роли, когда у нас идет простое сопоставление данных, но что делать в более сложных ситуациях, например при авторизации, и как в таком случае передавать пароли. Как уже было сказано выше, на помощь приходят Cookies. Необходимые данные можно пересылать с их помощью, так же их и обрабатывать. Возьмем пример, в котором пользователь будет проходить аутентификацию с помощью технологии которой посвящена статья.
Генерации страницы, мы формируем уникальные значения, которые затем помещаем в переменные сервера. И в Cookies браузера, затем при авторизации мы получаем имя пользователя и его пароль, которые нам необходимо передать модулю обработки на сервере.
После того как пользователь ввел данные и нажал кнопку Submit его пароль заноситься в Cookies, а имя пользователя передается открыто - ссылкой например http://www.mubestajax.com/ajax.php?login=pupkin при получении данных сервер, в первую очередь проводит сверку полученных данных. Так как значения которые мы генерировали с начала работы сервера а затем передавали их глобальным переменным сервера и cookies должны совпадать, то при проверке целостности переданных данных в случае несовпадения программа перестает работать. Если же все прошло хорошо, то извлекаются все необходимые данные и проводятся необходимые вычисления и работы. Такой способ защиты достаточно прост и эффективен. Но для больших проектов он не подойдет.
Когда на первый план выходит безопасность, лучше использовать более сложные и надежные решения. Но в большинстве случаев данных мер предосторожности будет более чем достаточно, так как использование более сложных модулей влечет за собой использование технологий которые не всегда входят в состав стандартного программного обеспечения современных серверов, основная черта которых - простота. Именно по этому такие технологии как MySQL и PHP получили очень широкое распространение, т.к. они обеспечивают простоту работы при своей небольшой ресурсоемкости и достаточной надежности. А к рамках данного программного обеспечения как нельзя лучше подойдет решение предложенное выше.
В заключении хотелось бы сказать, что AJAX с одной стороны - огромный скачок в WEB инженерии, но с другой стороны это давно назревавший этап эволюции, который открыл новые горизонты в сфере разработки программного обеспечения. В тоже время эта технология еще довольно "сыра" так как ее использование на данный момент скорее приятное исключение. Но я уверен, что о ней еще не раз все услышат.
Сейчас в сети Интернет наблюдается очень активное развитие (и даже использование) новых технологий. Одна из таких технологий — AJAX.
Что такое AJAX?AJAX — это аббревиатура, которая означает Asynchronous Javascript and XML. На самом деле, AJAX не является новой технологией, так как и Javascript, и XML существуют уже довольно продолжительное время, а AJAX — это синтез обозначенных технологий. AJAX чаще всего ассоцириуется с термином Web 2.0 и преподносится как новейшее Web-приложение.
При использовании AJAX нет необходимости обновлять каждый раз всю страницу, так как обновляется только ее конкретная часть. Это намного удобнее, так как не приходится долго ждать, и экономичнее, так как не все обладают безлимитным интернетом. Правда в этом случае, разработчику необходимо следить, чтобы пользователь был в курсе того, что происходит на странице. Это можно реализовать с использованием индикаторов загрузки, текстовых сообщений о том, что идёт обмен данными с сервером. Необходимо также понимать, что не все браузеры поддерживают AJAX (старые версии браузеров и текстовые браузеры). Плюс Javascript может быть отключен пользователем. Поэтому, не следует злоупотреблять использованием технологии и прибегать к альтернативным методам представления информации на Web-сайте.
Обобщим достоинства AJAX:
- Возможность создания удобного Web-интерфейса
- Активное взаимодействие с пользователем
- Удобство использования
AJAX использует два метода работы с веб-страницей: изменение Web-страницы не перезагружая её, и динамическое обращение к серверу. Второе может осуществляться несколькими способами, в частности, XMLHttpRequest, о чем мы и будем говорить, и использование техники скрытого фрейма.
Обмен даннымиДля того, чтобы осуществлять обмен данными, на странице должен быть создан объект XMLHttpRequest, который является своеобразным посредником между Браузером пользователя и сервером (рис. 1). С помощью XMLHttpRequest можно отправить запрос на сервер, а также получить ответ в виде различного рода данных.
Обмениваться данными с сервером можно двумя способами. Первый способ — это GET-запрос. В этом запросе вы обращаетесь к документу на сервере, передавая ему аргументы через сам URL. При этом на стороне клиента будет логично использовать функция Javascript`а escape для того, чтобы некоторые данные не прервали запрос.
Клиент часть, написанная на Javascript, должна обеспечивать необходимую функциональность для безопасного обмена с сервером и предоставлять методы для обмена данными любым из вышеперечисленных способов. Серверная часть должна обрабатывать входные данные, и на основе их генерировать новую информацию (например, работая с базой данных), и отдавать ее обратно клиенту. Например, для запроса информации с сервера можно использовать обычный GET-запрос с передачей нескольких и небольших по размеру параметров, а для обновления информации, или добавления новой информации потребуется использовать уже POST-запрос, так как он позволяет передавать большие объемы данных.
Как уже было сказано, AJAX использует асинхронную передачу данных. Это значит, что пока идёт передача данных, пользователь может совершать другие, необходимые ему действия. В это время следует оповестить пользователя о том, что идёт какой-либо обмен данными, иначе пользователь подумает, что произошло что-то не то и может покинуть сайт, или повторно вызвать «зависшую», по его мнению, функцию. Индикация во время обмена данными в приложении Web 2.0 играет очень важную роль: посетители могли еще не привыкнуть к таким способам обновления страницы.
Ответ от сервера может быть не только XML, как следует из названия технологии. Помимо XML, можно получить ответ в виде обычного текста, или же JSON (Javascript Object Notation). Если ответ был получен простым текстом, то его можно сразу вывести в контейнер на странице. При получении ответа в виде XML, обычно происходит обработка полученного XML документа на стороне клиента и преобразование данных к (X)HTML. При получении ответа в формате JSON клиент должен лишь выполнить полученный код (функция Javascript`а eval) для получения полноценного объекта Javascript. Но здесь нужно быть осторожным и учитывать тот факт, что с использованием этой технологии может быть передан вредоносный код, поэтому перед выполнением полученного с сервера кода следует его тщательно проверить и обработать. Существует такая практика, как «холостой» запрос, при котором никакой ответ от сервера не приходит, лишь изменяются данные на стороне сервера.
В разных браузерах данный объект обладает разными свойствами, но в целом он совпадает.
Методы объекта XMLHttpRequestЗаметьте, что названия методов записаны в том же стиле (Camel-style), что и другие функции Javascript. Будьте внимательны при их использовании.
abort() — отмена текущего запроса к серверу.
getAllResponseHeaders() — получить все заголовки ответа от сервера.
getResponseHeader(«имя_заголовка») — получить указаный заголовок.
open(«тип_запроса»,»URL»,»асинхронный»,» имя_пользователя»,» пароль») — инициализация запроса к серверу, указание метода запроса. Тип запроса и URL — обязательные параметры. Третий аргумент — булево значение. Обычно всегда указывается true или не указывается вообще (по умолчанию — true). Четвертый и пятый аргументы используются для аутентификации (это очень небезопасно, хранить данные об аутентификации в скрипте, так как скрипт может посмотреть любой пользователь).
send(«содержимое») — послать HTTP запрос на сервер и получить ответ.
setRequestHeader(«имя_заголовка»,»значение») — установить значения заголовка запроса.
Свойства объекта XMLHttpRequestonreadystatechange — одно из самых главных свойств объекта XMLHttpRequest. С помощью этого свойства задаётся обработчик, который вызывается всякий раз при смене статуса объекта.
readyState — число, обозначающее статус объекта.
responseText — представление ответа сервера в виде обычного текста (строки).
responseXML — объект документа, совместимый с DOM, полученного от сервера.
status — состояние ответа от сервера.
statusText — текстовое представление состояния ответа от сервера.
Следует подробнее расммотреть свойство readyState:
- 0 — Объект не инициализирован.
- 1 — Объект загружает данные.
- 2 — Объект загрузил свои данные.
- 3 — Объек не полностью загружен, но может взаимодействовать с пользователем.
- 4 — Объект полностью инициализирован; получен ответ от сервера.
Именно опираясь на состояние готовности объекта можно представить посетителю информацию о том, на какой стадии находится процесс обмена данными с сервером и, возможно, оповестить его об этом визуально.
Создание объекта XMLHttpRequestКак уже говорилось выше, создание данного объекта для каждого типа браузера — уникальный процесс.
Например, для создания объекта в Gecko-совместимых браузерах, Konqueror`е и Safari, нужно использовать следующее выражение:
var Request = new XMLHttpRequest();
А для Internet Explorer`а используется следующее:
var Request = new ActiveXObject("Microsoft.XMLHTTP");
var Request = new ActiveXObject("Msxml2.XMLHTTP");
Теперь, чтобы добиться кроссбраузерности, необходимо сложить все функции в одну:
function CreateRequest() { var Request = false; if (window.XMLHttpRequest) { //Gecko-совместимые браузеры, Safari, Konqueror Request = new XMLHttpRequest(); } else if (window.ActiveXObject) { //Internet explorer try { Request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (CatchException) { Request = new ActiveXObject("Msxml2.XMLHTTP"); } } if (!Request) { alert("Невозможно создать XMLHttpRequest"); } return Request; }
После всего этого можно создавать данный объект и не беспокоится за работоспособность на популярных браузерах. Но создать объект можно в разных местах. Если создать его глобально, то в определенный момент времени возможен будет только один запрос к серверу. Можно создавать объект всякий раз, как происходит запрос к серверу (это почти полностью решит проблему).
Запрос к серверуАлгоритм запроса к серверу выглядит так:
- Проверка существования XMLHttpRequest.
- Инициализация соединения с сервером.
- Посылка запрса серверу.
- Обработка полученных данных.
Для создания запроса к серверу мы создадим небольшую функцию, которая будет по функциональности объединять в себе функции для GET и POST запросов.
/* Функция посылки запроса к файлу на сервере r_method - тип запроса: GET или POST r_path - путь к файлу r_args - аргументы вида a=1&b=2&c=3... r_handler - функция-обработчик ответа от сервера */ function SendRequest(r_method, r_path, r_args, r_handler) { //Создаём запрос var Request = CreateRequest(); //Проверяем существование запроса еще раз if (!Request) { return; } //Назначаем пользовательский обработчик Request.onreadystatechange = function() { //Если обмен данными завершен if (Request.readyState == 4) { //Передаем управление обработчику пользователя r_handler(Request); } } //Проверяем, если требуется сделать GET-запрос if (r_method.toLowerCase() == "get" && r_args.length > 0) r_path += "?" + r_args; //Инициализируем соединение Request.open(r_method, r_path, true); if (r_method.toLowerCase() == "post") { //Если это POST-запрос //Устанавливаем заголовок Request.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf-8"); //Посылаем запрос Request.send(r_args); } else { //Если это GET-запрос //Посылаем нуль-запрос Request.send(null); } }
Создавать запрос стало намного проще. Для примера напишем функцию, которая будет получать содержимое файла на сервере и выводить его в контейнер.
function ReadFile(filename, container) { //Создаем функцию обработчик var Handler = function(Request) { document.getElementById(container).innerHTML = Request.responseText; } //Отправляем запрос SendRequest("GET",filename,"",Handler); }
Именно таким образом происходит взаимодействие с сервером.
Обработка ответаВ предыдущем примере мы сделали функцию запроса к серверу. Но она, по сути, небезопасна, так как мы не обрабатываем состояния объекта и состояния ответа от сервера.
Дополним наш код, чтобы он смог выводить визуальное оповещение о процессе загрузки.
Request.onreadystatechange = function() { //Если обмен данными завершен if (Request.readyState == 4) { //Передаем управление обработчику пользователя r_handler(Request); } else { //Оповещаем пользователя о загрузке } } ...
Как вы уже знаете, объект XMLHttpRequest позволяет узнать статус ответа от сервера. Воспользуемся этой возможностью.
Request.onreadystatechange = function() { //Если обмен данными завершен if (Request.readyState == 4) { if (Request.status == 200) { //Передаем управление обработчику пользователя r_handler(Request); } else { //Оповещаем пользователя о произошедшей ошибке } } else { //Оповещаем пользователя о загрузке } } ...
Варианты ответа от сервераОт сервера можно получить данные нескольких видов:
Если вы получаете обычный текст, то вы можете сразу же направить его в контейнер, то есть на вывод. При получении данных в виде XML вы должны обработать данные с помощью DOM-функций, и представить результат с помощью HTML.
JSON — это объектная нотация Javascript. С ее помощью можно представить объект в виде строки (здесь можно привести аналогию с функцией сериализации). При получении JSON-данных вы должны выполнить их, чтобы получить полноценный объект Javascript и произвести с ним необходимые операции. Помните, что такая передача данных и выполнение их не являются безопасными. Вы должны следить за тем, что поступает на исполнение.
Сейчас можно наблюдать, что в интернете приобретает популярность использование и применение новых технологий. Одна их них - это AJAX. Что это такое? Какими характеристиками она обладает? Где применяется? На все эти вопросы можно будет найти ответ в рамках данной статьи.
Общая информацияКак расшифровывается AJAX? Что это значит? Данное сокращение является аббревиатурой. Она расшифровывается как Asynchronous Javascript and XML ("Асинхронный Яваскрипт и ИКСМЛ"). Часто можно увидеть или услышать информацию, что это новая технология. Но это не совсем так. Дело в том, что Javascript и XML существуют уже довольно длительное время, тогда как "Аякс" является синтезом этих технологий. Чаще всего он используется вместе с термином Web 2.0 и подразумевается как использование передовых методов разработки.
А чем особенность?Итак, мы уже имеем общее представление о том, чем является AJAX. Что это даёт нам на практике? Почему ведутся активные разговоры о его применении? Особенность данной технологии - в том, что при её использовании не нужно обновлять всю страницу при первой же потребности. Ведь можно запросить новые данные только для её части. Это и удобно (ведь меньше времени приходится ждать), и экономично (для тех, у кого не безлимитный интернет). Правда, для информирования пользователя о происходящем обновлении желательно использовать хотя бы индикатор загрузки или текстовые сообщения, которые проинформируют про новые данные с сервера. В качестве минусов технологии часто упоминают тот факт, что она не поддерживается устаревшими и текстовыми браузерами. Да и возможность отключения технологии Javascript есть у пользователя, чем многие и пользуются. Поэтому не следует злоупотреблять AJAX. Что это может дать, если не предусмотреть альтернативные методы представления информации? В лучшем случае информация просто не будет отображена на сайте. В худшем - его внешний вид так пострадает, что пользователь на него больше не вернётся.
Преимущества "Аякса"
Данная технология предлагает два метода, по которым может быть реализована веб-страница. Первый предусматривает внесение изменений без перезагрузки. Это может быть осуществлено с помощью динамических обращений к серверу. Второй предусматривает использование отдельных технологий, наиболее популярной из которых является XMLHttpRequest. Относительно самих преимуществ "Аякса" можно сказать следующее:
Вот, допустим, нужна форма обратной связи, с помощью которой можно будет проконсультировать клиентов. Как её можно сделать? Для начала необходимо позаботится о «носителе» информации. Для этого необходимо создать объект XMLHttpRequest. Он выступает в роли посредника между сервером и браузером пользователя. С помощью этого объекта будут отправляться запросы, а также получаться ответы на них. Для непосредственного обмена данными нам нужен AJAX PHP. Этот инструментарий может быть реализован с помощью GET- или POST-запросов. В таком случае необходимые аргументы будут передаваться непосредственно через URL. Одновременно будет запущена функция, следящая за тем, чтобы передача данных не прерывалась. Но какой AJAX-запрос реализовать? Рекомендуют использовать POST. Благодаря ему можно передавать неограниченное количество данных, к которым, к тому же значительно сложней получить доступ.
Принцип работы
Как же функционирует асинхронный Javascript и XML на практике? Давайте разберёмся с этим на примере. Относительно структуры постройки необходимо позаботиться о том, чтобы клиентская часть обеспечивала весь нужный функционал для безопасного обмена данными. Она должна предоставлять необходимые методы для передачи информации выбранными способами. Серверная же часть должна обеспечивать обработку полученных данных, и, уже основываясь на них, генерировать новую информацию, чтобы в последующем передать её к клиенту. Самым распространённым взаимодействием данного типа является работа с базой данных. Ранее мы уже упомянули такой элемент многих бизнес-сайтов, как форма обратной связи. Преимуществом "Аякса" в данном случае будет то, что он проводит асинхронную передачу данных. Иными словами, пока информация пересылается, пользователь может совершать все необходимые ему действия. Ориентируясь на специфику каждого конкретного случая, необходимо решить, нужно ли об этом процессе информировать посетителя сайта. Относительно той же формы обратной связи следует сказать, что в данном случае можно написать «оператор набирает ответ», или нечто подобное.
Ответ сервераОн может приходить не только благодаря XML, как это можно подумать из-за названия технологии. Кроме этого, он может передаваться как обычный текст или JSON. В первом случае полученную информацию можно сразу же выводить на страницу. Если же используется XML, то необходимо позаботиться о том, чтобы AJAX-файл был должным образом обработан в браузере клиента. Все данные в этом случае преобразовываются к (X)HTML. Когда же используется необходимо выполнить полученный код, чтобы получить полноценный При этом необходимо проявить осторожность и учитывать тот факт, что многие злоумышленники любят передавать посредством этой технологии вредоносный код. Поэтому необходимо предусмотреть процедуру проверки полученных данных перед их обработкой. Особенности реализации для разных браузеров могут немного разниться, но, в целом, схема действия тут одна.
Делаем запрос к серверу и обработку ответа
Вся последовательность действий будет выглядеть следующим образом:
Следует рассказать о некоторых особенностях относительно создания объекта. Он может быть инициирован в любом месте, где это только возможно в рамках языка программирования. Но если ему присвоить статус глобального, то в какой-то один момент времени для него будет возможной только работа с одним запросом. Этому моменту необходимо уделить пристальное внимание. Относительно обработки - здесь ориентируемся по выбранному инструменту. Так, при XML данные необходимо обработать DOM-функциями и представить пользователю уже конечный результат в HTML. А что же делать с JSON-ном? Следует понимать, что он является объектной нотацией Javascript. Что это значит? Благодаря JSON можно представлять объект как строку. Но при этом необходимо помнить, что данный способ не является безопасным в полной мере, и необходимо будет учитывать кучу факторов. Но, в целом, он является весьма легким.
Серверные языки программированияПрактически любое веб-приложение использует их в той или иной мере. Для передачи данных наиболее популярным является PHP. На нём обычно пишут файлы для сайтов, где не является критически важным скорость передачи информации, а отдается предпочтение балансу между нею и надёжностью. Методы передачи XMLHttpRequest рассматривались выше.
Настраиваем сервер
Какие программы необходимы для того, чтобы полноценно работал AJAX? Что это нам даст? Для чего они нужны? Чтобы получить ответы на эти вопросы, следует ознакомиться со следующим списком:
Итак, сейчас у нас есть и теоретические знания, и представления о том, как работает AJAX. Отправка данных сейчас требует только определённой практики. Давайте же в целом посмотрим, как можно подходить к реализации поставленной задачи с использованием "Аякса". Итак, нам необходимо создать базу данных драйверов. Причем разниться они будут по устройствам, на которых могут работать. Следует отметить, что рассматриваемая база данных очень большая, поэтому просто пересылать её клиенту и уже ему предлагать делать выборку с помощью JavaScript нет смысла. Также нежелательно, чтобы сама веб-страница перезагружалась из-за одного параметра. На сервере запросы будут обрабатывать специальные скрипты РНР. БД реализована в виде XML-файла.
О базе данных
Необходимо проработать её структуру. А что делать, если передаются параметры, которые являются объектами? В таком случае необходимо предусмотреть создание переменной, где будет находиться ссылка не него, на случай вызова со стороны функции. Для возможности обращения к ней из любого места кода её нужно сделать глобальной. Для удобства желательно использовать Конечно, это не обязательно. Но всё же использование СУБД позволит работать с данными более удобно и эффективно.
Прорабатываем работу движкаКак же всё будет происходить? Итак, наступает определённое событие, которое будет вызывать особенную функцию. Она подготовит GET или POST-данные, которые будут пересылаться. Затем вызывается функция, которая сделает обращение к URL серверного скрипта. В ней необходимо предусмотреть создание XMLHttpRequest-объекта. Ссылку на него следует хранить в переменной. После того как данные были отправлены серверу, необходимо ждать от него ответа. Для этого можно включить «прослушку» до получения информации (если известно, что придёт и когда) или предусмотреть функцию, которая будет всегда готова принять данные. Первый вариант менее надёжен в случае возникновения внештатной ситуации. Вторая же реализация - более затратная с точки зрения ресурсов. Хотя, если это делается только относительно одной переменной, на быстром интернете это не скажется. Но если их сотни и тысячи, и они будут иметь большой размер, - тогда это будет другое дело. Поэтому необходимо искать баланс между пользованием имеющимися ресурсами и результативностью. Ведь следует понимать, что не все обладают оперативной памятью на 16 Гб. Для этого может устанавливаться определённое время ожидания, после которого подставляются предыдущие данные или информация о том, что сервер недоступен в данный момент времени.
Особенности
Когда с помощью "Аякса" создаётся интерфейс для страницы или приложения, то необходимо позаботиться о том, чтобы полученный результат хорошо работал как на разных операционных системах, так и на различных браузерах. В первом случае неоценимую помощь смогут оказать эмуляторы. Во втором случае достаточно будет просто установить различные программы и на них проверить работоспособность кода. Также необходимо предусмотреть определённые действия и на случай, если используемые пользователем браузеры будут устаревшими или он отключит необходимые настройки. В таких случаях следует позаботиться о выводе на страницу текста, в котором указана причина того, почему просмотр сайта в данном случае не является возможным. Да, сейчас подавляющее большинство людей использует современную технику, но не стоит полностью выпускать из внимания вероятность и того, что несколько процентов посетителей будут использовать несколько устаревшее программное обеспечение. А в масштабах бизнеса это может иметь значительные последствия.
ЗаключениеВот и подходит к логическому окончанию эта статья. Если говорить про "Аякс" в целом, то этот инструмент позволяет создавать очень привлекательные и многофункциональные сайты, которые быстро работают и при грамотной верстке доставляют своим пользователям одно удовольствие. Можно не сомневаться, что в будущем появятся ещё более совершенные технологии, но пока будем использовать то, что у нас есть. По мере усовершенствования языков программирования и их методов вполне возможным является и такой вариант, что станут доступными способы реализации, которые позволят создавать ещё более качественный продукт. Но как бы там ни было, работать нужно сейчас с тем, что есть. И имя этому - "Аякс".
AJAX: С чего начать
В этой статье рассмотрены основные принципы работы AJAX и даны два простых примера, использующих эту технологию.
1 Что такое AJAX?
2 Шаг 1 - Как послать HTTP запрос
3 Шаг 2 - Обрабатываем HTTP ответ
4 Шаг 3 - Простой пример
5 Шаг 4 - Работа с XML ответом
Что такое AJAX?
Ajax означает Асинхронный JavaScript и XML. В основе технологии лежит использование нестандартного объекта XMLHttpRequest(), необходимого для взаимодействия со скриптами на стороне сервера. Объект может как отправлять, так и получать информацию в различных форматах включая XML, HTML и даже текстовые файлы. Самое привлекательное в Ajax - это его асинхронный принцип работы. С помощью этой технологии можно осуществлять взаимодействие с сервером без необходимости перезагрузки страницы. Это позволяет обновлять содержимое страницы частично, в зависимости от действий пользователя.
Две особенности, которые мы рассмотрим:
* Отправление запросов серверу без перезагрузки страницы
* Работа с XML документами
Шаг 1 - Как послать HTTP запрос
Для того, чтобы послать HTTP запрос на сервер используя JavaScript, вам необходим экземпляр класса, который позволит это сделать. Такой класс впервые был введен в Internet Explorer как объект ActiveX, называемый XMLHTTP. Позже в Mozilla, Safari и другие броузеры был введен класс XMLHttpRequest, который поддерживал методы и свойства изначального объекта ActiveX от Microsoft.
В результате, чтобы создать кросс-броузерный объект требуемого класса, вы можете сделать следующее:
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
}
(В целях наглядности код выше является немного упрощенным. Более жизненный пример будет рассмотрен в шаге 3 этой статьи)
Некоторые версии некоторых броузеров Mozilla не будут корректно работать, если ответ сервера не содержит заголовка XML mime-type. Чтобы решить эту проблему вы можете использовать вызовы дополнительных методов для переопределения заголовка полученного от сервера, если он отличен от text/xml.
http_request = new XMLHttpRequest();
Далее вам необходимо решить, что вы будете делать после получения ответа сервера. На этом этапе вам необходимо указать объекту, какая JavaScript функция будет обрабатывать ответ. Это делается путем присваивания свойству onreadystatechange имени JavaScript функции, которую вы собираетесь использовать:
Заметьте, что после названия функции нет скобок и не указано параметров, потому что вы просто присваиваете ссылку на функцию, а не вызываете ее. К тому же, вместо указания имени функции, вы можете использовать возможность JavaScript объявлять функции на лету (так называемые «анонимные функции») и указывать действия, которые тотчас же будут обрабатывать ответ:
http_request.onreadystatechange = function(){
// какой-нибудь код
};
http_request.open("GET", "http://www.example.org/some.file", true);
http_request.send(null);
* Первый параметр вызова функции open() - метод запроса HTTP (GET, POST, HEAD или любой другой метод, который вы хотите использовать). Используйте методы в соответствии с HTTP стандартами; иначе некоторые броузеры (такие как Firefox) могут не обработать запрос. Информация о допустимых HTTP запросах доступна по адресу спецификации W3C
* Второй параметр - URL запрашиваемой страницы. Из соображений безопасности вы не можете запрашивать страницы сторонних доменов. Убедитесь, что вы используете одинаковое доменное имя на всех страницах, иначе вы получите ошибку "доступ запрещен" при вызове функции open(). Типичной ошибкой при доступе к сайту через site.ru является подача запросов на www.site.ru.
* Третий параметр указывает, является ли запрос асинхронным. Если он TRUE, то выполнение JavaScript продолжится во время ожидания ответа сервера. В этом и заключается асинхронность технологии.
Параметром метода send() могут быть любые данные, которые вы хотите послать на сервер. Данные должны быть сформированы в строку запроса:
name=value&anothername=othervalue&so=on
Заметьте, что если вы хотите отправить данные методом POST, вы должны изменить MIME-тип запроса с помощью следующей строки:
http_request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
Иначе сервер проигнорирует данные отправленные методом POST.
Шаг 2 - Обрабатываем HTTP ответ
Отправляя запрос, вы указали имя функции JavaScript, обрабатывающей ответ.
http_request.onreadystatechange = nameOfTheFunction;
Давайте посмотрим, что эта функция должна делать. Во-первых, функция должна проверять статус запроса. Если значение переменной статуса 4, то это означает, что ответ от сервера получен и его можно обрабатывать.
if (http_request.readyState == 4) {
// все в порядке, ответ получен
} else {
// все еще не готово
}
Полный список значений кодов readyState такой:
* 0 (uninitialized)
* 1 (loading)
* 2 (loaded)
* 3 (interactive)
* 4 (complete)
Следующее, что нужно проверить - это статус HTTP-ответа. Все возможные коды можно посмотреть на сайте W3C . Для наших целей нам интересен только код ответа 200 OK.
if (http_request.status == 200) {
// великолепно!
} else {
// с запросом возникли проблемы,
// например, ответ может быть 404 (Не найдено)
// или 500 (Внутренняя ошибка сервера)
}
Теперь, после проверки состояния запроса и статуса HTTP-ответа, вы можете делать с данными, полученными от сервера, все что угодно. Есть два способа получить доступ к данным:
* http_request.responseText – возвращает ответ сервера в виде строки текста.
* http_request.responseXML – возвращает ответ сервера в виде объекта XMLDocument, который вы можете обходить используя функции JavaScript DOM
Шаг 3 - Простой пример
Давайте соберем все вместе и сделаем простой пример HTTP-запроса. Наш JavaScript запросит HTML документ test.html, который содержит текст "I"m a test." и выведет содержимое файла в диалоговом окне.
function makeRequest(url) {
var http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType("text/xml");
// Читайте ниже об этой строке
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert("Не вышло:(Невозможно создать экземпляр класса XMLHTTP ");
return false;
}
http_request.onreadystatechange = function() { alertContents(http_request); };
http_request.open("GET", url, true);
http_request.send(null);
}
function alertContents(http_request) {
} else {
}
}
}
Сделать запрос
В этом примере:
* Пользователь нажимает на ссылку "Сделать запрос" в броузере;
* Это вызывает функцию makeRequest() с параметром test.html - именем HTML файла;
* Посылается запрос, после чего (onreadystatechange) выполнение передается alertContents();
* alertContents() проверяет получен ли ответ и все ли с ним в порядке, после чего содержимое файла test.html выводится в диалоговом окне.
Вы можете попробовать пример в действии , а сам тестовый файл можно посмотреть .
Замечание: Строка http_request.overrideMimeType("text/xml"); вызовет ошибки в консоли JavaScript в Firefox 1.5 или более позднем, как описано в https://bugzilla.mozilla.org/show_bug.cgi?id=311724 , если страница вызванная с помощью XMLHttpRequest не является правильным XML (например, если это обычный текст). На самом деле это корректное поведение.
Замечание 2: Если вы посылаете запрос не на статический XML-файл, а на серверный скрипт, возвращающий XML, то нужно установить некоторые заголовки ответа, если вы планируете сделать вашу страницу работоспособной в Internet Explorer помимо Mozilla. Если вы не установите заголовок Content-Type: application/xml, IE будет сообщать об ошибке JavaScript, "Object Expected", после строки, где вы пытаетесь получить доступ к XML элементу. Если вы не установите заголовок Cache-Control: no-cache броузер будет кэшировать ответ и никогда не будет повторно отправлять запрос, что сделает отладку весьма «забавной».
Замечание 3: Если переменная http_request используется глобально, то конкурирующие функции, вызывающие makeRequest() могут конкурировать друг с другом, вызывая состязания. Объявление переменной http_request локально в функции и передача ее в alertContent() предотвращает состязания.
Замечание 4: При привязывании функции обратного вызова к onreadystatechange нельзя указывать аргументов. По этой причине не работает следующий код:
http_request.onreadystatechange = alertContents(http_request); // (не работает)
Таким образом, для успешной регистрации функции, вы должны передать ей аргументы косвенно через анонимную функцию или используя http_request как глобальную переменную. Вот пример:
http_request.onreadystatechange = function() { alertContents(http_request); }; //1 (одновременный запрос)
http_request.onreadystatechange = alertContents; //2 (глобальная переменная)
Первый способ позволяет делать несколько запросов одновременно, а второй используется, когда переменная http_request является глобальной.
Замечание 5: В случае ошибки взаимодействия (например, если сервер упал), при попытке доступа к переменной.status метода onreadystatechange будет сгенерировано исключение. Убедитесь, что if...then заключено в try...catch. (См. https://bugzilla.mozilla.org/show_bug.cgi?id=238559).
function alertContents(http_request) {
try {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
alert(http_request.responseText);
} else {
alert("С запросом возникла проблема.");
}
}
}
catch(e) {
alert("Произошло исключение: " + e.description);
}
}
Шаг 4 - Работа с XML ответом
В предыдущем примере, после того как был получен ответ на HTTP-запрос мы использовали responseText запрашиваемого объекта, который содержал данные файла test.html. Теперь давайте попробуем использовать свойство responseXML.
Прежде всего, давайте создадим правильный XML документ, который мы будем запрашивать. Документ (test.xml) содержит следующее:
< ?xml version="1.0" ?>
I"m a test.
В скрипте нам всего лишь необходимо заменить строку запроса на:
...
onclick="makeRequest("test.xml")">
...
var xmldoc = http_request.responseXML;
var root_node = xmldoc.getElementsByTagName("root").item(0);
alert(root_node.firstChild.data);
Чтобы узнать больше о методах DOM, посмотрите
