Ajax с помощью jQuery

Что такое ajax

Ajax(Asynchronous Javascript and XML) - это решение, которое позволяет асинхронно запрашивать/передавать данные на сервер. Сама идея заключается в том, чтобы не перезагружая веб-страницу и не блокируя пользовательский интерфейс, можно было бы из javascript-сценария обратиться к какому-либо серверному скрипту(или другому ресерсу) для получения/передачи каких-либо данных.

Примеры ajax

Примеров страниц с использованием ajax сейчас можно много найти. Если зайти на http://www. google. ru/ и начать что-нибудь вводить в поисковую строку, то может появится выпадающее меню с похожими найденными вариантами запроса. Эти варианты запрашиваюотся с сервера асинхронно, не перезегружая саму страницу.

Что такое jQuery

Для реализации ajax-запросов в браузеры встроены компоненты, к которым можно получить доступ из javascript-кода. Есть одна неприятная проблема. Код создания ajax-объекта в IE(Internet Explorer), отличается от кода создания ajax-объекта в других браузерах. Это, пожалуй, не самая большая сложность. Мне, например, не очень хочется задумываться о различных настройках и низкоуровневых реализациях ajax. jQuery избавляет от выше упомянотых проблем, предоставляя очень удобный интерфейс. Нужно сказать, что применение данной библиотеки далеко не ограничивается только удобной реализацией ajax-сценариев.

Ajax, jQuery и PHP

В данной статье я буду рассматривать достаточно простой, но полный пример того, как создать веб-страницу с асинхронными запросами ajax на сервер. Итак, давайте приступим.

Необходимо создать страницу, на которой будет размещена кнопка. По нажатию на данной кнопке нужно запросить данные из php-скрипта и отобразить их на странице. Необходимо также показывать анимацию при загрузке данных в виде gif-картинки. Для простоты будем полагать, что обмен данными будет осуществлятся в json-формате.

Сразу приведу сруктуру иерархии каталогов у меня на сервере. Вот она.

Рис. 1 Структура каталогов на сервере

Код html-страницы www/index. html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. 01 Transitional//EN"> <html> <head> <title></title>
<script type="text/javascript" src="/scripts/jquery-1. 4. 2. min. js"></script>
<script type="text/javascript" src="/scripts/our_ajax. js"></script> </head> <body>
<div>
<form>
<input id="ajaxButton" value="GetData" type="button" />
</form>
</div>

<div id="dataContainer" style="display:none;"></div>
</body> </html>

Html-разметка страницы предельно проста. В хедере подключаются два скрипта - библиотека jquery(jquery скачать бесплатно можно здесь) и наш javascript-сценарий. Кнопка с идентификатором ajaxButton будет запускать ajax-запрос, а див dataContainer будет отображать данные, индикатор загрузки и сообщения об ошибках.

Описание серверноего скрипта

Для серверной стороны напишем простенький php-сценарий, который будет принимать два параметра start и end и возвращать массив строк в json-формате. Данный скрипт я назвал json_data. php. Вот его содержимое.

<?php

// результат ответа
$result = array();

// извлечь параметры GET-запроса и привести их к целочисленному типу

$startIndex = intval($_GET["start"]);
$endIndex = intval($_GET["end"]);

// заполнить массив результатов строками
for ($index = $startIndex; $index < $endIndex; $index++)

$result[$index] = "item" . $index;

// на основе массива строк создать строку в json-формате и отправить ответ клиенту
print json_encode($result);
?>

Пример достаточно бессмысленный для реальной жизни. Обычно информация берется из базы данных или из других источников. Но наша цель - понять как с помощью jQuery осуществлять ajax-запросы.

Описание сценария javascript

Нам осталось написать javascript, который будет запрашивать данные с сервера, обращаясь к json_data. php. Назовем его our_ajax. js.

Я сразу приведу код с комментариями.

/*
* обработчик нажатия на кнопку
*/
var buttonClickHandler = function()

/*
* получить объект jQuery, ссылающийся на элемент с
* идентификатором dataContainer
*/
var dataContainer = jQuery("#dataContainer");

/*
* отчистить содержимое контейнера
*/
dataContainer. empty();

/*
* поместить в контейнер gif анимацию индикатора загрузки
*/

dataContainer. append("<img src="/images/ajax-loader. gif" />");

/*
* создать объект параметров GET-запроса
*/
var data = start: 10, end: 20;

/*
* послать http-запрос на сервер(php-скрипт json_data. php, который
* находится в каталоге www) с параметрами data. Установить ajaxCallBack
* в качестве функции обратного вызова, которая запустится, когда придут
* данные с сервера. При вызове ajaxCallBack ей параметром будет передан
* объект, сформированный из json-строки.
*/
jQuery. getJSON("json_data. php", data, ajaxCallBack);

/*
* вызывается, когда с сервера получен ответ
* data - данные, в виде объекта, который получен из json-строки,
* полученной с сервера
*/
var ajaxCallBack = function(data)

/*
* получить объект jQuery, ссылающийся на элемент с
* идентификатором dataContainer
*/
var dataContainer = jQuery("#dataContainer");

/*
* отчистить содержимое контейнера
*/
dataContainer. empty();

/*
* пробежаться по всем данными и вставить их в контейнер
*/
for (var index in data)

dataContainer. append("<div>" + data[index] + "</div>");

/*
* показать содержимое контейнера
*/
dataContainer. css("display", "block");

/*
* обработчик ошибок ajax
**/
var ajaxErrorHandler = function(event, request, settings)

var dataContainer = jQuery("#dataContainer");
dataContainer. empty();

dataContainer. append(
"<div style="border:1px solid red">Error loading data from" + settings. url + "</div>");

dataContainer. css("display", "block");

/*
* обработчик загрузки DOM
*/
var doucumentLoadHandler = function()

/*
* получить объект jQuery, ссылающийся на элемент с
* идентификатором dataContainer
*/
var dataContainer = jQuery("#dataContainer");

* определить функцию обработки ошибок ajax-запросов

*/
dataContainer. ajaxError(ajaxErrorHandler);

/*
* привязать к кнопке с идентификатором ajaxButton обработчик
* события нажатия мыши
*/
jQuery("#ajaxButton"). bind("click", buttonClickHandler);

/*
* подключение функции-обрабтчика загрузки DOM
*/
jQuery(document). ready(doucumentLoadHandler);

Я постарался максимально подробно прокомментировать приведенный javascript-сценарий, поэтому не буду вдаваться в подробности его работы. Поясню только основные моменты.

При исполнении our_ajax. js браузером с помощью строки кода

jQuery(document). ready(doucumentLoadHandler);

мы подключаемся к событию загрузки DOM структуры нашего html-документа. При возникновении этого события сработает нами определенная функция doucumentLoadHandler. Код

dataContainer. ajaxError(ajaxErrorHandler);

регистрирует функцию обработки ошибок ajax-запросов. Далее приязываем событие нажатия мышью к нашей кнопке, устанавливая при этом buttonClickHandler в качестве функции обратного вызова. При клике на кнопке будет осуществляться ajax-запрос к json_data. php. А обработка полученных данных будет происходить в функции ajaxCallBack.

Вот и всё. Теперь у нас есть законченный пример выполнения ajax-загрузки данных с сервера.
Автор: Павел Коломыткин Сайт: http://mywebdev. ru/

Отзывы и комментарии