Представляю Вам третю статтю із серії jQuery для початківців. В цей раз я постараюся розповісти про реалізації AJAX запитів…
Матеріали даної статті включені в підручник «jQuery для початківців». Підручник розповсюджується безкоштовно, і супроводжується інтерактивними прикладами.
Що таке AJAX я думаю розповідати не варто, бо з приходом веб-два-нуль більшість користувачів вже вернуть носом від перезавантажень сторінки цілком, а з появою jQuery реалізація спростилася в рази…
Примітка: У всіх прикладах використовується скорочений варіант виклику jQuery методів, використовуючи функцію $ (знак долара)
jQuery(..).load
Почнемо з самого простого – завантаження HTML коду у необхідний нам DOM елемент на сторінці. Для цієї мети нам підійде метод load. Даний метод може приймати наступні параметри:
Наведу приклад 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 запит. Може приймати наступні параметри:
jQuery.post
Даний метод аналогічний попередній, лише передавані дані підуть на сервер за допомогою POST’а. Може приймати наступні параметри:
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). Може приймати наступні параметри:
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. Може приймати наступні параметри:
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 – Даний метод викликається у разі коли більше немає активних запитів
