AJAX - Объект XMLHttpRequest
Краеугольным камнем AJAX является объект XMLHttpRequest.
- Создать объект XMLHttpRequest
- Определить функцию обратного вызова
- Открыть объект XMLHttpRequest
- Отправить запрос на сервер
Объект XMLHttpRequest
Все современные браузеры поддерживают объект XMLHttpRequest.
Объект XMLHttpRequest можно использовать для скрытого обмена данными с веб-сервером. Это означает, что можно обновлять части веб-страницы без перезагрузки всей страницы.
Создать объект XMLHttpRequest
Все современные браузеры (Chrome, Firefox, IE, Edge, Safari, Opera) имеют встроенный объект XMLHttpRequest.
Синтаксис для создания объекта XMLHttpRequest:
variable = new XMLHttpRequest();
Определить функцию обратного вызова
Функция обратного вызова – это функция, которая передается в качестве параметра другой функции.
В этом случае функция обратного вызова должна содержать код для выполнения, когда ответ будет готов.
xhttp.onload = function() {
// Что делать, когда ответ готов
}
Отправить запрос
Чтобы отправить запрос на сервер, вы можете использовать методы open() и send() объекта XMLHttpRequest:
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Пример
// Создать объект XMLHttpRequest
const xhttp = new XMLHttpRequest();
// Определить функцию обратного вызова
xhttp.onload = function() {
// Здесь вы можете использовать данные
}
// Отправить запрос
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Попробуйте сами »
Доступ через домены
По соображениям безопасности современные браузеры не разрешают доступ между доменами.
Это означает, что и веб-страница, и XML-файл, который она пытается загрузить, должны находиться на одном сервере.
В примерах W3Schools все открытые XML-файлы расположены в домене W3Schools.
Если вы хотите использовать приведенный выше пример на одной из своих веб-страниц, загружаемые файлы XML должны находиться на вашем собственном сервере.
Методы объекта XMLHttpRequest
| Метод | Описание |
|---|---|
| new XMLHttpRequest() | Создает новый объект XMLHttpRequest |
| abort() | Отменяет текущий запрос |
| getAllResponseHeaders() | Возвращает информацию заголовка |
| getResponseHeader() | Возвращает конкретную информацию заголовка |
| open(method, url, async, user, psw) | Указывает метод запроса: тип запроса GET или POST url: расположение файла async: true (асинхронный) или false (синхронный) пользователь: необязательное имя пользователя psw: необязательный пароль |
| send() | Отправляет запрос на сервер Используется для запросов GET |
| send(string) | Отправляет запрос на сервер. Используется для запросов POST |
| setRequestHeader() | Добавляет пару метка/значение в заголовок для отправки |
Свойства объекта XMLHttpRequest
| Свойство | Описание |
|---|---|
| onload | Определяет функцию, которая будет вызываться при получении (загрузке) запроса |
| onreadystatechange | Определяет функцию, которая будет вызываться при изменении свойства readyState |
| readyState | Содержит статус XMLHttpRequest. 0: запрос не инициализирован 1: соединение с сервером установлено 2: запрос получен 3: обработка запроса 4: запрос завершен и ответ готов |
| responseText | Возвращает данные ответа в виде строки |
| responseXML | Возвращает данные ответа в виде данных XML |
| status | Возвращает статус-число запроса 200: "OK" 403: "Forbidden" 404: "Not Found" Полный список смотрите в Справочнике по Http сообщениям |
| statusText | Возвращает текст состояния (например, "OK" или "Not Found") |
Свойство onload
С помощью объекта XMLHttpRequest вы можете определить функцию обратного вызова, которая будет выполняться при получении ответа на запрос.
Функция определена в свойстве onload объекта XMLHttpRequest. :
Пример
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Попробуйте сами »
Несколько функций обратного вызова
Если на веб-сайте имеется более одной задачи AJAX, следует создать одну функцию для выполнения объекта XMLHttpRequest и одну функцию обратного вызова для каждой задачи AJAX.
Вызов функции должен содержать URL-адрес и функцию, которую нужно вызвать, когда ответ будет готов.
Пример
loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {cFunction(this);}
xhttp.open("GET", url);
xhttp.send();
}
function myFunction1(xhttp) {
// действие идет здесь
}
function myFunction2(xhttp) {
// действие идет здесь
}
Свойство onreadystatechange
Свойство readyState содержит статус XMLHttpRequest.
Свойство onreadystatechange определяет функцию обратного вызова, которая будет выполняться при изменении readyState.
Свойство status и свойство statusText содержат статус объекта XMLHttpRequest.
| Свойство | Описание |
|---|---|
| onreadystatechange | Определяет функцию, которая будет вызываться при изменении свойства readyState |
| readyState | Содержит статус XMLHttpRequest. 0: запрос не инициализирован 1: соединение с сервером установлено 2: запрос получен 3: обработка запроса 4: запрос завершен и ответ готов |
| status | 200: "OK" 403: "Forbidden" 404: "Page not found" Полный список смотрите в Справочнике Http Сообщений |
| statusText | Возвращает статус-текст (например "OK" или "Not Found") |
Функция onreadystatechange вызывается каждый раз при изменении readyState.
Когда readyState равно 4, а статус равен 200, ответ готов:
Пример
function loadDoc() {
const 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");
xhttp.send();
}
Попробуйте сами »
Событие onreadystatechange запускается четыре раза (1–4), по одному разу для каждого изменения в readyState.
