AJAX — ответ сервера
Свойство onreadystatechange
Свойство readyState содержит статус XMLHttpRequest.
Свойство onreadystatechange определяет функцию, которая будет выполняться при изменении readyState.
Свойство status и свойство statusText содержат состояние объекта XMLHttpRequest.
| Property | Description |
|---|---|
| onreadystatechange | Defines a function to be called when the readyState property changes |
| readyState | Holds 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" 403: "Forbidden" 404: "Page not found" For a complete list go to the Http Messages Reference |
| statusText | Returns the status-text (e.g. "OK" or "Not Found") |
Функция onreadystatechange вызывается каждый раз при изменении readyState.
Когда readyState равен 4, а статус равен 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();
}
Файл «ajax_info.txt», используемый в приведенном выше примере, представляет собой простой текстовый файл и выглядит следующим образом:
<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a
technique for accessing web servers from a web page.</p>
<p>AJAX stands for
Asynchronous JavaScript And XML.</p>
Событие 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) {
// action goes here
}
function myFunction2(xhttp) {
// action goes here
}
Свойства ответа сервера
| Property | Description |
|---|---|
| responseText | get the response data as a string |
| responseXML | get the response data as XML data |
Методы ответа сервера
| Method | Description |
|---|---|
| getResponseHeader() | Returns specific header information from the server resource |
| getAllResponseHeaders() | Returns all the header information from the server resource |
Свойство responseText
Свойство responseText возвращает ответ сервера в виде строки JavaScript, и вы можете использовать его соответствующим образом:
Пример
document.getElementById("demo").innerHTML = xhttp.responseText;
Свойство responseXML
Объект XML HttpRequest имеет встроенный анализатор 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();
Вы узнаете намного больше о 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();