Отправка и обработка ответов http-запросов с помощью JavaScript (использование объекта XMLHttpRequest)

Разберёмся с возможностями, которые предоставляет нам объект XMLHttpRequest. Попробуем реализовать на JavaScript работу с удаленным сервером посредством прямой отправки http-запросов и обработкой ответов.

Лирическое вступление (или «Листать вниз»)

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

Это, например понятные ограничения работы HTTP-протокола (основного протокола, если речь идет о именно о веб-приложениях), при котором работа приложения фактически сводится к последовательной демострации пользователю «листов», которые он может пролистать, сохранить или поставить в специально предусмотренных местах свою аутентичную подпись. Вообщем, остается-то чертовски мало места для той пресловутой интерактивности.

Однако в мире развивающихся нереально гиганскими прыжками веб-технологий редко какая возникшая проблема долго оставалась без решений (как пример можно вспомнить технологию Cookie). Большей головной болью скорее всегда являлся отбор и стандартизация одного из них. (примеров тут несчесть).

Предмет же нашего сегодняшнего разговора — яваскриптовский объект XMLHttpRequest, который позволяет посылать HTTP-запросы к удаленному серверу и принимать страницу-ответ сервера как в виде текста, так в виде DOM (объектной модели документа).

Историческая справка

Впервые объект XMLHttpRequest внедрила в свой Internet Explorer 5 фирма Microsoft в виде ActiveX-компоненты. Позже он появился также в Mozilla, Netscape (начиная с 7-ой версии) а также в Safari (с версии 1.2), правда, как это всегда бывает, работает несколько по другому (естественно, не в виде ActiveX-компоненты). Однако, несмотря на это и на отсутствие официального стандарта консорциума W3C, XMLHttpRequest уже поддерживается на уровне, позволяющем говорить о нем, как о стандарте de facto.

Теперь давайте рассмотрим подробнее, с чем нам предстоит иметь дело.

Методы объекта XMLHttpRequest

Ниже представлены атрибуты, общие для Internet Explorer 5, Mozilla, Netscape 7 и Safari 1.2 (тоесть те, которые использовать относительно безопастно)

abort()

getAllResponseHeaders()

getResponseHeader(<headerLabel>)

open(<method>, <URL> [, <asyncFlag>[, <userName>[, <password>]]])

send(<content>)

setRequestHeader(<label>, <value>)

Свойства объекта XMLHttpRequest

onreadystatechange

readyState

responseText

responseXML

status

statusText

Принципы применения

Итак, матчасть мы освоили, теперь перед нами встает практический вопрос: а как же собственно пользоваться этим добром? План работы с нашим объектом можно представить следующим образом:

1. Создание экземпляра объекта XMLHttpRequest
2. Установка для него обработчика события onreadystatechange
3. Открытие соединения с указанием типа запроса, URL и прочих параметров.
4. Непосредственно отправка запроса.

Теперь рассмотрим этот план подробнее.

Значит первый пункт: создание экземпляра объекта XMLHttpRequest. Вот здесь как раз зашито то разделение в реализации браузеров, о котором говорилось выше. Конструкция создания объекта отличается: в IE 5+ она реализована через ActiveXObject, а в остальных браузерах (Mozilla, Netscape и Safari) — как встроенный объект типа XMLHttpRequest.

Итак, вызов для Internet Explorer:

var req = new ActiveXObject("Microsoft.XMLHTTP");

...и для остальных:

var req = new XMLHttpRequest();

То есть, для обеспечения кроссбраузерности нашего кода, нужно лишь проверять наличие объектов window.XMLHttpRequest и window.ActiveXObject, и, в зависимости от того, какой есть, тот и применять :)

Дальше у нас по плану создание обработчика событий и открытие соединения. Эти вызовы выглядят просто и одинаково:

req.onreadystatechange = processReqChange;
req.open(<"GET"|"POST"|...>, &lturl>, <asyncFlag>);

Здесь лишь нужно указать нужные вам параметры, и, конечно же, написать саму функцию processReqChange() (о ней ниже).

После определения всех параметров запроса его остается только отправить. Делается это функцией send() (для версии без ActiveX нужно указывать параметром null):

// для IE
req.send();

// для остальных
req.send(null);

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

Собственно, вот пример куска кода с двумя этими функциями:

var req;

function loadXMLDoc(url) {
    // для "родного" XMLHttpRequest
    if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
        req.onreadystatechange = processReqChange;
        req.open("GET", url, true);
        req.send(null);
        
    // для версии с ActiveX
    } else if (window.ActiveXObject) {
        req = new ActiveXObject("Microsoft.XMLHTTP");
        if (req) {
            req.onreadystatechange = processReqChange;
            req.open("GET", url, true);
            req.send();
        }
    }
}

function processReqChange() {
    // только при состоянии "complete"
    if (req.readyState == 4) {
        // для статуса "OK"
        if (req.status == 200) {
            // здесь идут всякие штуки с полученным ответом
        } else {
            alert("Не удалось получить данные:n" +
                req.statusText);
        }
    }
}

А теперь, в целях ещё большего повышения интереса, небольшой банальный пример использования этого всего добра. Перед вами форма, которая обращается к небольшому PHP-скрипту (его код рассмотрен ниже), передает туда GET'ом параметры и получает ответ.

Итак, исходный код JavaScript'овой части:

var req;

function loadXMLDoc(url) {
    if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
        req.onreadystatechange = processReqChange;
        req.open("GET", url, true);
        req.send(null);
    } else if (window.ActiveXObject) {
        req = new ActiveXObject("Microsoft.XMLHTTP");
        if (req) {
            req.onreadystatechange = processReqChange;
            req.open("GET", url, true);
            req.send();
        }
    }
}

function processReqChange() {   
    document.form1.state.value = stat(req.readyState); 
    
    ab = window.setTimeout("req.abort();", 5000);
    
    if (req.readyState == 4) {
        clearTimeout(ab);
        
        document.form1.statusnum.value = req.status; 
        document.form1.status.value = req.statusText; 
        
        // only if "OK"
        if (req.status == 200) {
            document.form1.response.value=req.responseText;
        } else {
            alert("Не удалось получить данные:n" + req.statusText);
        }
    }  
}

function stat(n)
{
  switch (n) {
    case 0:
      return "не инициализирован";
    break;
      
    case 1: 
      return "загрузка...";
    break;
    
    case 2: 
      return "загружено";
    break;
    
    case 3: 
      return "в процессе...";
    break;
      
    case 4: 
      return "готово";
    break;
    
    default:
      return "неизвестное состояние";  
  }  
}

function requestdata(params)
{
  loadXMLDoc('examples/httpreq.php'+params);
}

Тепер — HTML-форма:

<form name=form1>
<table width=100% style="font-size: 100%">
<tr><td width=30% valign=top>
Состояние запроса
<td width=70%>
<input size=25 disabled type=text name=state value="">
<tr><td valign=top>Код статуса
<td><input disabled size=2 type=text name=statusnum value="">
<input disabled size=19 type=text name=status value="">
<tr><td valign=top>Данные от сервера
<td><textarea rows=6 name=response></textarea> 
<tr><td>Строка GET-запроса<td>
<input type=text name=getparams value="?">
<input type=button onclick="requestdata(getparams.value);" value="GET">
</table>
</form>

Перед тем как дать вам код PHP-скрипта, хочу сказать пару слов про...

Некоторые особенности PHP-скриптов работающих с XMLHttpRequest

Для корректной работы с XMLHttpRequest, ваш PHP скрипт должен посылать ряд заголовков, а именно: тип содержимого и его кодировку (важно, если вы хотите работать с кириллическим выводом), а также параметры кеширования содержимого — нужно устранить любое кеширование (понятное дело, чтобы полученная информация была всегда свежей).

Посыл этого набора заголовков на PHP выглядит примерно так:

header("Content-type: text/plain; charset=windows-1251");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);

Ещё, если вы планируете вывод в формате text/plain (как у меня), учтите, что специальные символы (типа /n,/r,/t..) обрабатываются по умолчанию только в строках с двойными кавычками ("таких"):

//правильно
echo "СтрокаnЕщё строка";

//неправильно
echo 'СтрокаnЕщё строка';

Вот. А теперь использованный мною скрипт:

<?php
header("Content-type: text/plain; charset=windows-1251");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);

echo "Хелло ворлд!nn"; 

if (isset($a))
{
  for ($i=1; $i < 10000; $i++)
  {
    echo 'Это тестовая строка. ';
    if (($i % 1000) == 0) flush();	
  }
}

if (count($_GET) > 0)
{
  echo "nnПередано GET'омn"; print_r($_GET);
}
?>

Новые горизонты

Я думаю, понятно, какие возможности открываются при использовании рассмотреной сегодня фичи (на самом деле, эти возможности открыты уже примерно года три). Это к примеру и правильные корзины, и быстрые чаты, и ещё куча разнообразных применений.

Вроде всё на сегодня. Удачи в скриптовании!

Источник: http://www.mysitez.km.ua/