аватар Автор: Сергей Касаткин | 15 июня 2013 10:58

Уроки / Ajax /

Методы и свойства объекта XMLHttpRequest

Указанные ниже методы и свойства объекта XMLHttpRequest актуальны для Internet Explorer 5+, Mozilla, Netscape 7 и Safari 1.2.

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


Хочу сразу обратить внимание на то, что названия методов написаны в том же стиле, что и JavaScript. При написании будьте внимательны.

open(тип_запроса, URL, асинхронный, имя_пользователя, пароль) - запрос к серверу с указанием:

типа запроса (обязательный параметр) - используется GET или POST, но доступны также TRACE/DELETE/PUT;
url (обязательный параметр) - адрес запроса. Можно использовать не только протокол HTTP/HTTPS, но и, например, FTP и FILE://.;
асинхронный (булево значение - соответственно true или false) - true для использования асинхронных запросов;
userName, password - данные HTTP-аутентификации;

Внимание! Данные по userName, password небезопасно хранить в скрипте, в особенности на клиентской части, так как данные аутентификации будут доступны сторонним пользователям.

Варианты вызова:
open( method, URL )
open( method, URL, async )
open( method, URL, async, userName )
open( method, URL, async, userName, password )

send(содержимое) - отправка запроса HTTP на сервер и получение ответа. В качестве аргумента - тело запроса. Поскольку для GET-запроса тела нет, надо писать send(null), для POST-запросов тело содержит параметры запроса.

abort() - текущий запрос отменяем. У браузера есть лимит - два одновременных подключения к домену-порту. Третье будет открыто только после завершения сеанса одно из предыдущих двух (по таймауту).

xmlhttp.abort()


getAllResponseHeaders() - запрашиваем все заголовки ответа от сервера. Возвращает строку со всеми HTTP-заголовками ответа сервера.

getResponseHeader(имя_заголовка) - запрос на определённый заголовок.

setRequestHeader(имя_заголовка,значение) - устанавливаем заголовок и значение запроса. Если заголовок уже есть, то он заменяется. Пример:

xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')


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


onreadystatechange - одно из основных свойств объекта XMLHttpRequest. Ссылается на функцию-обработчик состояний запроса, которая вызывается каждый раз при смене статуса объекта. В некоторых браузерах функция имеет аргумент - событие. Не используйте его, он совершенно лишний.

readyState - номер состояния запроса. От 0 до 4:

0 - не инициализирован (перед началом работы объекта),
1 - загрузка (однажды, когда идет инициализация объекта),
2 - загружен (однажды, когда получен ответ от сервера),
3 - доступен (пока объект соединен с сервером),
4 - завершен (после того, как объект выполнил все задачи).

responseText - представление ответа сервера в виде обычного текста (строки). Полный текст есть только при readyState=4, ряд браузеров дают доступ к полученной части ответа сервера при readyState=3.

responseXML - объект документа, совместимый с DOM, полученного от сервера.

status - состояние ответа от сервера. Например, для HTTP-запросов - статусный код ответа сервера: 200 - OK, 404 - Not Found, и так далее. Запросы по протоколам FTP, FILE:// не возвращают статуса, поэтому нормальным для них является status=0.

statusText - текстовое представление состояния ответа от сервера. Например, Not Found или OK

Пример работы с обектом XMLHttpRequest


План работы с объектом XMLHttpRequest можно представить так:

1. Создание объекта XMLHttpRequest.
2. Установка обработчика события onreadystatechange.
3. Открытие соединения с сервером методом open.
4. Отправка запроса методом send.

Код Ajax

/*
Функция посылки запроса к файлу на сервере
r_method - тип запроса: GET или POST
r_path - путь к файлу
r_args - аргументы вида a=1&b=2&c=3...
r_handler - функция-обработчик ответа от сервера
*/
function SendRequest(r_method, r_path, r_args, r_handler)
{
 //Создаём запрос
 var Request = CreateRequest();
 
 //Проверяем существование запроса еще раз
 if (!Request)
 {
 return;
 }
 
 //Назначаем пользовательский обработчик
 Request.onreadystatechange = function()
 {
 //Если обмен данными завершен
 if (Request.readyState == 4)
 {
 //Передаем управление обработчику пользователя
 r_handler(Request);
 }
 }
 
 //Проверяем, если требуется сделать GET-запрос
 if (r_method.toLowerCase() == "get" && r_args.length > 0)
 r_path += "?" + r_args;
 
 //Инициализируем соединение
 Request.open(r_method, r_path, true);
 
 if (r_method.toLowerCase() == "post")
 {
 //Если это POST-запрос
 
 //Устанавливаем заголовок
 Request.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf-8");
 //Посылаем запрос
 Request.send(r_args);
 }
 else
 {
 //Если это GET-запрос
 
 //Посылаем нуль-запрос
 Request.send(null);
 }
}


Спасибо за внимание!
 



Похожие статьи


Комментарии к статье (vk.com)