AJAX - ответ сервера
Свойство onreadystatechange
Свойство readyState имеет статус XMLHttpRequest.
Свойство onreadystatechange определяет функцию, которая будет выполняться при изменении состояния readyState.
Свойство status и statusText содержат статус объекта XMLHttpRequest.
| Свойство | Описание |
|---|---|
| onreadystatechange | Определяет функцию, вызываемую при изменении свойства readyState |
| readyState | Имеет статус XMLHttpRequest. 0: запрос не инициализирован 1: установлено соединение с сервером 2: запрос получен 3: обработка запроса 4: запрос завершен и готов ответ. |
| status | 200: "ДА" 403: "Запрещенный" 404: "Страница не найдена" Для получения полного списка перейдите в раздел Справочник Http сообщений |
| statusText | Возвращает текст состояния (напр. "ДА" или "Не найдено") |
Функция onreadystatechange вызывается при каждом изменении состояния readyState.
When 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();
}
Попробуйте сами »
Событие 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 | получить данные ответа в виде строки |
| responseXML | получить данные ответа в виде XML данных |
Методы ответа сервера
| Методы | Описание |
|---|---|
| getResponseHeader() | Возвращает определенную информацию заголовка из ресурса сервера |
| getAllResponseHeaders() | Возвращает всю информацию заголовка из ресурса сервера |
Свойство responseText
Свойство responseText возвращает ответ сервера в виде строки JavaScript
и вы можете использовать его соответствующим образом:
Свойство 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();
Попробуйте сами »
Вы узнаете гораздо больше о 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();
Попробуйте сами »
