Начинаем работать с 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: