Ajax с помощью jQuery

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

Примеры ajax

Что такое jQuery

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

Ajax, jQuery и PHP

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

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

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

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

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

<?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

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

/*
* обработчик нажатия на кнопку
*/
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 браузером с помощью строки кода

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

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

Автор: Павел Коломыткин Сайт: http://mywebdev.ru/