Большой архив статей, книг, документации по программированию, вебдизайну, компьютерной графике, сетям, операционным системам и многому другому
 
<Добавить в Избранное>    <Сделать стартовой>    <Реклама на сайте>    <Контакты>
  Главная Документация Программы Обои   Экспорт RSS E-Books
 
Поиск по сайту


 

  Раздел: Компьютерная документация -> Интернет технологии -> JavaScript

 

Отправка и обработка ответов http-запросов с помощью JavaScript

Разберёмся с возможностями, которые предоставляет нам объект 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>)

возвращает строковое значение заголовка, название которого указано в параметре <headerLabel>.

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

Присвоение параметров (метода, URL, и других) текущему запросу.

send(<content>)

Собственно, «посыл» запроса

setRequestHeader(<label>, <value>)

Установка в отправляемом запросе заголовка <label> со значением <value>

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

onreadystatechange

событие, возникающее при смене статуса объекта

readyState

значения статуса (integer), может принимать следующие значения: 0 = неинициализирован (uninitialized); 1 = «идет загрузка» (loading); 2 = «загружен» (loaded); 3 = «интерактивен» (interactive) 4 = «выполнен» (complete)

responseText

строка с возвращенными сервером данными

responseXML

DOM-совместимый объект-документ с возвращенными сервером данными

status

стандартный HTTP код статуса, например 404 (для «Not Found») или 200 (для «OK»)

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"|...>, <url>, <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'ом параметры и получает ответ.

Состояние запроса
Код статуса
Данные от сервера
Строка GET-запроса
 для $a=1 выполняется большой цикл с 10000 итераций и длииинным выводом

Итак, исходный код 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 "Хелло ворлд!\n\n"; 

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

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

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

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

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

Автор: Сергей Василенко
Источник: www.mysitez.km.ua

Ссылки по теме
*.JS, когда грузиться думаешь?
AJAX
Выпадающее меню на CSS и JavaScript
JavaScript и GET-параметры
Создание универсального выпадающего меню
"Живые меню" или "Как сделать красиво с помощью CSS и JavaScript"
Предварительная загрузка рисунков ( preload ) и перекат ( rollover )
JavaScript FAQ

Вся документация JavaScript

 

Компьютерная документация от А до Я - Главная

 

 
Интересное в сети
 
10 новых программ
CodeLobster PHP Edition 3.7.2
WinToFlash 0.7.0008
Free Video to Flash Converter 4.7.24
Total Commander v7.55
aTunes 2.0.1
Process Explorer v12.04
Backup42 v3.0
Predator 2.0.1
FastStone Image Viewer 4.1
Process Lasso 3.70.4
FastStone Image Viewer 4.0
Xion Audio Player 1.0.125
Notepad GNU v.2.2.8.7.7
K-Lite Codec Pack 5.3.0 Full


Наши сервисы
Рассылка новостей. Подпишитесь на рассылку сейчас и вы всегда будете в курсе последних событий в мире информационных технологий.
Новостные информеры. Поставьте наши информеры к себе и у вас на сайте появится дополнительный постоянно обновляемый раздел.
Добавление статей. Если вы являетесь автором статьи или обзора на тему ИТ присылайте материал нам, мы с удовольствием опубликуем его у себя на сайте.
Реклама на сайте. Размещая рекламу у нас, вы получите новых посетителей, которые могут стать вашими клиентами.
 
Это интересно
 

Copyright © CompDoc.Ru
При цитировании и перепечатке ссылка на www.compdoc.ru обязательна. Карта сайта.
 
Rambler's Top100