XMLHttpRequestОбъект

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

Объект XMLHttpRequest

Объект XMLHttpRequest используется для обмена данными с сервером в фоновом режиме.

The XMLHttpRequest object isмечта разработчика, потому что вы можете:

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

Создать объект 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; если нет — создайте объект ActiveX:

Пример

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(method,url,async)	Определяет тип запроса, URL и то, должен ли запрос обрабатываться асинхронно. method: Тип запроса: GET или POST url: Расположение файла на сервере async: true (асинхронный) или false (синхронный)
send(string)	Отправьте запрос на сервер. string: только для POST-запросов

GET или POST?

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

Однако всегда используйте POST-запросы в следующих случаях:

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

URL — файл на сервере

Параметр url метода open() — это адрес файла на сервере:

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

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

Асинхронность — True или False?

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

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

Отправка асинхронных запросов — огромное улучшение для веб-разработчиков. Многие задачи, выполняемые на сервере, отнимают много времени.

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

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

Async=true

При использовании 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	Свойство responseXML возвращает объект XML-документа, который можно исследовать и разбирать с помощью методов и свойств дерева узлов DOM.

Свойство responseText

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

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

Пример

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

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

Свойство responseXML

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

Пример

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

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："OK" 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().
Извлекает указанную информацию заголовка из ресурса (файла).

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

Как веб-страница извлекает информацию из базы данных с помощью объекта XMLHttpRequest.

Создать XMLHttpRequest для получения данных из XML-файла и отображения данных в HTML-таблице.

Другие расширения