Объект XMLHttpRequest _
Все современные браузеры имеют встроенный объект XMLHttpRequest для запроса данных с сервера.
Все основные браузеры имеют встроенный анализатор XML для доступа к XML и управления им.
Объект XMLHttpRequest
Объект XMLHttpRequest можно использовать для запроса данных с веб-сервера.
Объект XMLHttpRequest — мечта разработчика , потому что вы можете:
- Обновите веб-страницу без перезагрузки страницы
- Запросить данные с сервера - после загрузки страницы
- Получить данные с сервера - после загрузки страницы
- Отправка данных на сервер - в фоновом режиме
Пример запроса XMLHttp
Когда вы вводите символ в поле ввода ниже, XMLHttpRequest отправляется на сервер, и возвращаются некоторые предложения имени (с сервера):
Пример
Start typing a name in the input field below:
Suggestions:
Отправка XMLHttpRequest
Все современные браузеры имеют встроенный объект XMLHttpRequest.
Общий синтаксис JavaScript для его использования выглядит примерно так:
Пример
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Action to be performed when the
document is read;
}
};
xhttp.open("GET", "filename", true);
xhttp.send();
Создание объекта XMLHttpRequest
Первая строка в приведенном выше примере создает объект XMLHttpRequest:
var xhttp = new XMLHttpRequest();
Событие onreadystatechange
Свойство readyState содержит статус XMLHttpRequest.
Событие onreadystatechange запускается каждый раз при изменении readyState.
Во время запроса к серверу readyState изменяется с 0 на 4:
0: запрос не инициализирован
1: соединение с сервером установлено
2: запрос получен
3: запрос обрабатывается
4: запрос завершен, ответ готов
В свойстве onreadystatechange укажите функцию, которая будет выполняться при изменении readyState:
xhttp.onreadystatechange = function()
Когда readyState равен 4, а статус равен 200, ответ готов:
if (this.readyState == 4 && this.status == 200)
Свойства и методы XMLHttpRequest
| Method | Description |
|---|---|
| new XMLHttpRequest() | Creates a new XMLHttpRequest object |
| open(method, url, async) | Specifies the type of request method: the type of request: GET or POST url: the file location async: true (asynchronous) or false (synchronous) |
| send() | Sends a request to the server (used for GET) |
| send(string) | Sends a request string to the server (used for POST) |
| onreadystatechange | A function to be called when the readyState property changes |
| readyState | The status of the XMLHttpRequest 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready |
| status | 200: OK 404: Page not found |
| responseText | The response data as a string |
| responseXML | The response data as XML data |
Доступ через домены
Из соображений безопасности современные браузеры не разрешают доступ между доменами.
Это означает, что и веб-страница, и XML-файл, который она пытается загрузить, должны находиться на одном сервере.
В примерах W3Schools все открытые XML-файлы расположены в домене W3Schools.
Если вы хотите использовать приведенный выше пример на одной из ваших собственных веб-страниц, загружаемые файлы XML должны находиться на вашем собственном сервере.
Свойство responseText
Свойство responseText возвращает ответ в виде строки.
Если вы хотите использовать ответ в виде текстовой строки, используйте свойство responseText:
Пример
document.getElementById("demo").innerHTML = xmlhttp.responseText;
Свойство responseXML
Свойство responseXML возвращает ответ в виде объекта XML DOM.
Если вы хотите использовать ответ как объект XML DOM, используйте свойство responseXML:
Пример
Запросите файл cd_catalog.xml и используйте ответ как объект XML DOM:
xmlDoc = xmlhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
ПОЛУЧИТЬ или ПОСТАВИТЬ?
GET проще и быстрее, чем POST, и может использоваться в большинстве случаев.
Однако всегда используйте POST-запросы, когда:
- Кэшированный файл не вариант (обновите файл или базу данных на сервере)
- Отправка большого количества данных на сервер (POST не имеет ограничений по размеру)
- Отправка пользовательского ввода (который может содержать неизвестные символы) POST более надежен и безопасен, чем GET.
URL - файл на сервере
Параметр url метода open() — это адрес файла на сервере:
xmlhttp.open("GET", "xmlhttp_info.txt", true);
Это может быть файл любого типа, например .txt и .xml, или файлы сценариев сервера, такие как .asp и .php (которые могут выполнять действия на сервере перед отправкой ответа обратно).
Асинхронность — правда или ложь?
Чтобы отправить запрос асинхронно, для параметра async метода open() должно быть установлено значение true:
xmlhttp.open("GET", "xmlhttp_info.txt", true);
Отправка асинхронных запросов — огромное улучшение для веб-разработчиков. Многие задачи, выполняемые на сервере, требуют очень много времени.
Отправляя асинхронно, JavaScript не должен ждать ответа сервера, а вместо этого может:
- выполнять другие скрипты, ожидая ответа сервера
- обрабатывать ответ, когда ответ готов
Асинхронный = правда
При использовании async = true укажите функцию для выполнения, когда ответ будет готов в событии onreadystatechange:
Пример
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "xmlhttp_info.txt", true);
xmlhttp.send();
Асинхронный = ложь
Чтобы использовать 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("demo").innerHTML = xmlhttp.responseText;
XML-парсер
Все современные браузеры имеют встроенный анализатор XML.
Объектная модель документа XML (XML DOM) содержит множество методов для доступа и редактирования XML.
Однако прежде чем к XML-документу можно будет получить доступ, он должен быть загружен в объект XML DOM.
Синтаксический анализатор XML может читать обычный текст и преобразовывать его в объект XML DOM.
Разбор текстовой строки
В этом примере текстовая строка преобразуется в объект XML DOM и извлекается из нее информация с помощью JavaScript:
Пример
<html>
<body>
<p id="demo"></p>
<script>
var text, parser,
xmlDoc;
text = "<bookstore><book>" +
"<title>Everyday
Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
Старые браузеры (IE5 и IE6)
Старые версии Internet Explorer (IE5 и IE6) не поддерживают объект XMLHttpRequest.
Для обработки IE5 и IE6 проверьте, поддерживает ли браузер объект XMLHttpRequest, или создайте ActiveXObject:
Пример
if (window.XMLHttpRequest) {
// code for modern browsers
xmlhttp = new XMLHttpRequest();
}
else {
// code for old IE browsers
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
Старые версии Internet Explorer (IE5 и IE6) не поддерживают объект DOMParser.
Для обработки IE5 и IE6 проверьте, поддерживает ли браузер объект DOMParser, или создайте ActiveXObject:
Пример
if (window.DOMParser) {
// code for modern browsers
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
}
else {
// code for old IE browsers
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(text);
}
Дополнительные примеры
Получить информацию о заголовке ресурса (файла).
Получить конкретную информацию о заголовке ресурса (файла).
Как веб-страница может обмениваться данными с веб-сервером, когда пользователь вводит символы в поле ввода.
Как веб-страница может получать информацию из базы данных с помощью объекта XMLHttpRequest.
Создайте XMLHttpRequest для извлечения данных из XML-файла и отображения данных в таблице HTML.