Поддержка технологии Ajax

15. Введение в jQuery

Поддержка технологии Ajax

Ajax… not just for toilet cleaning.

Ajax — технология, позволяющая web-странице обмениваться данными с сервером.

Пусть на странице расположен список с анонсами. Пользователь щелкает по интересной позиции и…

В классическом варианте браузер загружает новую страницу в которой отображается выбранный материал. После просмотра пользователь возвращается на страницу с анонсами (новая загрузка).

В варианте с Ajax данные (только данные, а не весь громоздкий интерфейс) загружаются с сервера прямо в текущую страницу. Они выводятся в инлей, отодвигая вниз следующие позиции анонсов, или в оверлей — абсолютно позиционированный блок, имитирующий всплывающее окно, или как-то по-другому меняют текущую страницу.

Технология Ajax позволяет существенно сократить трафик и ускорить реакцию интерфейса, ибо обеспечивает подгрузку небольших фрагментов данных, только тех, которые реально затребовал пользователь, а не всей страницы целиком (включая громоздкий интерфейс и дизайнерские украшения).

Технология работы с одной страницей более привычна (напоминает интерфейс обычных прикладных программ) и не приводит к эффекту потери контента, когда пользователь вынужден переходить с одной страницы на другую.

Ярким примером использования Ajax являются карты Google (а теперь и Яндекса). По карте можно перемещаться, как по виртуальной странице, менять масштаб, и все происходит почти мгновенно, без утомительного ожидания перезагрузки всей страницы.

Еще примеры использования Ajax:

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

Использование технологии Ajax усложняется наличием браузера Internet Explorer. Microsoft и здесь идёт своим путем, используя объект ActiveX вместо объекта XMLHttpRequest, с помощью которого Ajax-запросы выполнятся в других браузерах.

Справедливости ради отметим, что Microsoft предложила ActiveX в 1998 году, то есть гораздо раньше, чем был предложен для этой цели объект XMLHttpRequest, и существенно раньше появления самого термина Ajax (который был впервые публично назван в 2005 году в статье Джесси Джеймса Гарретта «Новый подход к веб-приложениям»).

Библиотека jQuery предлагает набор удобных методов для работы с сервером по технологии Ajax. Как и в других случаях, разработчику нет нужды заботиться о совместимости Ajax-методов с разными браузерами, эта утомительная работа делается за кулисами jQuery.

Ниже представлены несколько методов jQuery для выполнения Ajax-запросов.

`load(url, parameters, callback)`
Инициирует Ajax-запрос по заданному url-адресу, возможно с дополнительными параметрами `parameters`. Полученные данные будут загружены в элементы обертки, после чего будет вызвана функция `callback`, если задана.
`$.ajax(options)`
Инициирует Ajax-запрос, используя объект `options` для управления передачей запроса и обращения к функции после его завершения.
`$.get(url, parameters, callback)`
Инициирует запрос `GET` к серверу.
`$.post(url, parameters, callback)`
Инициирует запрос `POST` к серверу.
`$.getJSON(url, parameters, callback)`
Инициирует запрос `GET` к серверу. Ответ сервера интерпретируется как строка в формате JSON. Эта функция прекрасно подходит, когда нужно получить данные с сервера без лишних сложностей. Вот типичный пример данных в формате JSON (данные о размере и цвете обуви): `[ {value:41,color:'черный'}, {value:42,color:'синий'}, {value:43,color:'белый'} ]`
`$.getScript(url, callback)`
Загружает и исполняет файл JavaScript, используя метод `GET`.

JSON (англ. JavaScript Object Notation) — текстовый формат обмена данными, основанный на JavaScript. Практическая польза использования JSON открывается при использовании технологии Ajax. JSON строится:

в виде JavaScript-объекта (набор пар имя/значение);
в виде массива.

Пример данных в формате JSON (которые можно подгружать из файла с расширением json):


{
  firstName: "Иван",
  lastName: "Иванов",
  address: {
             streetAddress: "Московское ш., 101, кв.101",
             city: "Ленинград",
             postalCode: 101101
           },
  phoneNumbers: [ "812 123-1234", "916 123-4567" ]
}

Рассмотрим пример использования метода getJSON.

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

Решение Решение содержит пример 10. HTML-код «гармошки» со списком товаров предельно прост — он содержит только заголовки, а блоки с описаниями пусты:


<DIV class="accordion">
 <H3>Волшебные очки</H3>
  <DIV>&nbsp;</DIV>

 <H3>Секретный компас</H3>
  <DIV>&nbsp;</DIV>

 <H3>Летающий зонтик</H3>
  <DIV>&nbsp;</DIV>

 <H3>Автомобиль-трансформер</H3>
  <DIV>&nbsp;</DIV>
</DIV>

В обработчике щелчка по заголовку выполняется загрузка нужного содержания:


// Загрузим информацию
var target = $(this).next("div");
$.getJSON('item'+$(this).index('h3')+'.json',
  function(data) 
  {
    var block = '';
    for (var i in data)
      block += '<DIV><EM>'+i + '</EM> ' + data[i] + '</DIV>';
    target.html(block);  
  }
);

В этом коде:

var target = $(this).next("div") -- ссылка на блок DIV, в который нужно загрузить содержание (он идёт сразу за заголовком).
'item'+$(this).index('h3')+'.json' — формирование имени JSON-файла из которого будет выполнена загрузка. Имя строится по правилу: itemN.json, N — номер текущего заголовка.

Метод getJSON работает следующим образом: загружает файл itemN.json и передает его содержимое как аргумент в функцию, которая записана вторым параметром:


function(data) 
{
  var block = '';
  for (var i in data)
    block += '<DIV><EM>'+i + '</EM> ' + data[i] + '</DIV>';
  target.html(block);  
}

Функция формирует HTML-код в переменной block и заменяет им текущее содержимое панели (ссылка на которую хранится в переменной target).

Файлы itemN.json в этом примере устроены следующим образом:


{
  "Вид":"<IMG src='pic/item1.png' width=212 height=115 alt=''>",
  "Описание":"Волшебные очки позволяют видеть всё в розовом цвете.",
  "Цена":326
}

Правда, содержимое JSON-файла должно быть записано в UTF-8 кодировке. С латинскими и специальными символами нет проблем, а кириллицу приходится явно кодировать, если работать в кодировке windows-1251. Реально файл item0.json записан в виде:


{
  "&#1042;&#1080;&#1076;":"<IMG src='pic/item1.png' width=212 height=115 alt=''>",
  "amp;#1054;amp;#1087;amp;#1080;amp;#1089;amp;#1072;amp;#1085;amp;#1080;amp;#1077;":"amp;#1042;amp;#1086;amp;#1083;amp;#1096;amp;#1077;amp;#1073;amp;#1085;amp;#1099;amp;#1077; amp;#1086;amp;#1095;amp;#1082;amp;#1080; amp;#1087;amp;#1086;amp;#1079;amp;#1074;amp;#1086;amp;#1083;amp;#1103;amp;#1102;amp;#1090; amp;#1074;amp;#1080;amp;#1076;amp;#1077;amp;#1090;amp;#1100; amp;#1074;amp;#1089;amp;#1105; amp;#1074; amp;#1088;amp;#1086;amp;#1079;amp;#1086;amp;#1074;amp;#1086;amp;#1084; amp;#1094;amp;#1074;amp;#1077;amp;#1090;amp;#1077;.",
  "amp;#1062;amp;#1077;amp;#1085;amp;#1072;":326
}

Если перейти на кодировку UTF-8 во всех файлах проекта, проблемы можно избежать. Такой вариант приводится в папке 10utf8:

praxis/15/examples/10utf8/index.htm