Объект XMLHttpRequest

Объект XMLHttpRequest предоставляет методы для обмена сообщениями с сервером после загрузки веб-страницы.

Что такое объект XMLHttpRequest?

Объект XMLHttpRequestМечта разработчикаЭто потому что вы можете:

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

Все современные браузеры поддерживают объект XMLHttpRequest.

Пример:Вести XML HTTP коммуникацию с сервером при вводе текста.

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

Создание объекта XMLHttpRequest можно выполнить с помощью одной строки простого JavaScript-кода.

В всех современных браузерах (включая IE 7):

xmlhttp=new XMLHttpRequest()

В Internet Explorer 5 и 6:

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")

Пример

<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
  { код для всех новых браузеров}
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  { код для IE5 и IE6}
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=state_Change;
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
  }
else
  {
  alert("Ваш браузер не поддерживает XMLHTTP.");
  }
}
function state_Change()
{
if (xmlhttp.readyState==4)
  { // 4 = "loaded"}
  if (xmlhttp.status==200)
    { 200 = OK}
    // ... наш код здесь...
    }
  else
    {
    alert("Problem retrieving XML data");
    }
  }
}
</script>

TIY

Комментарий:onreadystatechange - это обработчик событий. Его значение (state_Change) - это имя функции, которая вызывается при изменении состояния объекта XMLHttpRequest. Состояние изменяется от 0 (неинициирован) до 4 (полностью завершен). Мы выполняем код только когда состояние равно 4.

Почему использовать Async=true ?

Наш пример использует "true" в третьем параметре метода open().

Этот параметр определяет, обрабатывается ли запрос асинхронно.

True означает, что скрипт продолжит выполняться после метода send(), не дожидаясь ответа от сервера.

Событие onreadystatechange усложняет код. Но это наиболее безопасный способ предотвратить остановку кода без получения ответа от сервера.

Установив этот параметр в "false", можно избежать дополнительного кода onreadystatechange. Если выполнение其余ого кода не важно при неудачном запросе, можно использовать этот параметр.

TIY

Более примеров

Загрузка textfile в элемент div через XML HTTP

HEAD-запрос через XML HTTP

Определенный HEAD-запрос через XML HTTP

Список данных XML-файла через XML HTTP

XML / ASP

Вы также можете открыть XML-документ и отправить его на ASP-страницу на сервере, проанализировать этот запрос, а затем вернуть результат.

<html>
<body>
<script type="text/javascript">
xmlHttp=null;
if (window.XMLHttpRequest)
  {// code for IE7, Firefox, Opera, etc.
  xmlHttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code for IE6, IE5
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlHttp!=null)
  {
  xmlHttp.open("GET", "note.xml", false);
  xmlHttp.send(null);
  xmlDoc=xmlHttp.responseText;
  xmlHttp.open("POST", "demo_dom_http.asp", false);
  xmlHttp.send(xmlDoc);
  document.write(xmlHttp.responseText);
  }
else
  {
  alert("Ваш браузер не поддерживает XMLHTTP.");
  }
</script>
</body>
</html>

Страница ASP, написанная на VBScript:

<%
set xmldoc = Server.CreateObject("Microsoft.XMLDOM")
xmldoc.async=false
xmldoc.load(request)
for each x in xmldoc.documentElement.childNodes
   if x.NodeName = "to" then name=x.text
next
response.write(name)
%>

Возврат результатов клиенту через использование свойства response.write.

TIY

Является ли объект XMLHttpRequest стандартом W3C?

Ни один рекомендованный стандарт W3C не определяет объект XMLHttpRequest.

Однако спецификация "Load and Save" уровня 3 W3C DOM включает了一些 схожие функциональные возможности, но ни один браузер их не реализовал.

См. также

Указатель XML DOM: Объект XMLHttpRequest