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

В свойстве readyState хранится состояние объекта XMLHttpRequest.

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

В свойствах status и statusText хранится статус запроса объекта XMLHttpRequest.

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

Когда в свойстве 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 за время запроса генерируется четыре раза (1-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

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

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

Свойство responseXML

В объекте XMLHttpRequest есть встроенный XML парсер.

Свойство responseXML возвращает ответ сервера в виде объекта XML DOM.

Таким образом, используя это свойство вы можете обрабатывать ответ сервера в виде объекта XML DOM.

В следующем примере мы запросим файл cd_catalog.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", "cd_catalog.xml", true);
xhttp.send(); 

Метод getAllResponseHeaders()

Метод getAllResponseHeaders() возвращает полный список HTTP-заголовков ответа сервера.

Пример:

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();