AJAX – группа технологий, которая используется в веб разработке для создания интерактивных приложений. AJAX позволяет передавать данные с сервера без перезагрузки страницы. Таким образом можно получать очень впечатляющие результаты. А библиотека jQuery существенно облегчает реализацию AJAX с помощью встроенных методов. Для реализации технологии используется метод $.ajax или jQuery.ajax: $.ajax(свойства) или $.ajax(url [, свойства]) Второй параметр был добавлен в версии 1.5 jQuery. url – адрес запрашиваемой страницы; properties – свойства запроса. Полный список параметров приведен в документации jQuery. В уроке мы используем несколько наиболее часто используемых параметров. success (функция) – данная функция вызывается после успешного завершения запроса. Функция получает от 1 до 3 параметров (в зависимости от используемой версии библиотеки). Но первый параметр всегда содержит возвращаемые с сервера данные. data (объект/строка) – пользовательские данные, которые передаются на запрашиваемую страницу. dataType (строка) – возможные значения: xml, json, script или html. Описание типа данных, которые ожидаются в ответе сервера. type (строка) – тип запроса. Возможные значения: GET или POST. По умолчанию: GET. url (строка) – адрес URL для запроса. Пример 1 Простая передача текста. 1 $.ajax({ 2 url: 'response.php?action=sample1', 3 success: function(data) { 4 $('.results').html(data); 5 } 6 }); Для ответа имеется элемент div .result. 1 <div class="results">Ждем ответа</div> Сервер просто возвращает строку: 1 echo 'Пример 1 - передача завершилась успешно'; Пример 2 Передаем пользовательские данные PHP скрипту. 1 $.ajax({ 2 type: 'POST', 3 url: 'response.php?action=sample2', 4 data: 'name=Andrew&nickname=Aramis', 5 success: function(data){ 6 $('.results').html(data); 7 } 8 }); Сервер возвращает строку со вставленными в нее переданными данными: 1 echo 'Пример 2 - передача завершилась успешно. Параметры: name = ' . $_POST['name'] . ', nickname= ' . $_POST['nickname']; Пример 3 Передача и выполнение кода JavaScript 1 $.ajax({ 2 dataType: 'script', 3 url: 'response.php?action=sample3', 4 }) Сервер выполняет код: 1 echo "$('.results').html('Пример 3 - Выполнение JavaScript');"; Пример 4 Используем XML. Пример можно использовать для работы с внешними XML, например, RSS фидом. 01 $.ajax({ 02 dataType: 'xml', 03 url: 'response.php?action=sample4', 04 success: function(xmldata){ 05 $('.results').html(''); 06 $(xmldata).find('item').each(function(){ 07 $(' 08 <li></li> 09 10 ').html( $(this).text() ).appendTo('.results'); 11 }); 12 } 13 }); Сервер должен возвращать XML код: 01 header ('Content-Type: application/xml; charset=UTF-8'); 02 03 echo <<<XML 04 <?xml version='1.0' standalone='yes'?> 05 <items> 06 <item>Пункт 1</item> 07 <item>Пункт 2</item> 08 <item>Пункт 3</item> 09 <item>Пункт 4</item> 10 <item>Пункт 5</item> 11 </items> 12 XML; Пример 5 Используем данные JSON. Входные параметры можно использовать в качестве атрибутов получаемого объекта. 1 $.ajax({ 2 dataType: 'json', 3 url: 'response.php?action=sample5', 4 success: function(jsondata){ 5 $('.results').html('Name = ' + jsondata.name + ', Nickname = ' + jsondata.nickname); 6 } 7 }); Сервер должен возвращать данные в формате JSON: 1 $aRes = array('name' => 'Andrew', 'nickname' => 'Aramis'); 2 3 require_once('Services_JSON.php'); 4 $oJson = new Services_JSON(); 5 echo $oJson->encode($aRes);