 |
Ajax позволяет избежать перезагрузок страницы. Объясняется это тем, что запросы к серверу производятся на заднем плане с помощью объекта языка Java Script, который называется XMLHTTPRequest. Таким образом, достигается асинхронность ("А" в акрониме) взаимодействия клиента и сервера. Остальные буквы акронима означают «Java Script And XML».
На самом деле этот объект был встроен в браузеры давно, но не использовался широко. После того как разработчики Google Mail применили его для реализации своего проекта, он стал использоваться достаточно широко.
Термин «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 следует использовать что-нибудь другое.
Надеюсь, читателю понятно, что этот простой пример вполне возможно расширить до работающего скрипта. Получать с сервера можно не только статические документы (это, на самом-то деле, не совсем интересно), но и результаты обработки какого-либо запроса. Или же (что является, собственно, основной целью работы объекта) получать данные в формате XML для дальнейшей обработки.
Ссылки по теме
Статья получена: hostinfo.ru
Противовирусные препараты: за и против
Добро пожаловать в Армению. Знакомство с Арменией
Крыша из сэндвич панелей для индивидуального строительства
Возможно ли отменить договор купли-продажи квартиры, если он был уже подписан
Как выбрать блеск для губ
Чего боятся мужчины
Как побороть страх перед неизвестностью
Газон на участке своими руками
Как правильно стирать шторы
Как просто бросить курить
- 25945 -
