• Спецификация XMLHttpRequest Level 1
• XMLHTTPRequest: описание, применение, частые проблемы

XMLHttpRequest (XHR) - API, предоставляемый веб-клиентом, для обмена информацией между клиентом и сервером посредством протоколов Коды состояния HTTP. Методы и структура протокола HTTP и HTTPS. Хотя в названии присутствует аббревиатура XML, технология не накладывает ограничений на формат передаваемых данных. Информация может передаваться в любом текстовом формате, например, в xml, HTML или json. Основная задача объекта HttpRequest – отправлять get или Метод HTTP POST запросы.

Возможности XMLHttpRequest раскрываются полностью только тогда, когда вам необходимо сделать запрос GET или POST и обновить при этом только часть страницы. Такая необходимость возникает постоянно, и методы, используемые для достижения цели, далеко не самые оптимальные.

Традиционные пути решения проблемы обновления страницы — полная её перезагрузка. Варианты следующие:

1. Заставить пользователя нажать F5
2. Установить интервал обновления в теге META
3. Обновлять страницу с помощью JavaScript через определённый интервал
4. Подождать, пока пользователь не нажмёт кнопку, которая осуществляет нужный запрос

Недостаток всех перечисленных методов состоит в том, что обновление данных влечёт за собой полную перезагрузку страницы. И пользователь при этом обычно теряет текущую позицию просмотра на больших страницах. Кроме того, после перезагрузки теряются изменения, сделанные в других частях страницы (в других формах).

Предположим, что у нас есть страница, являющаяся порталом для управления сайтом. Одна её часть показывает журнал с действиями пользователей, другая – текущую загрузку, и третья отображает большие объёмы данных, которые приходится постоянно прокручивать. Если такая страница будет полностью перезагружаться, то с такой системой управления будет проблематично работать. Одну часть нужной информации мы можем просто пропустить, другую не заметить и т.п.

function getXMLHttpRequest()
{
    var request = new XMLHttpRequest();
    request.open("GET", 'url', false);//синхронный запрос
    request.send(null);
    if (request.status == 200) {
 
// Ответ сервера получен. Отобразить текст ответа.
}
else {
// Что-то пошло не так. Отобразить код ошибки и сообщение.
alert("Error " + request.status + ": " + request.statusText);
}

Свойства:

• readyState – представляет состояние документа по адресу Что такое ссылка URL. Список состояний readyState: 0 - Unitialized(не инициализирован), 1 - Loading (ввод), 2 - Loaded (отправлен), 3 - Interactive (идет обмен), 4 - Complete (завершен). Состояния 0-2 вообще не используются, на практике используется только Complete. Запрос XHR регулярно отчитывается о своем состоянии через вызов функции onreadystatechange.
• status - содержит код ответа Коды состояния HTTP. Методы и структура протокола HTTP (например, 200 - успех, 404 - страница не найдена), после того, как запрос завершился.
• statusText - текстовая строка сообщения о состоянии, полученная в ответе.
• responseText - содержит результирующий документ в виде текста.
• responseXML - содержит результирующий документ в виде текста xml.
• onreadystatechange - обработчик события, вызываемый при изменении состояния запроса.

Методы:

• open(method, URL, async, user, password) - создаёт (но не отправляет серверу) запрос с указанным URL.
  • параметр method: задает метод HTTP GET или POST. Доступны методы TRACE, DELETE, PUT.
  • URL: можно использовать например HTTP/HTTPS, FTP. Запрос со страницы можно отправлять только на тот домен и порт, с которого она пришла.
  • Параметр async: определяет, будет ли запрос асинхронным(true) или нет. Если запрос не асинхронный, вся страница блокируется, пока запрос не завершится.
  • user, password: параметры для HTTP-авторизации.
• send(data) - выполняет запрос. В случае GET запроса параметр data может быть null. В случае POST запроса, параметр data должен содержать данные.

• GET и POST-запросы. Кодировка.

Во время обычного submit'а формы браузер сам кодирует значения полей и составляет тело GET/POST-запроса для посылки на сервер. При работе через XmlHttpRequest, это нужно делать самим, в JavaScript -коде. У JavaScript есть функции encodeURIComponent и decodeURIComponent для кодирования и раскодирования.

• Выполнение асинхронных запросов с JavaScript и Ajax

В отличие от синхронного запроса, функция send() не останавливает выполнение скрипта, а просто отправляет запрос. Функция-обработчик onreadystatechange выполняет два действия:

1. определяет состояний (readyState) запрашиваемого документа, ждет состояния 4 - Complete
2. указывает функцию обратного вызова (callback). Функция обратного вызова позволяет серверу выполнить обратный вызов в коде вашей Web-страницы. Когда сервер завершает обработку запроса, он обращается к свойству onreadystatechange объект XMLHttpRequest. Затем активизирует любою функцию, указанную в этом свойстве.

Пример:

function sendFrWhois(form) {
    var xhr = new XMLHttpRequest();
    var params = 'job=whois&indomain=i.ua';
    xhr.open('POST', 'http://wiki.dieg.info/', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) { // игнорируются все состояния, кроме Complete (завершен)
            if(xhr.status >= 200 && xhr.status < 300)
            // спецификация HTTP определяет кода в диапазоне 200-209 как успех, а
            // от 300 и выше различные ошибки
            {
                 alert(xhr.responseText);
            }
        }
    }
    xhr.send('job=whois&indomain=i.ua');   
}

• Поддержка в браузерах XMLHttpRequest
• Спецификация XMLHttpRequest Level 2