Главный Каталог Статей РФ
85947 авторов, размещено 47073 статей, сейчас на сайте пользователей: 185 Статистика
Аватар Павел Коломыткин

Ajax с помощью jQuery

Категория:  Интернет  | Автор:  Павел Коломыткин | Опубликовано: 24.12.2010
Что такое 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-формате.

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

treefiles

Рис.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/
Комментарии
К этой статье пока нет комментариев. Станьте первым! У нас гости не могут комментировать статьи. Пожалуйста авторизуйтесь или зарегистрируйтесь, чтобы прокомментировать.
Интересные статьи по теме
Аватар AnemoN
Накрутка лайков и подписчиков ВКонтакте Есть несколько хитрых и не очень методов, которые используются для т.н. "накрутки лайков".О заслуживающих внимания пойдет речь в этой статье....
Категория: Интернет | Автор: AnemoN | Добавлено: 17.02.2013
Аватар Jetti
Буксы — что это такое и как правильно выбрать букс для заработка Из-за коронавируса, "блуждающего" по всему миру вот уже второй год, у многих людей появилось огромное количество свободного времени. Одни стали тратить это время на хобби, другие — читать книги и смот...
Категория: Интернет | Автор: Jetti | Добавлено: 20.07.2021
Аватар Lizetta
Сколько времени уходит на создание сайта? Сколько времени тратит специалист на разработку сайта? В какой срок можно создать сайт и чем обуславливается это?...
Категория: Интернет | Автор: Lizetta | Добавлено: 03.06.2011
Аватар gul_itb
Как правильно представить информацию на сайте Зачем люди сидят в Интернете? В основном есть две причины – это развлечение и поиск информации. Ваш корпоративный сайт, конечно же тоже служит этим двум целям Интернет-общения. Даже бизнес-сайт о чем-...
Категория: Интернет | Автор: gul_itb | Добавлено: 26.10.2009
Аватар Marta22
Как улучшить страницу на сайте вконтакте Советы, как сделать страницу в vkontakte лучше...
Категория: Интернет | Автор: Marta22 | Добавлено: 21.08.2009
Лучшие авторы
Аватар dodger778
+7 918 612-13-84

Читать

Аватар Somersett
Агентство визуальных коммуникаций Somersett предла...

Читать

Аватар vdovseva
Закончила ГИТИС, факультет театроведения, автор ст...

Читать

Аватар Laesus De Liro
Невролог

Читать

Аватар factorrosta
Беляева Любовь использует в своей работе знания и...

Читать

Свежие комментарии
Талантливый человек талантлив во всём! Будь как Паша! А ещё ты можешь ...

Читать

Можно выбрать.

Читать

Ой, шутник.

Читать

https://priornews.ru/zastrojshhik-iz-hmao-sravnil-ufas-s-prestupnoj-gr...

Читать

https://ura-news.turbopages.org/turbo/ura.news/s/news/1052688335

Читать

Напишите нам