Основы AJAX

AJAX XMLHttpRequest

Введение в AJAX

AJAX позволяет «асинхронно» обновлять содержимое веб-страницы, обмениваясь данными с веб-сервером на заднем плане.

Это означает, что можно обновить некоторые части веб-страницы, не перезагружая её целиком.

Используя AJAX, вы можете:

Отправка данных на веб-сервер (в фоновом режиме)
Чтение данных с веб-сервера (после загрузки страницы)
Обновление веб-страницы без перезагрузки

Пример AJAX

Следующий код показывает базовый пример AJAX:

AJAX изменит этот текст

Запуск кода

Объяснение примера AJAX

В aforementioned пример включены следующие части:

HTML-код:

　　<!DOCTYPE html>
　　<html>
　　
　　<div id="output">
　　<h2>AJAX изменит этот текст</h2>
　　<button onclick="fetchDoc()" type="button">Отправить запрос</button>
　　</div>
　　
　　</html>

HTML-код содержит<div>отдельные части (<h2>и<button>).

Указанное<DIV>отдельные части предназначены для отображения информации, поступающей от сервера.

Указанное<button>вызов функции (при нажатии).

Эта функция запрашивает данные с веб-сервера и отображает их (без перезагрузки страницы):

Функция fetchDoc():

　　function fetchDoc() {
　　var httpRequest = new XMLHttpRequest();
　　httpRequest.onreadystatechange = function() {
　　　if (this.readyState === 4 && this.status === 200) {
　　　　document.getElementById("output").innerHTML = this.responseText;
　　　}
　　};
　　httpRequest.open("GET", "ajax_intro.txt", true);
　　httpRequest.send();
　　}

Что такое AJAX?

AJAX - это “Asynchronous Javascript And XML” (асинхронный JavaScript и XML).

AJAX не является языком программирования, это технология для доступа к веб-серверам с веб-страницы.

AJAX позволяет вам отправлять запросы на сервер, не перезагружая страницу.

AJAX может communicate с сервером, обмениваться данными и обновлять страницу, не обновляя страницу.

AJAX может отправлять и получать информацию различных форматов, включая JSON, XML, HTML и текстовые файлы.

Короче говоря, это использование объекта XMLHttpRequest для communication с сервером.

Две основные функции AJAX позволяют вам выполнять следующие действия:

Отправка запроса на сервер без перезагрузки страницы
Получение и обработка данных с сервера

Как работает AJAX?

Для выполнения communication AJAX JavaScript использует объект XMLHttpRequest для отправки HTTP-запроса к серверу и получения данных в ответ.

Все moderno браузеры (Chrome, Firefox, IE7 +, Safari, Opera) поддерживают объект XMLHttpRequest.

На следующем рисунке показано, как работает comunicación AJAX:

Шаги AJAX-операции

Произошло событие на веб-странице (например, страница загружена или был нажат кнопка)
Объект XMLHttpRequest создается с помощью JavaScript
Объект XMLHttpRequest отправляет запрос на веб-сервер
Сервер обрабатывает запрос
Сервер отправляет ответ обратно на веб-страницу
Ответ читается с помощью JavaScript
HTML DOM обновляется с помощью JavaScript

Что вы узнаете

В следующей главе этого учебника вы узнаете:
Как создать объект XMLHttpRequest
Как отправлять данные на веб-сервер (в фоновом режиме)
Как считывать данные с веб-сервера (в фоновом режиме)
Как обновить веб-страницу без перезагрузки страницы

AJAX XMLHttpRequest