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

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

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

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 = '';

Скажи миру: «Привет»

Раз библиотека готова, можно попробовать ее использовать. Вначале скажем миру: «Привет», а затем модернизируем приложение для работы с динамическими табами (вкладками).

HTML

«Привет, мир!» на Аяксе

<html>

<head>

<title>Привет, мир AJAX'a</title>

<script language="JavaScript" src="ajax.js" type="text/javascript"></script>

</head>

<body>

<a href="#" onclick="javascript:sendRequest('hello.txt', 'result', getRequest);">Кликни по мне, чтобы отправить запрос</a>.

<p id="result">Здесь будет результат запроса</p>

</body>

</html>

Посмотрим, что мы с тобой наколдовали. У нас есть линк, при щелчке на который на сервер отправляется запрос к файлу hello.txt. Поскольку txt-файл не является скриптом, сервер просто передаст его содержимое, которое мы и выведем для пользователя. Как видишь, программирование на стороне сервера пока даже не применялось, но и из такой простоты можно выжать интересные вещи. Например, сделать страницу с несколькими вкладками: