Инструменты пользователя

Инструменты сайта


xmlhttprequest

XMLHttpRequest

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

XMLHttpRequest работает только с файлами, находящимися на том же домене, что и использующая XMLHttpRequest страница. Как и в случае JavaScript, это сделано в целях безопасности (XSS (cross-site scripting)).

Возможности 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);
}
URL не начинающиеся с названия протокола(например, http:)называются относительными, то есть они интерпретируются относительно текущего документа. Когда они начинаются со слеша (/), они заменяют текущий путь – часть после названия сервера. В ином случае часть текущего пути вплоть до последнего слеша помещается перед относительным URL.

Свойства и методы XHR

Свойства:

  • readyState – представляет состояние документа по адресу URL. Список состояний readyState: 0 - Unitialized(не инициализирован), 1 - Loading (ввод), 2 - Loaded (отправлен), 3 - Interactive (идет обмен), 4 - Complete (завершен). Состояния 0-2 вообще не используются, на практике используется только Complete. Запрос XHR регулярно отчитывается о своем состоянии через вызов функции onreadystatechange.
  • status - содержит код ответа 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 -запрос через XmlHttpRequest ничем не отличается от обычного перехода на страницу.

Асинхронный XMLHttpRequest

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

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

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

Пример:

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 Level 2

xmlhttprequest.txt · Последние изменения: 2015/04/02 14:58 (внешнее изменение)

Яндекс.Метрика