AJAX - обработка ответа сервером

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

Функция ответа onreadystatechange определена в атрибутах объекта XMLHttpRequest.

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

Атрибут onreadystatechange определяет функцию, которая будет выполняться при изменении readyState.

Атрибут readyState сохраняет состояние объекта XMLHttpRequest.

Атрибут status сохраняет состояние кода объекта XMLHttpRequest.

Атрибут statusText сохраняет текст состояния объекта XMLHttpRequest.

Атрибуты ответа сервера

В таблице ниже перечислены атрибуты ответа сервера:

Атрибут responseText

Атрибут responseText возвращает ответ сервера в виде строки JavaScript.

document.getElementById("output").innerHTML = httpRequest.responseText;

Атрибут responseXML

Атрибут responseXML возвращает ответ сервера в виде объекта XMLDocument.

Вы можете использовать функции DOM JavaScript для遍ения объекта XMLDocument.

Ниже приведен пример файла запросаajax_test.xmlи анализировать ответ:

xmlDoc = httpRequest.responseXML;
tag = xmlDoc.getElementsByTagName("author");
for (let i = 0; i < tag.length; i++) {
　　　　txt += tag[i].childNodes[0].nodeValue + "<br>";
}
httpRequest.open("GET", "ajax_test.xml", true);
httpRequest.send();

Методы ответа сервера

В таблице ниже перечислены методы ответа сервера:

Метод getAllResponseHeaders()

Метод getAllResponseHeaders() возвращает все заголовки информации из ответа сервера.

var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
　　if (this.readyState === 4 && this.status === 200) {
　　　　　document.getElementById("output").innerHTML = this.getAllResponseHeaders();
　　}
};

Метод getResponseHeader()

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

var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
　　if (this.readyState === 4 && this.status === 200) {
　　　　　document.getElementById("output").innerHTML = this.getResponseHeader("Server");
　　}
};

Множественные задачи AJAX

Если на сайте есть несколько задач AJAX, то следует создать две функции:

• Функция для выполнения объекта XMLHttpRequest

• У каждой задачи AJAX есть обратная функция

Вызов функции должен содержать URL и функцию, которая будет вызываться после готовности ответа.

fetchDoc("url-1", myFunc1);
fetchDoc("url-2", myFunc2);
fetchDoc("url-3", myFunc3);
function fetchDoc(url, callback) {
　　var httpRequest = new XMLHttpRequest();
　　httpRequest.onreadystatechange = function() {
　　　if (this.readyState === 4 && this.status === 200) {
　　　　　　　　callback(this);
　　　　}
　　};
　　httpRequest.open("GET", url, true);
　　httpRequest.send();
}
function myFunc1(httpRequest) {
　　// действие происходит здесь
}
function myFunc2(httpRequest) {
　　// действие происходит здесь
}
function myFunc3(httpRequest) {
　　// действие происходит здесь
}

Обратная функция вызывается в качестве параметра переданной другой функции.