Козырные расклады

Борис Вольфсон

Хакер, номер #096, стр. 096-134-1

(borisvolfson@gmail.com, http://splendot.com)

Технология AJAX для создания современных веб-сайтов

В покере есть такая начальная комбинация карт - туз и валет. Ее называют «AJAX». Если она выпадает при раздаче, то шансы на выигрыш очень велики. Существует одноименная компьютерная технология, которая обещает стать козырной картой в колоде любого сайта.

Теория

Вначале - пара слов про технологии, которые мы будем использовать в статье. Чтобы писать полноценные веб-приложения на Аяксе, надо на приличном уровне знать и уметь применять:

список

- язык разметки гипертекста HTML, а лучше XHTML;

- каскадные таблицы стилей CSS;

- объектную модель DOM;

- язык программирования на стороне клиента, обычно JavaScript;

- объект XMLHttpRequest для обмена данными с сервером;

- XML для формирования данных, либо другой формат, например JSON.

Если в вышеперечисленном списке встретились незнакомые слова, то не стоит отчаиваться - я поясню их, когда это понадобится.

Общая схема работы

Пользователь заходит на страничку, сделанную при помощи Аякса, и производит некое действие, например кликает мышкой по ссылке. Обработчик этого события посылает запрос на сервер. Он получает информацию и посылает ответ, который обрабатывает соответствующая функция на стороне клиента. Эта функция формирует готовый HTML и показывает его пользователю. Чтобы представить этот процесс, можно взглянуть на схему.

XMLHttpRequest

Для того чтобы написать наше первое приложение – интерактивную страничку на AJAX, нам надо научиться пользоваться объектом XMLHttpRequest. Что может быть проще, чем создать объект нужного класса? Но вспомним главную беду веб-программистов: у всех пользователей разные браузеры. Microsoft Internet Explorer поддерживает XMLHttpRequest в виде ActiveX-объекта Microsoft.XMLHTTP, остальные же браузеры считают его нативным, и проблем возникнуть не должно. Теперь алгоритм создания объекта XMLHttpRequest прояснен. Сначала определяем браузер, потом создаем объект нужным нам образом:

Создание объекта класса XMLHttpRequest

function createHttpRequest() {

var httpRequest;

var browser = navigator.appName;

if (browser == "Microsoft Internet Explorer") {

httpRequest = new ActiveXObject("Microsoft.XMLHTTP");

} else {

httpRequest = new XMLHttpRequest();

}

return httpRequest;

}

Что умеет делать этот объект? Самой главной функциональностью для нас будет возможность отправлять запросы на сервер и обрабатывать ответы в асинхронном режиме. Нам придется использовать метод установки параметров соединения open и метод отправки запроса send. Также мы будем задействовать свойство onreadystatechange для установки обработчика получения ответа на запрос. Полный список свойств и методов XMLHttpRequest, можно посмотреть в таблицах «Методы класса XMLHttpRequest» и «Свойства класса XMLHttpRequest».

Методы класса XMLHttpRequest

abort() – отменяет текущий запрос;

getAllResponseHeaders() - возвращает полный список HTTP-заголовков в виде строки;

getResponseHeader( headerName ) – возвращает значение указанного заголовка;

open( method, URL, async, userName, password ) – определяет метод, URL и другие опциональные параметры запроса; параметр async определяет, происходит ли работа в асинхронном режиме;