Ответ сервера в AJAX

Свойство onreadystatechange

readyState Свойство сохраняет состояние XMLHttpRequest.

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

status Свойства statusText Свойство содержит состояние объекта XMLHttpRequest.

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

Сохраняет состояние XMLHttpRequest.

  • 0: Запрос не инициализирован
  • 1: Установлено соединение с сервером
  • 2: Запрос получен
  • 3: Обработка запроса
  • 4: Запрос завершен и ответ готов
status
  • 200: "OK"
  • 403: "Запрещено"
  • 404: "Страница не найдена"

Для полного списка, пожалуйста, посетите Референс-руководство по HTTP-сообщениям
statusText возвращает статус текста (например, "OK" или "Не найдено")

каждый раз readyState изменяется, вызывается функция onreadystatechange.

когда readyState для 4,status для 200 в то время как, ответ готов:

Пример

function loadDoc() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("demo").innerHTML =
            this.responseText;
       }
    };
    xhttp.open("GET", "ajax_info.txt", true);
    xhttp.send(); 
}

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

Комментарий:onreadystatechange вызывается пять раз (0-4), каждый раз readyState всё изменяется.

Использование функции обратного вызова

Функция обратного вызова - это функция, передаваемая в качестве параметра в другую функцию.

Если на вашем сайте несколько задач AJAX, вам следует создать функцию для выполнения объекта XMLHttpRequest и функцию обратного вызова для каждой задачи AJAX.

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

Пример

loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
  var xhttp;
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      cFunction(this);
    }
  };
  xhttp.open("GET", url, true);
  xhttp.send();
}
function myFunction1(xhttp) {
  // Действия здесь
 } 
function myFunction2(xhttp) {
  // Действия здесь
 }

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

Свойства серверного ответа

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

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

Метод Описание
getResponseHeader() Возвращает конкретные заголовки, возвращенные сервером
getAllResponseHeaders() Возвращает все заголовки, возвращенные сервером

Атрибут responseText

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

Пример

document.getElementById("demo").innerHTML = xhttp.responseText;

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

Атрибут responseXML

Объект XML HttpRequest имеет встроенный XML-анализатор.

ResponseXML свойства возвращает серверный ответ в виде объекта XML DOM.

Используя этот атрибут, вы можете получить ответАнализироватьДля XML DOM объекта:

Пример

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

xmlDoc = xhttp.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;
xhttp.open("GET", "music_list.xml", true);
xhttp.send();

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

Вы узнаете больше о XML DOM в разделе DOM этого руководства.

Метод getAllResponseHeaders()

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

Пример

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

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

Метод getResponseHeader()

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

Пример

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.getResponseHeader("Last-Modified");
  }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

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