Термин «Ajax»; вошел в словарь разработчиков после публикации статьи Джеси Джеймса Гаррета "Ajax: Новый подход к веб-приложениям". В статье сформулированы не только новые принципы построения веб-интерфейсов, но и дан подробный список технологий, являющихся составными частями архитектуры. Список следующий:
XHTML и CSS
DOM
XML и XSLT
XMLHttpRequest
JavaScript
Подразумевается, что читатель минимально знаком с основными тегами языка HTML, имеет представление о методах и функциях языка Java Script и знает приципы работы протокола HTTP Рассмотрение основных методов и свойств объекта XMLHTTPRequest можно провести на примере. Рассмотрим следующий код (для удобства разбора строки примера пронумерованы):
index.html
1 <html>
2 <head>
3 <title>Использование Ajax</title>;
4 <script language="javascript">
5 var XMLHttpRequestObject = false;
6 if (window.XMLHttpRequest) {
7 XMLHttpRequestObject = new XMLHttpRequest();
8 } else if (window.ActiveXObject) {
9 XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
10 }
11 function getAjax(data, div){
12 if(XMLHttpRequestObject) {
13 var obj = document.getElementById(div);
14 XMLHttpRequestObject.open("GET", data);
15 XMLHttpRequestObject.onreadystatechange = function()
16 {
17 if (XMLHttpRequestObject.readyState == 4 &&
18 XMLHttpRequestObject.status == 200) {
19 obj.innerHTML = XMLHttpRequestObject.responseText;
20 }
21 }
22 XMLHttpRequestObject.send(null);
23 }
24 }
25 </script>
26 </head>
27 <body>
28 <H1>Пример Ajax</H1>;
29 <form>
30 <input type = button value = "Проверить"
onclick = getAjax('/redir.php?url=www.test.ru%2Ftest.txt','target')>
31 </form>
32 <div id="target">
33 <p>Amat victoria curam.</p>
34 </div>
35 </body>
36 </html>
Помимо веб-страницы нам понадобится дополнительный текстовый файл, содержимое которого мы будем асинхронно догружать на тестовую страницу. Содержимое файла (назовем его test.txt) может быть следующим:
<b>Ibi victoria, ubi concordia</b>
Поставленная перед нами задача выглядит следующим образом. На загруженной странице будет находиться кнопка. После нажатия кнопки первоначальное содержимое слоя с именем target меняется на содержимое текстового файла. Читателю, знакомому с веб-технологиями, этот трюк (замена текста в слове) может показаться не очень-то оригинальным. Такое, в конце концов, можно проделать разными способами. Но суть нашего примера состоит в использовании объекта XMLHTTPRequest, что позволяет нам получить информацию с сервера без перезагрузки страницы.
Для успешной разработки веб-приложений с использованием Ajax необходимо установить веб-сервер локально или использовать какой-либо хостингПрежде чем подробно разобрать этот пример, следует обсудить некоторые технические подробности. Дело в том, что, будучи загруженным в браузер с локального диска, этот пример работать не будет. Для того чтобы правильно обработать этот пример, браузер должен получить документ с помощью веб-сервера. Неважно, установлен сервер у вас локально или же вы проверяете данный пример на удаленном сервере, но факт остается фактом, объект XMLHTTPRequest обращается к серверу по протоколу HTTP и привычный способ отладки веб-страниц путем запуска их напрямую (с жесткого диска) работать не будет.
Далее, как уже давно обещано, следует разбор исходного файла. Детально рассмотрены только те строки, которые имеют отношение к рассматриваемой теме.
Строка 5. Инициализация переменной XMLHTTPRequestObject.
В этой переменной будет храниться объект XMLHTTPRequest, который будет полностью инициализирован в следующих строках. Значение false присваивается этой переменной, на случай если браузер не поддерживает этот объект.
Строки 6-10. Создание объекта XMLHTTPRequest.
В этих строках происходит привычная любому веб-разработчику «война браузеров». В случае с браузерами семейства Internet Explorer необходимо создать объект ActiveX. В случае с остальными браузерами можно просто создать соответствующий объект.
Как видно из исходного кода страницы (строка 30), на кнопку формы «повешен» обработчик, который вызывает определенную пользователем функцию getAjax с двумя параметрами. Назначение функции и смысл параметров становятся ясными после разбора исходного текста функции.
Строки 11-24. Основная функция.
После того как объект XMLHTTPRequest создан, разработчик получает доступ к его методам и свойствам. За полным их перечнем, а также за различиями в реализациях для разных браузеров обращайтесь к специальной литературе (ссылки в конце статьи). Наш пример использует минимальный рабочий набор методов и свойств объекта XMLHTTPRequest.
В строке 12 происходит проверка того, был ли создан объект. Если нет (допустим, браузер его не поддерживает), то далее никаких действий не происходит. В случае если условие выполнилось, происходит обработка второго параметра, переданного функции. В нашем случае это инициализация переменной obj и помещение в нее (по имени) нашего рабочего слоя с целью в дальнейшем менять его свойства.
В строке 13 вызывается метод open, который формирует запрос к серверу. На самом деле число параметров этого метода гораздо больше, но мы используем минимальный набор. А именно метод протокола HTTP и URL необходимого нам документа.
В строке 14 используется свойство onreadystatechange, позволяющее следить за изменением статуса объекта, в то время когда он выполняет свою работу. Здесь создается анонимная функция, которая выполняет работу по проверке двух важных свойств объекта (стоки 17 и 18). Первое (readyState) может по результатам работы объекта содержать значения от 0 до 4 (4 означает, что запрос закончен). Второе(status) содержит код ответа сервера (200 означает, что документ существует). Подробности о возможных значениях этих свойств можно узнать в документации.
Если оба условия выполнены (строка 19), то значение свойства innerHTML, ранее определенного объекта obj, заменяется на значение, полученное с сервера (свойство responseText).
В строке 22 происходит собственно запрос. Значение передаваемого параметра null определено методом GET (строка 13). В случае использования метода, отличного от GET, вместо null следует использовать что-нибудь другое.
Надеюсь, читателю понятно, что этот простой пример вполне возможно расширить до работающего скрипта. Получать с сервера можно не только статические документы (это, на самом-то деле, не совсем интересно), но и результаты обработки какого-либо запроса. |
