Простой пример ajax с фреймворком jQuery

Аякс (ajax, асинхронный яваскрипт и xml) — это технология, которая позволяет загружать данные на текущую страницу без ее фактической перезагрузки, которую мы получаем при нажатии, например, на ссылку, если говорить очень упрощенно. Конечно, этим возможности технологии не ограничиваются, но для начала этих знаний будет достаточно. Одно из основных преимуществ использования аякс-технологии заключается в уменьшении интернет-трафика и, соответственно, увеличении скорости работы.

Я приведу очень простой пример работы аякс с использованием популярного яваскрипт-фреймворка jQuery. Предположим у нас есть страница, на которой отображается количество наших сообщений электронной почты: новых (непрочитанных), прочитанных и тех, что попали в спам. За отображение этой информации на нашей странице отвечает простой блок:

<div id="messages">
<div class="message list">Новые: <span id="msg_new">5</span></div>
<div class="message list">Прочитанные: <span id="msg_read">1519</span></div>
<div class="message list spam">Спам: <span id="msg_spam">237</span></div>
</div>

И предположим, что у нас есть некая кнопка, по нажатию на которую информация о количестве сообщений должна изменяться без перезагрузки страницы:

<div id="update">
<img src="img/ajax-button.png" alt="Обновление количества сообщений по AJAX-запросу" title="Обновить количество сообщений">
</div>

Для того, чтобы это все работало, нам нужен сервис, который будет предоставлять информацию о количестве сообщений в удобном для нас формате. Поскольку мы работаем с яваскриптом, то удобнее всего получить информацию в формате json (javaScript object notation). Наш сервис представляет для нас черный ящик, то есть мы не знаем как он работает, но благодаря предоставленному им API, мы можем попросить у него информацию и получить от сервиса ответ.
В качестве примера будем использовать наш выдуманный почтовый сервис, который находится по адресу http://site.com/etc/ajax_simple/router.php и может принимать POST-запрос с параметром action, а в качестве его значения имя метода — getNewMail. В ответ сервис вернет ассоциативный массив, запакованный в json, вида:

"unread" => // количество новых сообщений
"read" => // прочитанные сообщения
"spam" => // спам

Фреймворк jQuery имеет в своем арсенале простые и удобные методы для работы с POST- и GET-аякс запросами, соответственно, jQuery.post() и jQuery.get(). Прелесть этих методов в том, что нам не придется разбираться в объектной модели DOM (document object model), а можно приступить сразу к написанию ajax-запрса, не забыв подключить фреймворк к нашей странице:

<script src="jquery.js"></script>

Для начала опишу как работает метод асинхронного POST-запроса:

$.post('/путь/к/сервису', {'POST-переменная-1': 'значение-переменной-1'}, function(data) {
// переменная data содержит ответ, полученный от сервиса
// дальше мы можем выполнить необходимые манипуляции с полученными данными
…;
}, 'json' /* формат ответа сервиса */);

По большому счету ничего сложного тут нет: первый параметр — путь к сервису, второй — массив, содержащий пары «имя параметра: значение параметра», третий параметр — функция-обработчик полученных от сервиса данных и четвертый параметр (необязательный, кстати) — формат ответа сервиса.

Я считаю, что пользователя необходимо информировать как можно более простым и понятным языком о том, что сейчас происходит с сайтом, чтобы у него не было сомнений, попал он по кнопке или нет. Это, с одной стороны, повысит привлекательность сайта для этого пользователя, а с другой — оградит сервис от лишней работы и нештатных ситуаций.
Именно для этих целей на нашем примере я сделал две функции: setMessage() и hideMessage(), которые будут выводить и скрывать сообщение о том, что происходит получение информации о количестве сообщений. Для того, чтобы изменить информацию о количестве сообщений на нашей страницы я написал простую функцию updateInformation(mnew, mread, mspam):

function updateInformation(mnew, mread, mspam)
{
// mnew — количество непрочитанных сообщений
// mread — количество прочитанных сообщений
// mspam — количество спам-сообщений
$("#msg_new").html(mnew);
$("#msg_read").html(mread);
$("#msg_spam").html(mspam);
}

И теперь, собрав все воедино, напишем функцию, которая будет обновлять количество сообшений без перегрузки страницы по нажатию на кнопку-картинку:

function requestData()
{
setMessage(); // выводим сообщени об обновлении количества сообщений
$.post('/etc/ajax_simple/router.php', {'action': 'getNewMail'}, function(data) {
updateInformation(data.unread, data.read, data.spam) // передаем полученные в json-формате данные в написанную нами функцию, которая обновит количество сообшений
hideMessage(); // мавр сделал свое дело, мавр может уходить — прячем сообщение об обновлении количества сообщений
}, 'json');
}

Теперь все готово, не забудем повесить вызов этой функции на блок с нашей картинкой:

<div id="update">
<img src="img/ajax-button.png" alt="Обновление количества сообщений по AJAX-запросу" title="Обновить количество сообщений" onclick="javascript: requestData();" >
</div>

Теперь все будет работать. Пример ajax на jQuery.

P. S. К счастью, сейчас встречается мало пользователей, которые отключают выполнение яваскрипта в браузере, но для большей политкорректности в некоторых случаях уместно при отключеном яваскрипте выводить альтернативное, не-аякс решение, которое выполнит ту же функцию, но с перегрузкой страницы.