Объект XMLHttpRequest в AJAX
- Предыдущая страница Обзор AJAX
- Следующая страница Запрос AJAX
Объект XMLHttpRequest является основой AJAX.
- Создание объекта XMLHttpRequest
- Определяем callback функцию
- Открытие объекта XMLHttpRequest
- Отправка запроса на сервер
Объект XMLHttpRequest
Все современные браузеры поддерживают Объект XMLHttpRequest.
Объект XMLHttpRequest используется для обмена данными с веб-сервером в фоновом режиме. Это означает, что можно обновлять часть содержимого веб-страницы, не перезагружая всю страницу.
Создание объекта XMLHttpRequest
Все современные браузеры (Chrome, Firefox, IE, Edge, Safari, Opera) имеют встроенный Объект XMLHttpRequest.
Синтаксис создания объекта XMLHttpRequest:
variable = new XMLHttpRequest();
Определяем callback функцию
Callback функция - это функция, передаваемая в качестве параметра другой функции.
В этом случае, callback функция должна содержать код, который нужно выполнить при готовности ответа.
xhttp.onload = function() {
// Что нужно сделать при готовности ответа
}
отправка запроса
Чтобы отправить запрос на сервер, вы можете использовать объект XMLHttpRequest для open() и send() Метод:
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Пример
// Создаем объект XMLHttpRequest
const xhttp = new XMLHttpRequest();
// Определяем callback функцию
xhttp.onload = function() {
// Здесь вы можете использовать данные
}
// Отправка запроса
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Кросс-доменное доступ (Access Across Domains)
Из соображений безопасности, современные браузеры не позволяют跨域访问.
Это означает, что веб-страница и XML-файл, который она пытается загрузить, должны быть расположены на одном и том же сервере.
Примеры на CodeW3C.com открывают XML-файлы, расположенные в домене CodeW3C.com.
Если вы хотите использовать上面的 пример на одном из своих веб-страниц, загружаемый вами XML-файл должен быть расположен на вашем собственном сервере.
методы объекта XMLHttpRequest
| метод | Описание |
|---|---|
| new XMLHttpRequest() | создает новый объект XMLHttpRequest. |
| abort() | отменяет текущий запрос. |
| getAllResponseHeaders() | возвращает информацию заголовка. |
| getResponseHeader() | возвращает специфическую информацию заголовка. |
| open(method, url, async, user, psw) |
определяет запрос.
|
| send() | Отправляет запрос на сервер, используется для GET-запросов. |
| send(string) | Отправляет запрос на сервер, используется для POST-запросов. |
| setRequestHeader() | Добавляет парный тег/значение в заголовки, которые нужно отправить. |
Свойства объекта XMLHttpRequest
| Свойства | Описание |
|---|---|
| onload | Определяет функцию, которая вызывается при получении (загрузке) запроса. |
| onreadystatechange | Определяет функцию, которая вызывается при изменении свойства readyState. |
| readyState |
Сохраняет состояние XMLHttpRequest
|
| responseText | Возвращает данные ответа в виде строки |
| responseXML | Возвращает данные ответа в виде XML |
| status |
Возвращает статус запроса
Для получения полного списка посетите Http сообщений руководство |
| statusText | Возвращает текст состояния (например, "OK" или "Not Found") |
Свойство onload
Используя объект XMLHttpRequest, вы можете определить回调-функцию, которая будет выполняться при получении ответа на запрос.
Пожалуйста, определите функцию в свойстве XMLHttpRequest объекта: onload Функция определена в свойстве:
Пример
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) {
// Здесь находится действие
}
Свойство onload
readyState Свойства сохраняют состояние XMLHttpRequest
onreadystatechange Свойства определяют回调-функцию, которая вызывается при изменении свойств readyState
status Свойства и statusText Свойства сохраняют состояние объекта XMLHttpRequest
| Свойства | Описание |
|---|---|
| onreadystatechange | Определяет функцию, которая вызывается при изменении свойства readyState |
| readyState |
Сохраняет состояние XMLHttpRequest
|
| status |
Возвращает статус запроса
Для получения полного списка посетите Http сообщений руководство |
| statusText | statusText |
Возвращает текст состояния (например, "OK" или "Не найдено").
Функция onreadystatechange вызывается каждый раз, когда изменяется readyState. 4 и status равен 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.
- Предыдущая страница Обзор AJAX
- Следующая страница Запрос AJAX
