HTML
СтатьиОтправка и обработка ответов http-запросов с помощью JavaScript (использование объекта XMLHttpRequest)
Разберёмся с возможностями, которые предоставляет нам объект Лирическое вступление (или «Листать вниз»)При создании более-менее интерактивных веб-проектов, неизбежно возникают ситуации, когда приходится отказыватся от части функциональных возможностей приложения из-за ограничений, накладываемых средой. Это, например понятные ограничения работы HTTP-протокола (основного протокола, если речь идет о именно о веб-приложениях), при котором работа приложения фактически сводится к последовательной демострации пользователю «листов», которые он может пролистать, сохранить или поставить в специально предусмотренных местах свою аутентичную подпись. Вообщем, остается-то чертовски мало места для той пресловутой интерактивности.
Однако в мире развивающихся нереально гиганскими прыжками веб-технологий редко какая возникшая проблема долго оставалась без решений (как пример можно вспомнить технологию
Предмет же нашего сегодняшнего разговора — яваскриптовский объект Историческая справка
Впервые объект Теперь давайте рассмотрим подробнее, с чем нам предстоит иметь дело. Методы объекта XMLHttpRequestНиже представлены атрибуты, общие для Internet Explorer 5, Mozilla, Netscape 7 и Safari 1.2 (то есть те, которые использовать относительно безопастно)
Свойства объекта XMLHttpRequest
Принципы примененияИтак, матчасть мы освоили, теперь перед нами встает практический вопрос: а как же собственно пользоваться этим добром? План работы с нашим объектом можно представить следующим образом:
Теперь рассмотрим этот план подробнее.
Значит первый пункт: создание экземпляра объекта Итак, вызов для Internet Explorer:
var req = new ActiveXObject("Microsoft.XMLHTTP");
...и для остальных: var req = new XMLHttpRequest();
То есть, для обеспечения кроссбраузерности нашего кода, нужно лишь проверять наличие объектов Дальше у нас по плану создание обработчика событий и открытие соединения. Эти вызовы выглядят просто и одинаково: req.onreadystatechange = processReqChange; req.open(<"GET"|"POST"|...>, <url>, <asyncFlag>);
Здесь лишь нужно указать нужные вам параметры, и, конечно же, написать саму функцию
После определения всех параметров запроса его остается только отправить. Делается это функцией // для 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;
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> <tr> <td valign="top">Состояние запроса</td> <td><input size="25" disabled type="text" name="state" value=""></td> <tr> <tr> <td valign="top">Код статуса</td> <td> <input disabled size="2" type="text" name="statusnum" value=""> <input disabled size="19" type="text" name="status" value=""></td> </td> </tr> <tr> <td valign="top">Данные от сервера</td> <td><textarea rows=6 name=response></textarea></td> </tr> <tr> <td>Строка GET-запроса</td> <td><input type="text" name="getparams" value="?b=2&c=3"> <input type="button" onclick="requestdata(getparams.value);" value="GET"> </td> </tr> </table> </form> Перед тем как дать вам код PHP-скрипта, хочу сказать пару слов про... Некоторые особенности PHP-скриптов работающих с XMLHttpRequest
Для корректной работы с Посыл этого набора заголовков на PHP выглядит примерно так:
<?php
Ещё, если вы планируете вывод в формате
<?php
Вот. А теперь использованный мною скрипт:
<?php
Новые горизонтыЯ думаю, понятно, какие возможности открываются при использовании рассмотреной сегодня фичи (на самом деле, эти возможности открыты уже примерно года три). Это к примеру и правильные корзины, и быстрые чаты, и ещё куча разнообразных применений.
Автор: Сергей Василенко |
||
