5 примеров использования jQuery для AJAX

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

Простая передача текста.

$.ajax({
  url: 'response.php?action=sample1',
  success: function(data) {
    $('.results').html(data);
  }
});


Для ответа имеется элемент div.result.

<div class="results">Ждем ответа</div>

Сервер просто возвращает строку:

echo 'Пример 1 - передача завершилась успешно';

 

Пример 2

Передаем пользовательские данные PHP скрипту.

$.ajax({
  type: 'POST',
  url: 'response.php?action=sample2',
  data: 'name=Andrew&nickname=Aramis',
  success: function(data){
    $('.results').html(data);
  }
});


Сервер возвращает строку со вставленными в нее переданными данными:

echo 'Пример 2 - передача завершилась успешно. Параметры: name = ' . $_POST['name'] . ', nickname= ' . $_POST['nickname'];

 

Пример 3

Передача и выполнение кода JavaScript

$.ajax({
  dataType: 'script',
  url: 'response.php?action=sample3',
})


Сервер выполняет код:

echo "$('.results').html('Пример 3 - Выполнение JavaScript');";

 

Пример 4

Используем XML. Пример можно использовать для работы с внешними XML, например, RSS фидом.

$.ajax({
  dataType: 'xml',
  url: 'response.php?action=sample4',
  success: function(xmldata){
    $('.results').html('');
    $(xmldata).find('item').each(function(){
        $('
<li></li>

').html( $(this).text() ).appendTo('.results');
    });
  }
});


Сервер должен возвращать XML код:

        header ('Content-Type: application/xml; charset=UTF-8');

        echo <<<XML
<?xml version='1.0' standalone='yes'?>
<items>
<item>Пункт 1</item>
<item>Пункт 2</item>
<item>Пункт 3</item>
<item>Пункт 4</item>
<item>Пункт 5</item>
</items>
XML;

 

Пример 5

Используем данные JSON. Входные параметры можно использовать в качестве атрибутов получаемого объекта.

$.ajax({
  dataType: 'json',
  url: 'response.php?action=sample5',
  success: function(jsondata){
    $('.results').html('Name = ' + jsondata.name + ', Nickname = ' + jsondata.nickname);
  }
});


Сервер должен возвращать данные в формате JSON:

$aRes = array('name' => 'Andrew', 'nickname' => 'Aramis');

require_once('Services_JSON.php');
$oJson = new Services_JSON();
echo $oJson->encode($aRes);


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/LD4GKh_KXiE/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

5 примеров использования jQuery для AJAX | | 2012-06-19 11:57:47 | | Статьи Web-мастеру | | AJAX – группа технологий, которая используется в веб разработке для создания интерактивных приложений. AJAX позволяет передавать данные с сервера без перезагрузки страницы. Таким образом можно | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: