XMLHttpRequest – мечта веб разработчика

Рубрика: DOM - Объектная Модель Документа

Доброго времени суток, уважаемые читатели блога okITgo.ru! С помощью объекта XMLHttpRequest Вы можете обновлять части веб страницы без полной перезагрузки всей страницы целиком.

Объект XMLHttpRequest используется для обмена данными с сервером в фоновом режиме и является прямо-таки мечтой разработчика, поскольку Вы можете:

  • Обновлять веб страницу, не перезагружая ее
  • Запрашивать данные с сервера после того, как страница уже будет загружена
  • Получать данные с сервера после того, как страница уже будет загружена
  • Посылать данные на сервер в фоновом режиме


Создание Объекта XMLHttpRequest

Все современные браузеры (IE7+, Firefox, Chrome, Safari и Opera) имеют встроенный объект XMLHttpRequest.

Синтаксис для создания объекта XMLHttpRequest:

xmlhttp=new XMLHttpRequest();

Старые версии Internet Explorer (IE5 и IE6) используют Объект ActiveX:

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

Чтобы предусмотреть все современные браузеры, включая IE5 и IE6, проверяйте, поддерживает ли браузер объект XMLHttpRequest. Если да, создавайте объект XMLHttpRequest, если нет – то ActiveXObject:

Пример

if (window.XMLHttpRequest)
  {// код для IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// код для IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

Попробуйте сами »


Посылкаем Запрос На Сервер

Чтобы послать запрос на сервер, мы используем методы open() и send() объекта XMLHttpRequest:

xmlhttp.open("GET","xmlhttp_info.txt",true);
xmlhttp.send();

Метод Описание
open(метод, url, async) Указывает тип запроса, URL, и должен ли запрос обрабатываться асинхронно или нет

метод: тип запроса: GET или POST
url: расположение файла на сервере
async: true (асинхронная передача) или false (синхронная передача)
send(строка) Отправляет запрос на сервер.

строка: Используется только для POST запросов


GET или POST?

GET проще и быстрее, чем POST, и может использоваться в большинстве случаев.

Однако, всегда используйте запросы типа POST, когда:

  • Кэшированный файл не является возможной опцией (обновление файла или базы данных на сервере)
  • Посылаете большое количество данных на сервер (POST не имеет ограничений размера)
  • Посылаете строку, введенную пользователем (которая может содержать неизвестные символы), POST является более надежным и безопасным, чем GET

Адрес url – Файл На Сервере

Параметр url метода open() является адресом к файлу на сервере:

xmlhttp.open("GET","xmlhttp_info.txt",true);

Файл может быть произвольного типа, например .txt, или .xml, или файл скрипта наподобие файлов .asp и .php (которые могут выполнять определенные действия на сервере перед отправкой ответа назад).


Асинхронная Передача – Да или Нет?

Чтобы послать запрос асинхронно, параметр async метода the open() должен быть установлен в true (истина):

xmlhttp.open("GET","xmlhttp_info.txt",true);

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

Посылая запрос асинхронно, JavaScript не должен ждать ответа сервера, но вместо этого может:

  • выполнять другие скрипты, пока ожидается ответ сервера
  • обрабатывать ответ, когда он уже пришел

Асинхронная Передача

Когда задаете параметр асинхронной передачи async=true, указывайте в событии onreadystatechange функцию, которая начнет выполняться, как только придет ответ сервера:

Пример

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","xmlhttp_info.txt",true);
xmlhttp.send();

Попробуйте сами »


Синхронная Передача (async=false)

При использовании async=false, измените третий параметр метода open() на false (ложь):

xmlhttp.open("GET","xmlhttp_info.txt",false);

Использование async=false не рекомендуется, но для нескольких небольших запросов вполне приемлемо.

Только помните, что JavaScript НЕ продолжит выполнение, пока не придет ответ от сервера. Если сервер занят или происходят задержки иного сорта, приложение зависнет или остановится.

Замечание: Когда Вы используете async=false, НЕ пишите функцию onreadystatechange – просто поместите код после предложения send():

Пример

xmlhttp.open("GET","xmlhttp_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

Попробуйте сами »


Ответ Сервера

Чтобы получить ответ от сервера, используйте свойство responseText или responseXML объекта XMLHttpRequest.

Свойство Описание
responseText получить данные ответа в виде строки
responseXML получить данные ответа в виде XML данных


Свойство responseText

В ответе от сервера находится не XML, используйте свойство responseText.

Свойство responseText возвращает ответ как строку, и Вы можете использовать ее соответствующим образом:

Пример

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

Попробуйте сами »


Свойство responseXML

Если ответ сервера содержит XML, и Вы хотите разбирать его как XML объект, используйте свойство responseXML:

Пример

Запросить файл cd_catalog.xml и разобрать ответ:

xmlDoc=xmlhttp.responseXML;
var txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
  {
  txt=txt + x[i].childNodes[0].nodeValue + "";
  }
document.getElementById("myDiv").innerHTML=txt;

Попробуйте сами »


Событие onreadystatechange

После того, как запрос на сервер послан, мы как правило хотим выполнить определенныее действия с ответом, который получим.

Событие onreadystatechange происходит каждый раз, когда readyState изменяется.

Свойство readyState содержит статус XMLHttpRequest.

Три наиболее важных свойства объекта XMLHttpRequest:

Свойство Описание
onreadystatechange Сохраняет функцию (или имя функции), которую надо вызывать автоматически каждый раз, как только изменяется свойство readyState
readyState Содежит статус XMLHttpRequest. Изменяется от 0 до 4:
0: запрос не инициализирован
1: соединение с сервером установлено
2: запрос получен
3: обработка запроса
4: запрос завершен и получен ответ
status 200: "Все в порядке (сервер доступен)"
404: Страница не найдена

В событии onreadystatechange мы указываем, что пройзойдет, когда ответ сервера будет готов к обработке.

Когда readyState равно 4 и status равно 200, ответ сервера готов:

Пример

xmlhttp.onreadystatechange=function()
{
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

Попробуйте сами »

Замечание: Событие onreadystatechange происходит четыре раза, по разу на каждое изменение в readyState.


Дополнительные Примеры

Получить заголовочную информацию с помощью getAllResponseHeaders()
Получение информации о всех заголовках ресурса (файла).

Получить информацию указанного заголовка посредством getResponseHeader()
Получение информации из конкретного заголовка ресурса (файла).

Получить содержимое PHP файла
Как веб страница может взаимодействовать с веб сервером, когда пользователь набирает символы в поле ввода.

Извлечь контент из базы данных
Как веб страница может извлекать информацию из базы данных, используя объект XMLHttpRequest.

Получение содержимого XML файла
Попробуйте создать объект XMLHttpRequest для получения данных из XML файла и отображения этих данных в HTML таблице.

Удачи Вам и до новых встреч на страницах сайта okITgo.ru.

Один отзыв на «XMLHttpRequest – мечта веб разработчика»

  1. jawhien пишет:

    Здравствуйте. Спасибо за материал, очень полезный. только есть проблемка. При асинхронном запросе пока он выполняется, нажатие клавиши esc прерывает его. в результате действие ещё выполняется, а скрипт уже нет. по хорошему нужно навесить событие, чтобы отменять действие, но вся суть в том, что это невозможно. и сам вопрос: можно ли это как-нибудь обойти? т.е., чтобы при нажатии esc, запрос не прерывался.