Введение в АЯКС
AJAX — мечта разработчика, потому что вы можете:
- Обновите веб-страницу без перезагрузки страницы
- Запросить данные с сервера - после загрузки страницы
- Получить данные с сервера - после загрузки страницы
- Отправка данных на сервер - в фоновом режиме
Попробуйте сами Примеры в каждой главе
В каждой главе вы можете редактировать примеры онлайн и нажимать кнопку, чтобы просмотреть результат.
Пример AJAX
Let AJAX change this text
Объяснение примера AJAX
HTML-страница
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>Let AJAX change this text</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
</body>
</html>
HTML-страница содержит раздел <div> и <button>.
Раздел <div> используется для отображения информации с сервера.
<кнопка> вызывает функцию (если она нажата).
Функция запрашивает данные с веб-сервера и отображает их:
Функция 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_info.txt», используемый в приведенном выше примере, представляет собой простой текстовый файл и выглядит следующим образом:
<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a
technique for accessing web servers from a web page.</p>
<p>AJAX stands for
Asynchronous JavaScript And XML.</p>
Что такое АЯКС?
AJAX = синхронный J avaScript и X ML .
AJAX — это не язык программирования.
AJAX просто использует комбинацию:
- Встроенный в браузер объект XMLHttpRequest (для запроса данных с веб-сервера).
- JavaScript и HTML DOM (для отображения или использования данных)
AJAX — вводящее в заблуждение название. Приложения AJAX могут использовать XML для передачи данных, но в равной степени распространена передача данных в виде простого текста или текста JSON.
AJAX позволяет обновлять веб-страницы асинхронно, обмениваясь данными с веб-сервером за кулисами. Это означает, что можно обновлять части веб-страницы без перезагрузки всей страницы.
Как работает АЯКС
- 1. На веб-странице происходит событие (страница загружается, нажимается кнопка)
- 2. Объект XMLHttpRequest создается с помощью JavaScript.
- 3. Объект XMLHttpRequest отправляет запрос на веб-сервер.
- 4. Сервер обрабатывает запрос
- 5. Сервер отправляет ответ обратно на веб-страницу.
- 6. Ответ читается JavaScript
- 7. Правильное действие (например, обновление страницы) выполняется с помощью JavaScript.