Представляю Вам третю статтю із серії jQuery для початківців. В цей раз я постараюся розповісти про реалізації AJAX запитів…

Матеріали даної статті включені в підручник «jQuery для початківців». Підручник розповсюджується безкоштовно, і супроводжується інтерактивними прикладами.

Що таке AJAX я думаю розповідати не варто, бо з приходом веб-два-нуль більшість користувачів вже вернуть носом від перезавантажень сторінки цілком, а з появою jQuery реалізація спростилася в рази…

Примітка: У всіх прикладах використовується скорочений варіант виклику jQuery методів, використовуючи функцію $ (знак долара)

jQuery(..).load

Почнемо з самого простого – завантаження HTML коду у необхідний нам DOM елемент на сторінці. Для цієї мети нам підійде метод load. Даний метод може приймати наступні параметри:

  • url запитуваної сторінки
  • передані дані (необов’язковий параметр)
  • функція якої буде скормлен результат (необов’язковий параметр)
  • Наведу приклад JavaScript коду:

    $(document).ready(function(){ // по закінченню завантаження сторінки
    $(‘#example-1’).click(function(){ // вішаємо на клік по елементу з id = example-1
    $(this).load(‘ajax/example.html’); // завантаження HTML коду з файлу example.html
    })
    });

    Приклад підвантажуваних даних (вміст файлу example.html):

    Example
    Data Loaded By AJAX
    Bye-Bye

    Приклад роботи

    jQuery.ajax

    Це основний метод, а всі наступні методи лише обгортки для методу jQuery.ajax. У даного методу лише один вхідний параметр – об’єкт включає в себе всі налаштування (виділені параметри, які варто запам’ятати):

    • async – асинхронність запиту, за замовчуванням true
    • cache – вкл/викл кешування даних браузером, за замовчуванням true
    • contentType – за замовчуванням “application/x-www-form-urlencoded”
    • data – передані дані – рядок іль об’єкт
    • dataFilter – фільтр для вхідних даних
    • dataType – тип даних, що повертаються в callback функцію (xml, html, script, json, text, _default)
    • global – тригер – відповідає за використання глобальних AJAX Подієві ів, за замовчуванням true
    • ifModified – тригер – перевіряє чи були зміни у відповіді сервера, щоб не слати ще запит, за замовчуванням false
    • jsonp – перевстановити ім’я callback функції для роботи з JSONP (за замовчуванням генерується на льоту)
    • processData – за замовчуванням відправляються даний загортаються в об’єкт, і вирушають як “application/x-www-form-urlencoded”, якщо треба інакше – відключаємо
    • scriptCharset – кодировочка – актуально для JSONP і підвантаження javascript’ов
    • timeout – час таймаут в мілісекундах
    • type – GET або POST
    • url – url запитуваної сторінки

    Локальні AJAX Подієві и:

    • beforeSend – спрацьовує перед відправкою запиту
    • error – якщо сталася помилка
    • success – якщо помилок не виникло
    • complete – спрацьовує по закінченню запиту

    Для організації HTTP авторизації (О_о):

    • username – логін
    • password – пароль

    Приклад javaScript’а:

    $.ajax({
    url: ‘/ajax/example.html’, // вказуємо адресу URL
    dataType : “json”, // тип даних, що завантажуються
    success: function (data, textStatus) { // вішаємо свій обробник на функцію success
    $.each(data, function(i, val) { // обробляємо отримані дані
    /* … */
    });
    }
    });

    jQuery.get

    Завантажує сторінку, використовуючи для передачі даних GET запит. Може приймати наступні параметри:

  • url запитуваної сторінки
  • передані дані (необов’язковий параметр)
  • callback функція, якою буде скормлен результат (необов’язковий параметр)
  • тип даних, що повертаються в callback функцію (xml, html, script, json, text, _default)
  • jQuery.post

    Даний метод аналогічний попередній, лише передавані дані підуть на сервер за допомогою POST’а. Може приймати наступні параметри:

  • url запитуваної сторінки
  • передані дані (необов’язковий параметр)
  • callback функція, якою буде скормлен результат (необов’язковий параметр)
  • тип даних, що повертаються в callback функцію (xml, html, script, json, text, _default)
  • JavaScript:

    $(document).ready(function(){ // по завершенню завантаження сторінки
    $(‘#example-3’).click(function(){ // вішаємо на клік по елементу з id = example-3
    $.post(‘ajax/example.xml’, {}, function(xml){ // завантаження XML файлу example.xml
    $(‘#example-3’).html”);
    $(xml).find(‘note’).each(function(){ // заповнюємо DOM елемент даних з XML
    $(‘#example-3’).append(‘To:’ + $(this).find(‘to’).text() + ‘
    ‘)
    .append(‘From:’ + $(this).find(‘from’).text() + ‘
    ‘)
    .append(‘‘ + $(this).find(‘heading’).text() + ‘
    ‘)
    .append( $(this).find(‘body’).text() + ‘
    ‘);
    });
    }, ‘xml’); // вказуємо явно тип даних
    })
    });

    Файл example.xml:

    Tove
    Jani
    Reminder
    Don’t forget me this weekend!

    Приклад роботи

    jQuery.getJSON

    Завантажує дані в форматі JSON (зручніше і швидше ніж XML). Може приймати наступні параметри:

  • url запитуваної сторінки
  • передані дані (необов’язковий параметр)
  • callback функція, якою буде скормлен результат (необов’язковий параметр)
  • JavaScript:

    $(document).ready(function(){ // по завершенню завантаження сторінки
    $(‘#example-4’).click(function(){ // вішаємо на клік по елементу з id = example-4
    $.getJSON(‘ajax/example.json’, {}, function(json){ // завантаження JSON даних з файлу example.json
    $(‘#example-4’).html”);
    // заповнюємо DOM елемент даними з JSON об’єкта
    $(‘#example-4’).append(‘To:’ + json.note.to + ‘
    ‘)
    .append(‘From:’ + json.note.from + ‘
    ‘)
    .append(‘‘ + json.note.heading + ‘
    ‘)
    .append( json.note.body + ‘
    ‘);
    });
    })
    });

    Файл example.json:

    {
    note:{
    to:’Tove’,
    from:’Jani’,
    heading:’Reminder’,
    body:’Don\’t forget me this weekend!’
    }
    }

    Приклад роботи

    jQuery.getScript

    jQuery.getScript дана функція завантажує та виконує локальний JavaScript. Може приймати наступні параметри:

  • url запитуваної скрипта
  • callback функція, якою буде скормлен результат (необов’язковий параметр)
  • JavaScript:

    $(document).ready(function(){ // по завершенню завантаження сторінки
    $(‘#example-5’).click(function(){ // вішаємо на клік по елементу з id = example-5
    $.getScript(‘ajax/example.js’, function(){ // завантаження JavaScript’а з файлу example.js
    testAjax(); // виконуємо завантажений JavaScript
    });
    })
    });

    Файл example.js:

    function testAjax() {
    $(‘#example-5’).html(‘Test completed’); // змінюємо елемент з id = example-5
    }

    Приклад роботи

    Обробники подгруженного вмісту

    Якщо перед вами стоїть завдання повісити обробник події на подгружаемый AJAX’ом контент, то вам варто звернути увагу на метод live, з його допомогою ви зможете здійснити задумане, необхідно лише трохи перетворити код:

    // було б, якщо б вміст елемента #main не підвантажуються AJAX’ом
    $(‘#main a’).click(function(event){
    console.log($(this).attr(‘href’));
    return false; // скасовуємо дія за замовчуванням і спливання події
    });
    // тепер припустимо, що вміст елемента #main підвантажується AJAX’ом
    // вносимо мінімум змін в попередній код
    $(‘#main a’).live(‘click’, function(event){
    console.log($(this).attr(‘href’));
    event.preventDefault(); // скасовуємо дія за замовчуванням, але не чіпаємо киплячому – щоб не заважати іншим обробників
    });

    У даному прикладі використовується метод live, але я б порадив використовувати метод delegate, більш докладно про даному методі описано у 6-ій частині — «Події»

    Відправка Форми

    Для відправки форми допомогою jQuery можна використовувати будь-який з перерахованих способів, а ось для зручності збору даних з форми краще використовувати плагін jQuery Form або рідні методи serialize і serializeArray.

    Відправка Файлів

    Для відправки файлів за допомогою jQuery можна використовувати плагін Ajax File Upload іль One Click Upload

    Взаємодія з PHP

    Для організації роботи з PHP використовую бібліотеку jQuery-PHP, зручно якщо Вам подобається jQuery ;), детальніше читаємо в статті PHP бібліотека jQuery

    Приклади використання JSONP

    Окремо варто відзначити використання JSONP – бо це один із способів здійснення крос-доменної завантаження даних. Якщо трохи перебільшувати – то це підключення віддаленого JavaScript’a, що містить необхідну нам інформацію у форматі JSON, а так само виклик нашої локальної функції, ім’я якої ми вказуємо при зверненні до віддаленого сервера (зазвичай це параметр callback). Трохи більш наочно це можна продемонструвати наступна діаграма (кликабельно):

    При роботі з jQuery ім’я callback функції генерується автоматично для кожного звернення до віддаленого сервера, для цього досить використовувати GET запит виду:

    http://api.domain.com/?type=jsonp&query=test&callback=?

    Замість останнього знаку питання (?) буде підставлено ім’я callback функції. Якщо ж Ви не хочете використовувати цей спосіб, то Вам необхідно буде явно вказати ім’я callback функції, використовуючи опцію jsonp при виклику методу jQuery.ajax().

    Google Пошук

    Приклад отримання і обробки результатів пошуку використовуючи Google, більш детальну інформацію знайдете у статті “jQuery + AJAX + (Google Search API || Yahoo Search API)”

    Yahoo Пошук

    Приклад отримання і обробки результатів пошуку використовуючи Yahoo, більш детальну інформацію знайдете у статті “jQuery + AJAX + (Google Search API || Yahoo Search API)”

    JSONP API

    Наведу так само невеликий список відкритих API з підтримкою JSONP:

    • Google – пошук і більшість сервісів
    • Yahoo – пошук і більшість сервісів
    • Flickr
    • MediaWiki – відповідно і всі похідні – Вікіпедія, Вікісловник і т. д.
    • Digg
    • CNET
    • aideRSS

    Події

    Для зручності розробки, на AJAX запитах висить кілька подієві ів, їх можна задавати для кожного AJAX запиту окремо, або глобально. На всі подієві и можна повісити свою функцію.

    Приклад відображення елемента з id=”loading” під час виконання будь-якого AJAX запиту:

    $(“#loading”).bind(“ajaxSend”, function(){
    $(this).show(); // показуємо елемент
    }).bind(“ajaxComplete”, function(){
    $(this).hide(); // приховуємо елемент
    });

    Для локальних подій – вносимо зміни в опції методу ajax():

    $.ajax({
    beforeSend: function(){
    // Handle the event beforeSend
    },
    complete: function(){
    // Handle the complete event
    }
    // …
    });

    Для більшої наочності наведу наступну діаграму (кликабельно):

    Ну і власне список всіх подієві ов:

    • ajaxStart – Даний метод викликається у разі коли побіг AJAX запит, і при цьому немає інших запитів
    • beforeSend – Спрацьовує до відправлення запиту, дозволяє редагувати XMLHttpRequest. Локальна подія
    • ajaxSend – Спрацьовує до відправлення запиту, аналогічно beforeSend
    • success – Спрацьовує по поверненню відповіді, коли немає помилок ні сервера, ні повернулися даних. Локальна подія
    • ajaxSuccess – Спрацьовує по поверненню відповіді, аналогічно success
    • error – Спрацьовує у випадку помилки. Локальна подія
    • ajaxError – Спрацьовує у випадку помилки
    • complete – Спрацьовує по завершенню поточного AJAX запиту (з помилкою або без – завжди спрацьовує).Локальна подія
    • ajaxComplete – Глобальна подія, аналогічне complete
    • ajaxStop – Даний метод викликається у разі коли більше немає активних запитів

    Цикл статей

  • jQuery для початківців
  • jQuery для початківців. Частина 2. JavaScript Меню
  • jQuery для початківців. Частина 3. AJAX
  • jQuery для початківців. Частина 4. Селектори
  • jQuery для початківців. Частина 5. Ефекти
  • jQuery для початківців. Частина 6. Події
  • jQuery для початківців. Частина 7. Пишемо плагіни
  • jQuery для початківців. Частина 8. Розширюємо фільтри
  • jQuery для початківців. Частина 9. Пишемо плагіни анімації