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 для запроса.

demosourse

 

Пример 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);

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.script-tutorials.com/easily-interact-between-server-and-client-using-these-jquery-with-ajax-snippets/
Перевел: Сергей Фастунов
Урок создан: 21 Мая 2012
Просмотров: 393343
Правила перепечатки


5 последних уроков рубрики "jQuery"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 22 Мая 2012 11:32
    sam2019
    Мне показалось, что написано слишком коротко, но все равно понятно. Спасибо
  • 22 Мая 2012 11:32
    mobileleader
    Опечатки в тексте исправьте!
  • 22 Мая 2012 17:26
    Deonis
    По поводу JSON - можно и проще ответ написать: echo json_encode(array($val_1, $val_2, $val_N)); В JS одрабатывается, как обычный массив: success: function(jsondata){ alert(jsondata[0] + jsondata[1] + jsondata[2]); } Или массив делать ассоциативный, тогда обращаться по ключу.
  • 23 Мая 2012 12:04
    Hanky_Panky
    Подскажите плзз, как в data: передать параметры из формы?
    • 23 Мая 2012 12:44
      RealVect0r
      $('form').serialize();
      • 23 Мая 2012 13:06
        Hanky_Panky
        $.ajax({ type: 'POST', url: 'form.php', data: '$(#nameform).serialize()', success: function(data){ $('.results').html(data); }
        });
        
        я верно понял?
  • 23 Мая 2012 14:22
    morosovdmitry
    Инетересная статейка!
  • 26 Мая 2012 01:16
    notimefornuts
    Как не хватало этой статьи несколько недель назад..
  • 8 Июля 2012 15:20
    andriy_herych
    На мобильном не пошло! Не видно меню.
  • 18 Июля 2012 14:08
    error_people
    Благодарю!
  • 8 Декабря 2012 02:57
    flashz1
    Скажите пожалуйста, не могу понять, что такое JSON. В гугл смотрел, но понятнее было бы на простом языке в двух словах, почему его используют и где. Спасибо за ранее! Евгений Попов, ты лучший :)
  • 9 Апреля 2013 10:44
    ziggy
    подскажите, а как сделать чтобы это работало в IE 9 ?
  • 12 Апреля 2013 09:52
    idoskhozhayev
    классная статья спасибо
  • 20 Декабря 2013 02:42
    mancj
    $.ajax({ type: 'POST', url: 'response.php?action=sample2', data: 'name=Andrew&nickname=Aramis', success: function(data){ $('.results').html(data); }
    });
    
    пожалуйста объясните человеческим языком как в name и nickname запихнуть параметры из ранее созданных переменных? то есть допустим есть 2 формы input type text и чтобы в эти переменные заносились данные из этих input'ов?? Где то прочел что можно так
    {name: input1value, nickname: input2value}
    но у меня это почему то не работает((((помогите же мне наконец добрые люди, а то этот аякс меня уже убивает
    • 6 Марта 2014 02:07
      agkovalev
      все правильно, нужно
      $.ajax({ type: 'POST', url: 'response.php', data: {
      action: "sample1",
      name: "Andrew",
      nickname: "Aramis"
      }, success: function(data){ $('.results').html(data); }
      });
      
      Все это POST параметры (убедитесь в php-скрипте, что правильно их получаете).
  • 12 Января 2014 20:40
    mcsweb
    Так а при подгрузке js в примере №3 success не работает?
  • 6 Августа 2015 14:44
    Денис Головин
    Привет! Я 5 пример что то не понял. Можно чуть поподробнее?
  • 12 Февраля 2016 19:48
    see_the_ocean
    ХЕХ
  • 1 Июня 2016 21:10
    aubakir
    спасибо автор респект
  • Комментарий удален
    • 23 Мая 2012 23:47
      im.alexander
      вам она так необходима?
      • 9 Апреля 2013 15:33
        ziggy
        IE 9 - мне вооообще ни к чему, но в связи с тем что в организации используют IE... в общем проблема следующая, работает во всех браузерах кроме IE(( возможны ограничения со стороны сервера кто знает (IIS7)?
^ Наверх ^