Создание экземпляра объекта xmlHttpRequest

В IE 5 - IE 6 класс XMLHttpRequest был реализован через ActiveXObject, а в остальных браузерах (IE 7, Mozilla, Opera, Safari) — как встроенный объект типа XMLHttpRequest. Поэтому в версиях Internet Explorer до IE7 рекомендуется использовать:

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

Для остальных браузеров пишем:

var req = new XMLHttpRequest();

В качестве универсального решения предлагается использование функции:

function createRequestObject()

{

if (window.XMLHttpRequest) {

try {

return new XMLHttpRequest();

}

catch (e){}

}

else if (window.ActiveXObject) {

try {

return new ActiveXObject('Msxml2.XMLHTTP');

}

}

catch (e){}

}

}

return null;

}

Следующим этапом является установка обработчика событий:

req.onreadystatechange = processReqChange;

Затем открывается соединение

req.open(<"GET"|"POST"|...>, <url>, <asyncFlag>);

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

req.send(null);

Если необходимо передать на сервер POST-данные, их надо передать в качестве параметра для этой функции. POST-данные должны быть свернуты в URL-escaped строку в кодировка UTF-8 и добавлен заголовок req.setRequestHeader ("Content-Type", "application/x-www-form-urlencoded");.

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

<script type="text/javascript">

var req;

var reqTimeout;

function loadXMLDoc(url) {

req = null;

if (window.XMLHttpRequest) {

try {

req = new XMLHttpRequest();

} catch (e){}

} else if (window.ActiveXObject) {

try {

req = new ActiveXObject('Msxml2.XMLHTTP');

} catch (e){

try {

req = new ActiveXObject('Microsoft.XMLHTTP');

} catch (e){}

}

}

if (req) {

req.onreadystatechange = processReqChange;

req.open("GET", url, true);

req.send(null);

reqTimeout = setTimeout("req.abort();", 5000);

} else {

alert("Браузер не поддерживает AJAX");

}

}

function processReqChange() {

document.form1.state.value = stat(req.readyState);

if (req.readyState == 4) {

clearTimeout(reqTimeout);

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>

<td width=70%><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>

</tr>

<tr>

<td valign=top>Данные от сервера</td>

<td><textarea rows=6 name=response></textarea></td>

</tr>

<tr>

<td>Строка GET-запроса<td>

<td></td>

</tr>

</table>

<input type=text name=getparams value="?">

<input type=button onclick="requestdata(getparams.value);" value="GET">

</form>

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);

echo "Hello world!\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);

}

?>

Передача данных клиенту может происходить через файлы. Например

url = 'http://localhost/xml/checkUserName.php?q=' \\

+ input;

loadXMLDoc(url);

В файле localhost/xml/checkUserName.php мы обрабатываем данные, полученные из командной строки в данном случае в переменной q. А результат сохраняем в XML структуре, которую храним в этом же файле.