Краеугольным камнем AJAX является объект XMLHttpRequest.
- Создаем объект XMLHttpRequest
- Определяем функцию обратного вызова
- Открываем объект XMLHttpRequest
- Отправить запрос на сервер
Объект XMLHttpRequest
Все современные браузеры поддерживают XMLHttpRequest объект.
Объект XMLHttpRequest может быть использован для обмена данными с веб сервером за кулисами. Это означает, что можно обновлять части веб страницы без перезагрузки всей страницы.
Создать объект XMLHttpRequest
Все современные браузеры (Chrome, Firefox, IE7+, Edge, Safari, Opera) имеют встроенный XMLHttpRequest объект.
Синтаксис для создания XMLHttpRequest объекта:
variable = new XMLHttpRequest();
var xhttp = new XMLHttpRequest();
Попробуйте сами »
Доступ через домены
По соображениям безопасности современные браузеры не разрешают доступ между доменами.
Это означает, что и веб страница, и XML файл, который он пытается загрузить, должны находиться на одном сервере.
Примеры на Schoolsw3 открывают все файлы XML, расположенные в домене Schoolsw3.
Если вы хотите использовать приведенный выше пример на одной из ваших собственных веб страниц, загружаемые файлы XML должны находиться на вашем собственном сервере.
Современные браузеры (Fetch API)
Современные браузеры могут использовать Fetch API вместо объекта XMLHttpRequest .
Интерфейс Fetch API позволяет веб браузеру выполнять HTTP запросы к веб серверам.
Если вы используете объект XMLHttpRequest , Fetch может сделать то же самое более простым способом.
Старые браузеры (IE5 и IE6)
Старые версии Internet Explorer (5/6) используют объект ActiveX вместо объекта XMLHttpRequest:
variable = new ActiveXObject("Microsoft.XMLHTTP");
Для работы с IE5 и IE6 проверьте, поддерживает ли браузер объект XMLHttpRequest, или создайте объект ActiveX:
if (window.XMLHttpRequest) {
// код для современных браузеров
xmlhttp = new XMLHttpRequest();
}
else {
// код для старых браузеров IE
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
Попробуйте сами »
Методы объекта XMLHttpRequest
| Метод | Описание |
|---|---|
| new XMLHttpRequest() | Создает новый объект XMLHttpRequest |
| abort() | Отменяет текущий запрос |
| getAllResponseHeaders() | Возвращает информацию заголовка |
| getResponseHeader() | Возвращает конкретную информацию заголовка |
| open(method, url, async, user, psw) | Определяет method запроса: тип запроса GET или POST url: расположение файла async: true (асинхронный) или false (синхронный) user: необязательное имя пользователя psw: необязательный пароль |
| send() | Отправляет запрос на сервер Используется для запросов GET |
| send(string) | Отправляет запрос на сервер. Используется для запросов POST |
| setRequestHeader() | Добавляет пару метка/значение в заголовок для отправки |
Свойства объекта XMLHttpRequest
| Свойство | Описание |
|---|---|
| onreadystatechange | Определяет функцию, которая будет вызываться при изменении свойства |
| readyState | Содержит статус XMLHttpRequest. 0: запрос не инициализирован 1: соединение с сервером установлено 2: запрос получен 3: запрос обработки 4: запрос завершен и ответ готов |
| responseText | Возвращает данные ответа в виде строки |
| responseXML | Возвращает данные ответа как данные XML |
| status | Возвращает статус-номер запроса. 200: "OK" 403: "Запрещено" 404: "Не найдено" Полный список см. в Справочнике по сообщениям HTTP. |
| statusText | Возвращает текст статуса (например, "ОК" или "Не найдено"). |