Начинаем работать с Ajax
В 2005 году начала набирать популярность сравнительно новая
технология, называнная Ajax. Название Ajax происходит
от Asynchronous JavaScript and XML. В двух словах это
использование объекта XMLHttpRequest для
взаимодействия с серверными сценариями. Он может
отправлять и принимать информацию в различных форматах,
включая XML, HTML и текстовые файлы.
Ajax имеет очень большие возможности, а его асинхронная природа позволяет обходиться без перезагрузки страницы. Это дает вам возможность обновлять часть страницы в зависимость от действий пользователя и является краеугольным камнем Rich Internet Applications (RIA) часто обсуждаемым в контексте Web 2.0
DOM играет в Ajax несколько ролей, как вы будете
использовать DOM зависит от того, как вы собираетесь
обрабатывать ответ полученный от сервера. Вы можете
получить ответ в виде текста, используя свойство
responseText, или вы можете работать с XML,
используя responseXML. Допустим, вы получаете
от сервера ответ в виде части (X)HTML страницы для этого
вы используете свойство responseText,
вы можете добавить этот текст, в необходимую точку
страницы используя innerHTML. Если же сервер
отправляет ответ в виде XML, вы должны использовать
responseXML, вы можете просматривать его DOM,
проводить выборку или выполнять операции над элементами, атрибутами
и текстовыми узлами.
Все это может казаться очень запутанными, но станет гораздо понятней после того как мы рассмотрим примеры.
Чтобы проследить наши действия шаг за шагом читайте комментарии к примерам.
Для простого примера использования Ajax, основанного
на свойстве innerHTML мы создадим адресную
книгу. Начнем с кода XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Адресная книга на Ajax (XML версия)</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="addressBook.js"></script>
<link rel="stylesheet" href="../styles.css" type="text/css" media="all">
</head>
<body>
<h1>Пример адресной книги с использованием Ajax</h1>
<form action="/stuff/start-with-ajax/xml/index.php" method="POST">
<fieldset>
<legend>Выбор адресата</legend>
<select id="person" name="person">
<option value="">Никто не выбран</option>
<option value="1">Иванов Иван</option>
<option value="2">Владимир Петров</option>
</select>
<input type="submit" id="submit" name="submit" value="Показать адрес" />
</fieldset>
</form>
<pre id="address"></pre>
</body>
</html>
Как видите, у нас есть простая форма с элементом
управления select, с помощью которого выбирается
человек. Кроме того, мы предоставляем стандартный механизм
запроса с помощью формы, на случай если наш JavaScript
не запустится. Ниже формы у нас расположен элемент
pre в котором будет отображаться адрес,
получаемый из базы данных.
Давайте добавим JavaScript, мы будем использовать
обработчик события onchange элемента
select чтобы инициировать запрос на получение
адреса выбранного человека. Сервер будет возвращать информацию
в виде строки:
Bob Smith 123 School Street Anytown, NY 12345
Эту строку мы добавим в элемент pre
с помощью свойства innerHTML.
Код примера:
var addressBook = {
control: false, // элемент селект
target: false, // «цель» - элемент pre
loader: false, // сообщение о загрузке
xmlhttp: false, // XMLHttpRequest
// инициализация
// controlId - id элемента select
// sbmtBtnId - id кнопки submit
// targetId - id элемента pre
init: function(controlId, sbmtBtnId, targetId) {
if (!document.getElementById(controlId) ||
!document.getElementById(sbmtBtnId) ||
!document.getElementById(targetId)) return;
// создаем и проверяем объект XMLHttpRequest,
// если возникли проблемы тихонько выходим
addressBook.xmlhttp = window.ActiveXObject ?
new ActiveXObject("Microsoft.XMLHTTP") :
new XMLHttpRequest();
if (!addressBook.xmlhttp) return;
addressBook.control = document.getElementById(controlId);
// удаляем кнопку submit
// она нам нужна только если скрипт не запустится
addressBook.removeElement(document.getElementById(sbmtBtnId));
addressBook.target = document.getElementById(targetId);
// добавляем обработчик события onchange элемента select
addressBook.addEvent(addressBook.control, 'change',
function() {
if (this.value != '')
addressBook.getAddress(this.value);
else
addressBook.target.innerHTML = '';
});
},
//загрузка и отображение данных
getAddress: function(id) {
// даем пользователю знать, что началась загрузка данных
addressBook.buildLoader();
addressBook.xmlhttp.open('POST', 'index.php', true);
// обязательное для POST указание Content-Type
addressBook.xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
addressBook.xmlhttp.onreadystatechange = function() {
if (addressBook.xmlhttp.readyState == 4) {
if (addressBook.xmlhttp.status == 200) {
// удаляем сообщение о загрузке
addressBook.killLoader();
// вставляем полученную информацию в элемент pre
addressBook.target.innerHTML = addressBook.xmlhttp.responseText;
}
}
};
// отсылаем данные запроса
addressBook.xmlhttp.send('id=' + id);
},
// создание сообщения о загрузке
buildLoader: function() {
addressBook.loader = document.createElement('div');
addressBook.loader.id = 'loading';
addressBook.loader.appendChild(document.createTextNode('Загрузка...'));
document.body.appendChild(addressBook.loader);
},
// удаление сообщения о загрузке
killLoader: function() {
addressBook.removeElement(document.getElementById('loading'));
},
removeElement: function(el) {
el.parentNode.removeChild(el);
},
// добавляет обработчик события
addEvent: function(obj, type, fn) {
if (obj.addEventListener)
obj.addEventListener(type, fn, false);
else if (obj.attachEvent) {
obj['e' + type + fn] = fn;
obj[type + fn] = function() {
obj['e' + type + fn](window.event);
};
obj.attachEvent('on' + type, obj[type + fn]);
}
}
};
// вызываем метод init() при загрузке страницы
// и передаем необходимые параметры
addressBook.addEvent(window, 'load', function() {
addressBook.init('person', 'submit', 'address');
});
Пример 2: Ajax с использованием Узлов (Nodes)
Давайте отредактируем пример и вместо возврата строки от сервера, будем использовать XML:
<file>
<name>
<first>Bob</first>
<last>Smith</last>
</name>
<address>
<street>123 School Street</street>
<city>Anytown</city>
<state>NY</state>
<zip>12345</zip>
</address>
</file>
Код XHTML не изменится, но нам нужно будет внести небольшие изменения в JavaScript. Чтобы выделить отличия, я опишу вкратце каждое изменение.
Первое изменение, в обработчик события onchange элемента select, очень простое.
addressBook.addEvent( addressBook.control, 'change',
function() {
if( this.value != '' )
addressBook.getAddress( this.value );
else
addressBook.target.removeChild(addressBook.target.firstChild);
});
Вместо очищения содержимого цели с помощью
innerHTML, мы удаляем узел, который является
первым потомком цели.
Следующее изменение внесем в метод
getAddress()
// загрузка и отображение данных
getAddress: function(id) {
// даем пользователю знать, что началась загрузка данных
addressBook.buildLoader();
addressBook.xmlhttp.open('POST', 'index.php', true);
// обязательное для POST указание Content-Type
addressBook.xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
addressBook.xmlhttp.onreadystatechange = function() {
if (addressBook.xmlhttp.readyState == 4) {
if (addressBook.xmlhttp.status == 200) {
// удаляем сообщение о загрузке
addressBook.killLoader();
// вставляем полученную информацию в элемент pre
if (addressBook.target.hasChildNodes())
addressBook.target.removeChild(addressBook.target.firstChild);
xml = addressBook.xmlhttp.responseXML;
var name = addressBook.getNodeValue(xml, 'first') + ' ' +
addressBook.getNodeValue(xml, 'last');
var address = addressBook.getNodeValue(xml, 'street');
var csz = addressBook.getNodeValue(xml, 'city') + ', ' +
addressBook.getNodeValue(xml, 'state') + ' ' +
addressBook.getNodeValue(xml, 'zip');
var txt = document.createTextNode(name + "\n" + address + "\n" + csz);
addressBook.target.appendChild(txt);
}
}
};
// отсылаем данные запроса
addressBook.xmlhttp.send('id=' + id);
}
Поскольку мы работаем с XML мы можем использовать
свойство responseXML чтобы получить доступ
к ответу сервера в виде дерева узлов. Мы можем
просмотреть дерево, собрать необходимую информацию. В этом
примере мы добавили новый метод
getNodeValue()который упрощает работу с ответом
полученным в виде XML:
getNodeValue: function(scope, node){
return scope.getElementsByTagName(node)[0].firstChild.nodeValue;
}
Это метод принимает два аргумента узел и элемент содержание, которого мы хотим получить.
Как только мы получим все необходимые данные из XML, текстовая строка созданная с помощью DOM должна быть добавлена к элементу pre, конечный результат можно увидеть здесь.
Может быть, вы удивлены тому, что оба примера делают одно и то же? Это показывает, как вы можете работать с двумя разными системами и получать один и тот же результат. В Ajax, как и везде гибкость очень важна, чтобы делать свою работу.
Исходные файлы примеров, включая серверные скрипты в архиве
Ресурсы посвященные Ajax:
- W3C XMLHttpRequest Object
- Foundations of Ajax by Ryan Asleson and Nathaniel T. Schutta (Apress)
- Fiftyfoureleven’s XMLHttpRequest Examples
- The Ajaxian Blog
- AHAH, микроформат для работы с
XMLHttpRequest()иinnerHTML
Translated with the permission of A List Apart Magazine and the author[s].