Обмен данными в Ajax

Вот мы подошли к самой функции создания объекта XMLHttpRequest. Сразу хочу сказать - абсолютно все популярные браузеры (IE7+, Firefox, Chrome, Safari и Opera) имеют встроенный объект XMLHttpRequest. Рассмотрим синтаксис:

Код JS

название_переменной = new XMLHttpRequest();

Однако дальше не всё так просто. Для старых браузеров, например, Internet Explorer (IE5 и IE6) используют ActiveX Object:

название_переменной = new ActiveXObject("Microsoft.XMLHTTP");

И не стоит игнорировать данное написание для старых версий IE, так как ещё есть пользователи, которые до сих пор пользуются Windows XP.

Код кроссбраузерного объекта XMLHttpRequest

Вот так выглядит создание кроссбраузерного объекта XMLHTTP:

Код JS (Ajax)

<script type="text/javascript">
  function getXmlHttp() {
    var xmlhttp;
    try {
      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
    try {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (E) {
      xmlhttp = false;
    }
    }
    if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
      xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
  }
</script>

Вначале пробуем создать объект в случае старых браузеров, затем для большинства современных. Объект готов. Теперь переходим к следующему уроку, чтобы посмотреть как с использованием 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.

Код JS

/*

Функция посылки запроса к файлу на сервере
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);
 }
}

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