AJAX в действии. Пример использрвания AJAX
AJAX в действии. Пример использрвания AJAX
|
AJAX — это модное название для набора техник разработки веб-интерфейсов, позволяющих делать динамические запросы к серверу без видимой перезагрузки веб-страницы: пользователь не замечает, когда его браузер запрашивает данные. |
AJAX обеспечивает динамичность и асинхронность web-разработок при отсутствии необходимости обновления страниц. Наша статья познакомит вас с возможностями нововведений в web-разработках за счет комбинаций технологий, уже давно знакомых и любимых.
Пожалуй, любой разработчик мечтает о том, чтобы превратить обычную, неновую web-страничку во что-то более захватывающее. Сейчас можно попробовать вдохнуть немного жизни в web-технологии десятилетней давности. Если у вас появилась необходимость освежить, обогатить и сделать более интерактивными свои творения, познакомьтесь с AJAX.
При использовании Google или web-клиента Gmail вам уже приходилось сталкиваться с решением, основанном на AJAX. Это технология-конгломерат, которая обеспечивает динамическое и асинхронное поведение, где исключается обновление страниц. Посредством AJAX пользователь может взаимодействовать с web-страницами, подобно работе с клиентами с более богатыми возможностями.
В настоящее время многие говорят о AJAX. Технология, следующая за AJAX, вряд ли является новшеством, однако недавно стали появляться некоторые мощные новые приложения, использующие объект XMLHttpRequest, они вдохнули новую жизнь в концепцию обновления образа клиентской части.
Самым примечательным из этих новых приложений является Google Maps. Пользуясь им, можно находить определенную местность на карте планеты, затем переходить к более мелким объектам, прокручивать перетягивать карту без необходимости обновления страницы.
AJAX — это коллекция технологий, существующих с момента появления Web. А вот и возможности, предоставляемые AJAX (как это представил Джис Джеймс Гаррет (Jesse James Garrett), он первым ввел термин 'AJAX' для асинхронного JavaScript + XML):
Вкратце AJAX позволяет писать быстрореагирующие веб-приложения, в которых не нужно постоянно обновлять страницы. AJAX — простая технология, поддерживаемая всеми основными браузерами. Как можно вкратце отметить, единственным предварительным условием для внедрения AJAX является знание JavaScript.
Как работает AJAX
Если вы когда-либо пользовались веб-клиентом Gmail или Google Maps, то замечали возможность проверки правописания и прокрутки по всему изображению, соответственно, без обновления страниц. AJAX — это технология, которая обрабатывает операции в JavaScript и асинхронно запускает на стороне сервера операции, предоставляющие желаемый результат.В основе технологии AJAX лежит объект XMLHttpRequest. Изначально он появился в Internet Explorer, а затем — в Mozilla/Safari. На момент написания этой статьи уже была поставлена 8-я совместимая версия Opera. Однако, Opera в свое время отличилась нестабильностью с точки зрения реализации XMLHttpRequest.
Вызов AJAX
Ключевым моментом нашего примера является вызов AJAX. Обратите внимание на то, что для различных браузеров требуются разные методы реализации для объекта XMLHttpRequest:
<script>
function getHTTPRequestObject() {
var xmlHttpRequest;
/*@cc_on
@if (@_jscript_version >= 5)
try {
xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (exception1) {
try {
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (exception2) {
xmlHttpRequest = false;
}
}
@else
xmlhttpRequest = false;
@end @*/
if (!xmlHttpRequest && typeof XMLHttpRequest != 'undefined') {
try {
xmlHttpRequest = new XMLHttpRequest();
} catch (exception) {
xmlHttpRequest = false;
}
}
return xmlHttpRequest;
}
var httpRequester = getHTTPRequestObject(); /* Когда страница
загрузилась, создаем xml http объект */
</script>
В данном коде используются аннотации Internet Explorer для реализации объекта AJAX. Другие браузеры, выполняющие данный сценарий, будут просто игнорировать разделы с аннотациями к функции getHTTPRequestObject(). Помните о том, что ваш браузер должен поддерживать JavaScript v1.5 и более поздние версии.
Асинхронная загрузка данных
Теперь мы выполним асинхронную активизацию веб-ресурсов. Ниже представлены действия, необходимые для асинхронной загрузки веб-ресурсов из функции JavaScript:
var couldProcess = false;
function displayMessageBody( messageID ) {
idToDisplay = messageID;
if (!couldProcess && httpRequester) {
httpRequester.open("POST", serverSideURL + escape(messageID),true);
httpRequester.onreadystatechange = processResponse;
couldProcess = true;
httpRequester.send(null);
}
}
Для вывода сообщения на экран метод displayMessageBody принимает ID этого сообщения. Посредством передачи следующих трех параметров для объекта XMLHttpRequest определяется получение доступа к URL:
Обработка данных
Вышеупомянутый метод processResponse активизируется как callback. Он извлекает вывод объекта XMLHttpRequest, проводит синтаксический анализ и присваивает вывод объектам страницы.
function processResponse() {
if ( httpRequester.readyState == COMPLETE ) { //это константа, объявлена локально, ее значение равно 4
if ( httpRequester.responseText.indexOf('invalid') == -1 ) {
var values = httpRequester.responseText.split(","); //анализируем ответ сервера
document.getElementById('messageBody').value = values[3]; //выбираем 4-е значение и текущее сообщение
couldProcess = false;
}
}
}
HttpRequester.readyState является индикатором завершенности кода URL. Он может принимать следующие значения:
Обратите внимание на то, что здесь доступ к ответу рассматривается как доступ к текстовому содержимому. XMLHttpRequest может без затруднений извлекать содержимое как в XML-формате, так и в не XML-формате. Если необходимо извлечь содержимое XML, то строка прочтёт responseXML и вы сможете получить доступ к нему как к объекту XML DOM. Такое разнообразие текстовых форматов — приятная новость, поскольку XML может привести к чрезмерному уничтожению простых сценариев извлечения данных, подобно описанному выше.
Повышаем устойчивость AJAX-приложения
При разностороннем использовании JavaScript автоматически возникает вопрос о степени устойчивости и надежности приложения. Оно с трудом может положиться на этот язык сценариев, отличающийся своей «расслабленностью» и «всепрощением». При наличии AJAX, ситуация все более усложняется. AJAX проводит удаленные вызовы, что в свою очередь создает дополнительную проблемную грань и возможность появления ошибок. Особенно, учитывая, что встроенная поддержка при ошибках, поступающих с серверной стороны, очень ограничена. Принимая это во внимание, можно предложить следующие варианты предотвращения ошибок:
if ( httpRequester.readyState == 4) {
// если статус равен 200 (OK)
if ( httpRequester.status == 200) {
// ... результаты выполнения...
} else {
// ... здесь обрабатываем ошибки...
}
}
Более полную статью можно найти на wikipedia.org
« Назад