JavaScript AJAX Введение
AJAX - мечта разработчика, потому что вы можете:
- Считывать данные с веб сервера - после загрузки страницы
- Обновить веб страницу без перезагрузки страницы
- Отправка данных на веб сервер - в фоновом режиме
Объяснение примера AJAX
Страница HTML
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>Разрешить AJAX изменить этот текст </h2>
<button type="button" onclick="loadDoc()">Изменить содержимое</button>
</div>
</body>
</html>
HTML страница содержит раздел <div> и <button>.
Раздел <div> используется для отображения информации с сервера.
<button> вызывает функцию (если по ней щелкнуть).
Функция запрашивает данные с веб сервера и отображает их:
Функция loadDoc()
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();
}
Что такое AJAX?
AJAX = Asynchronous JavaScript AndXML.
AJAX это не язык программирования.
AJAX просто использует комбинацию:
- Встроенный
XMLHttpRequestобъект браузера (для запроса данных с веб сервера) - JavaScript и HTML DOM (для отображения или использования данных)
Название AJAX вводит в заблуждение. Приложения AJAX могут использовать XML для передачи данных, но не менее распространено перенос данных в виде простого текста или текста JSON.
AJAX позволяет обновлять веб страницы асинхронно, негласно обмениваясь данными с веб сервером. Это означает, что можно обновлять части веб страницы без перезагрузки всей страницы.
Как работает AJAX
- 1. На веб странице происходит событие (страница загружается, нажата кнопка)
- 2. Объект XMLHttpRequest создается JavaScript
- 3. Объект XMLHttpRequest отправляет запрос на веб сервер.
- 4. Сервер обрабатывает запрос
- 5. Сервер отправляет ответ на веб страницу
- 6. Ответ читается JavaScript.
- 7. Правильное действие (например, обновление страницы) выполняется JavaScript
