Технология AJAX
Введение в AJAX
Технология AJAX представляет собой технологию асинхронного взаимодействия с сервером. Благодаря данной технологии мы можем отправлять запросы к серверу и получать от него ответы без перезагрузки страницы в фоновом режиме, создавать насыщенные интерактивные веб-приложения, например, веб-чаты.
Первоначально возможность асинхронного взаимодействия с сервером была использована в виде объекта ActiveX в компании Microsoft. В последствии идея асинхронного взаимодействия была подхвачена и другими компаниями. И в настоящее время функционал асинхронных запросов в браузерах доступен веб-разработчикам через объект XMLHttpRequest.
Поскольку данный материал посвящен jQuery, я не буду подробно останавливаться на объекте XMLHttpRequest. Но вкратце покажу суть его
использования.
Итак, прежде всего для работы с AJAX нам нужен веб-сервер. Это может быть Node.js, IIS, Apache, nginx. В дальнейшем я буду использовать веб-сервер Apache.
Создадим веб-страничку, где будет использоваться XMLHttpRequest:
<html>
<head>
<meta charset='utf-8'>
</head>
<body>
<button onclick="ajaxload();">Загрузить</button>
<div id="news"><h3>Нет новостей</h3></div>
<script type="text/javascript">
function ajaxload(){
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(this.readyState==4){
if(this.status >=200 && xhr.status < 300){
document.getElementById('news').innerHTML=this.responseText;
}
}
}
xhr.open('GET', 'ajax.php');
xhr.send();
}
</script>
</body>
</html>
В плане разметки у нас есть два элемента: кнопка, по нажатию на которую совершается функция ajaxload, и блок div,
в который будут загружаться данные при запросе.
Все основное действие у нас происходит в функции ajaxload. Во-первых, мы создаем объект XMLHttpRequest: var xhr=new XMLHttpRequest();.
Через этот объект мы будем отправлять запросы. При получении ответа будет срабатывать событие onreadystatechange. И для обработки данного события
мы присваиваем свойству xhr.onreadystatechange функцию обработки ответа.
В функции обработки мы, во-первых, смотрим на готовность ответа через свойство readyState (состояние this.readyState==4
означает, что запрос завершен). Далее мы проверяем статусный код ответа: если сервер возвратил статусный код от 200 до 300, то запрос прошел успешно.
И затем мы передаем текст ответа в блок div, который у нас имеется на странице через свойство responseText.
В строке xhr.open('GET', 'ajax.php'); мы устанавливаем метод запроса и ресурс, к которому будет идти запрос.
Ну и последней строчкой xhr.send() отправляем запрос. В итоге мы написали очень много кода, чтобы выполнить простой запрос.
Пусть у нас на сервере находится обработчик запросов на языке php. Я сделаю его предельно простым. Он будет просто передавать в ответ разметку html:
<?php echo "<h3>ЦСКА победил в чемпионате России</h3><h5>30.05.2013</h5>"; ?>
Теперь по нажатию по кнопке будет происходить ajax-запрос, результаты которого будут загружаться на страницу:
Теперь перепишем код страницы с использованием jQuery:
<html>
<head>
<meta charset='utf-8'>
<script src="jquery-1.10.1.min.js"></script>
</head>
<body>
<button>Загрузить</button>
<div id="news"><h3>Нет новостей</h3></div>
<script type="text/javascript">
$(function(){
$('button').click(function(){
$('#news').load('ajax.php');
});
});
</script>
</body>
</html>
Таким образом, код становится чище и проще за счет использования библиотеки jQuery. Нам достаточно применить метод load, передав в качестве параметра
адрес ресурса. И итоговый результат будет тот же самый.
- Глава 1. Введение в jQuery
- Глава 2. Выборка элементов
- Глава 3. Манипуляция элементами в jQuery
- Глава 4. Работа со структурой страницы
- Глава 5. События jQuery
- Глава 6. Технология AJAX
- Глава 7. Эффекты и анимация в jQuery
- Глава 8. jQuery UI