Главная Случайная страница Контакты | Мы поможем в написании вашей работы! | ||
|
Класс XMLHttpRequest впервые был реализован компанией Microsoft в браузере Internet Explorer 5.0 в виде объекта ActiveX, доступного через JScript. Программисты проекта Mozilla разработали совместимую версию класса XMLHttpRequest. В дальнейшем эта возможность также была реализована компаниями Apple, Opera и другими.
Класс XMLHttpRequest входит в набор API (XMLHTTP), используемый в JavaScript, для пересылки данных по HTTP-протоколу между браузером и веб-сервером. Кроме пересылки XML, по XMLHTTP можно обмениваться данными формы или текстовыми строками. Объект-запрос XMLHttpRequest выполняет одну из функций браузера- формирование и передачу запроса Web-серверу.
Запрос надо создать, открыть методом open(), а затем передать его методом send().
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send(null); }
В методе open() третий параметр async – флаг асинхронного выполнения. Если
async= true, метод send() сразу же вернет управление сценарию. В этом случае пользователь сможет продолжить работу с документом, пока запрос будет пересылаться к серверу и обратно. При получении ответа от сервера, управление должно перейти к функции обратного вызова, задаваемую свойством onreadystatechange класса XMLHttpRequest. С помощью свойства readyState проверяется состояние процесса обработки запроса (readyState = 4 окончание), необходимые данные извлекаются из свойств responseText или responseXML.
Методы класса XMLHttpRequest
abort() - отменяет текущий запрос;
getAllResponseHeaders() - возвращает список всех HTTP-заголовков в виде строки;
getResponseHeader(headerName) - возвращает значение указанного заголовка;
open(method, URL, async, userName, password) - определяет метод, URL, имя и пароль запроса; async=true/false определяет, происходит ли работа в асинхронном режиме;
send(content) - отправляет запрос на сервер
setRequestHeader(label, value) - добавляет HTTP-заголовок к запросу;
Свойства класса XMLHttpRequest
onreadystatechange - обработчик события, которое будет происходить при смене состояния объекта.
readyState -возвращает текущее состояние объекта (0 — не инициализирован, 1 — открыт, 2 — отправка, 3 — получение данных, 4 — данные загружены).
responseText - текст ответа на запрос; responseXML - текст ответа на запрос в виде XML, который затем может быть распарсен посредством DOM
status - возвращает HTTP-статус в виде числа (404 — «Not Found», 200 — «OK»)
statusText - возвращает статус в виде строки («Not Found», «OK» и т. д.)
Создание экземпляра объекта 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) {
// проверка наличия window.XMLHttpRequest
try {
return new XMLHttpRequest();
} catch (e){}
} else if (window.ActiveXObject)
{ проверка наличия 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");.
После этого начинает работать вышеуказанный обработчик событий. Он — фактически основная часть программы. В обработчике обычно происходит перехват всех возможных кодов состояния запроса и вызов соответствующих действий, а также перехват возможных ошибок. Пример куска кода:
function processReqChange()
{
try { // Важно!
// только при состоянии "complete"
if (req.readyState == 4) {
// для статуса "OK"
if (req.status == 200) {
// здесь идут всякие штуки с полученным ответом
} else {
alert("Не удалось получить данные:\n" +
req.statusText);
}
}
}
catch(e) { }
}
Приведем код всего AJAX-приложения:
//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);
}
?>
Дата публикования: 2014-11-18; Прочитано: 498 | Нарушение авторского права страницы | Мы поможем в написании вашей работы!