созидательная сила AJAX

ALEXEY SHOCKOV

Спецвыпуск: Хакер, номер #067, стр. 067-052-4

PHP — очень распространенный в силу своей быстроты и легкости язык для web-программирования. Библиотека Subsys_JsHttpRequest выгодно отличается от конкурентов кроссбраузерностью. В зависимости от конкретного браузера, библиотека выбирает метод передачи данных и гарантирует доставку данных пользователю практически в любой ситуации.

Для знакомства с библиотекой реализуем очень простой пример — страницу авторизации пользователя, которая проверяет введенные данные практически на лету. Полный код примера, как и всегда, находится на диске, прилагаемом к журналу.

[авторизация «не отходя от кассы»]

Для начала рассмотрим frontend нашей программы, то есть ту страницу, которую увидит пользователь. Из-за примитивности HTML-верстки мы не будем обращать на нее внимания, разберемся с JavaScript’ом. Первым делом подключим библиотеку, как показано ниже.

<script language="JavaScript" src="lib/Subsys/JsHttpRequest/Js.js"></script>

Далее следует всего одна функция checkUser, вызов которой происходит при отправке формы на сервер. Здесь сосредоточена вся работа по подготовке запроса к серверу, собственно запроса и обработке результатов.

Составление запроса происходит путем формирования массива из элементов формы, в нашем случае это user и pass. После создания объекта Subsys_JsHttpRequest_Js, который и отвечает за обмен данными, не лишним будет активировать очень полезную функцию кеширования. Кеширование помогает уменьшить нагрузку на сервер не отсылая ему одинаковых запросов, а пользователь тратит меньше времени при работе с нашим приложением.

Запрос можно отправлять на сервер как методом POST, так и методом GET, причем адрес серверного скрипта может уже содержать GET-параметры — на работе Subsys_JsHttpRequest_Js это никак не отразится.

// Get information

var user = '' + document.getElementById('user').value;

var pass = '' + document.getElementById('pass').value;

// Create object

var req = new Subsys_JsHttpRequest_Js();

// Allow cashing queries

req.caching = true;

// Prepare object

req.open('POST', 'load.php', true);

// Send query

req.send({ u: user, p: pass });

Очень хитро проходит обработка ответа сервера. После того как ответ получен, вызывается функция, ссылка на которую содержится в переменной onreadystatechange. Ответ сервера также представляет собой хэш, и он содержится в переменной responseJS. В нашем случае мы просто добавляем сообщение об успешной/неудачной авторизации (в зависимости от значения переменной ответа сервера auth) в блок на странице с идентификатором result.

// After loading data this code are automaticaly called

req.onreadystatechange = function() {

if (req.readyState == 4) {

if (req.responseJS) {

// Put result in <div>

document.getElementById('result').innerText =