В 2005 году начала набирать популярность сравнительно новая технология, называнная Ajax. Название Ajax происходит от Asynchronous JavaScript and XML. В двух словах это использование нестандартного XMLHttpRequest объекта для взаимодействия с серверными сценариями. Он может отправлять и принимать информацию в различных форматах, включая XML, HTML и текстовые файлы.
Ajax имеет очень большие возможности, а его асинхронная природа позволяет обходиться без перезагрузки страницы. Это дает вам возможность обновлять часть страницы в зависимость от действий пользователя и является краеугольным камнем Rich Internet Applications (RIA) часто обсуждаемым в контексте «Web 2.0»
DOM играет в Ajax несколько ролей, как вы будете использовать DOM зависит от того, как вы собираетесь обрабатывать ответ полученный от сервера. Вы можете получить ответ в виде текста, используя свойство responceText, или вы можете работать с XML, используя responseXML. Допустим, вы получаете от сервера ответ в виде части (X)HTML страницы для этого вы используете свойство responseText, вы можете добавить этот текст, в необходимую точку страницы используя innerHTML. Если же сервер отправляет ответ в виде XML, вы должны использовать responseXML, вы можете просматривать его DOM, проводить выборку или выполнять операции над элементами, атрибутами и текстовыми узлами.
Все это может казаться очень запутанными, но станет гораздо понятней после того как мы рассмотрим несколько примеров. Для этих примеров мы используем библиотеку XHConn для упрощения нашего взаимодействия с объектом XMLHttpRequest(). Эта библиотека доступна на сайте xkr.us/code/javascript/XHConn/ и позволяет получать простой доступ к XMLHttpRequest() через создание нового объекта XHConn и инициализацию его метода connect().
Чтобы проследить наши действия шаг за шагом читайте комментарии к примерам.
Для простого примера использования Ajax, основанного на свойстве innerHTML мы создадим адресную книгу. Начнем с кода XHTML.
"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="../XHConn.js"></script>
<script type="text/javascript" src="addressBook.js"></script>
</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 = {
myConn: false, // XMLHttpRequest
body: false, // элемент body
control: false, // элемент селект
target: false, // «цель» - элемент pre
loader: false, // сообщение о загрузке
init: function( controlId, sbmtBtnId, targetId ){
/* init() takes three arguments:
* id элемента select
* id кнопки submit
* id элемента pre */
// проверка методов и элементов
if( !document.getElementById ||
!document.getElementsByTagName ||
!document.getElementById( controlId ) ||
!document.getElementById( sbmtBtnId ) ||
!document.getElementById( targetId ) ) return;
//создаем и проверяем объект XHConn,
//если возникли проблемы тихонько выходим
addressBook.myConn = new XHConn();
if( !addressBook.myConn ) return;
addressBook.body =
document.getElementsByTagName( 'body' )[0];
addressBook.control =
document.getElementById( controlId );
var sbmtBtn = document.getElementById( sbmtBtnId );
// удаляем кнопку submit
// она нам нужна только если скрипт не запустится
sbmtBtn.parentNode.removeChild( sbmtBtn );
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();
// функция которая будет запущена
// после завершения вызова Ajax
var fnWhenDone = function(oXML) {
// удаляем сообщение о загрузке
addressBook.killLoader();
// вставляем полученную информацию в элемент pre
addressBook.target.innerHTML = oXML.responseText;
};
addressBook.myConn.connect("index.php",
"POST", "id="+id, fnWhenDone);
},
buildLoader: function(){ // создание сообщения о загрузке
// создаем элемент div
addressBook.loader = document.createElement( 'div' );
// настраиваем стили
addressBook.loader.setAttribute( 'id', 'loading' );
addressBook.loader.style.position = 'absolute';
addressBook.loader.style.top = '50%';
addressBook.loader.style.left = '50%';
addressBook.loader.style.width = '300px';
addressBook.loader.style.lineHeight = '100px';
addressBook.loader.style.margin = '-50px 0 0 -150px';
addressBook.loader.style.textAlign = 'center';
addressBook.loader.style.border = '1px solid #870108';
addressBook.loader.style.background = '#fff';
// выводим текст сообщения о загрузке данных
addressBook.loader.appendChild(
document.createTextNode( 'Загрузка... ) );
addressBook.body.appendChild( addressBook.loader );
},
killLoader: function(){
// функция убирает сообщение о загрузке
addressBook.body.removeChild( addressBook.loader );
},
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' );
}
);