четверг, 21 июля 2011 г.

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

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







Bookmark and Share

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

Теория

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

  • язык разметки гипертекста HTML, а лучше XHTML;
  • каскадные таблицы стилей CSS;
  • объектную модель DOM;
  • язык программирования на стороне клиента, обычно JavaScript;
  • объект XMLHttpRequest для обмена данными с сервером;
  • XML для формирования данных, либо другой формат, например JSON.

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

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

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


Общая схема работы веб-страницы на AJAX

XMLHttpRequest

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

send( content )

отправляет запрос на сервер;

setRequestHeader( label, value )

добавляет HTTP-заголовок к запросу.

Свойства класса XMLHttpRequest

onreadystatechange

обработчик события, которое происходит при каждой смене состояния объекта;

readyState

возвращает текущее состояние объекта (0 - неинициализирован, 1 - открыт, 2 – отправка данных, 3 – получение данных и 4 – данные загружены);

responseText

текст ответа на запрос;

responseXML

текст ответа на запрос в виде XML, который затем может быть распарсен посредством DOM;

status

возвращает HTTP-статус в виде числа (404 – «Not Found», 200 – «OK» и т.д.)

statusText

возвращает статус в виде строки («Not Found», «OK» и т.д.)

Теперь, я думаю, ты достаточно осведомлен и готов писать метод отправки запроса. В качестве параметров мы будем передавать ему адрес, на который идет запрос (я назвал этот параметр «file», так как использовал относительные адреса), идентификатор HTML-элемента - _resultId, в котором будем отображать результат, и обработчик ответа на данный запрос - getRequestProc. Реализация проста, как арбуз: определяем параметры соединения, устанавливаем обработчик и посылаем запрос с пустым телом на сервер.

function sendRequest(file, _resultId, getRequestProc) {
resultId = _resultId;
document.getElementById(resultId).innerHTML = 'Подождите, идет загрузка...';
httpRequest.open('get', file);
httpRequest.onreadystatechange = getRequestProc;
httpRequest.send(null);
}

Осталось написать обработчик ответа, и наш мини-Аякс-движок готов. Здесь тоже все просто. Проверяем, полностью ли передан ответ на запрос, и выводим полученный ответ в элемент с идентификатором _resultId, который мы так предусмотрительно сохранили:

function getRequest() {
if (httpRequest.readyState == 4) {
document.getElementById(resultId).innerHTML = httpRequest.responseText;
}
}

Теперь добавим переменных и упакуем все в один файл ajax.js:

var httpRequest = createHttpRequest();
var resultId = '';



Теги: Web 2.0 , программирование



Страницы:
1 2 3 Следующая страница>>

Комментариев нет:

Отправить комментарий