Використання jQuery для застосування Ajax

Значно простіше можна реалізувати відправлення асинхроних запитів від клієнта і отрмання відповіді від сервера з допомогою методів технології jQuery, які автоматизують керування процесами в Ajax.

 

Таблиця 6.1
Метод	Опис
$.ajax({name:value, name:value, ... })	Виконує запит AJAX
$(selector).ajaxComplete(function(event,xhr,options))	Визначає функцію для запуску, коли запит AJAX завершується
$(selector).ajaxError(function(event,xhr,options,exc))	Визначає функцію для запуску, коли запит AJAX завершується з помилкою
$(selector).ajaxSend(function(event,xhr,options))	Визначає функцію для запуску, перш ніж запит AJAX відправляється
$.ajaxSetup({name:value, name:value, ... })	Встановлює значення за замовчуванням для наступних запитів AJAX
$(selector).ajaxStart(function())	Визначає функції при першому запиті AJAX
$(selector).ajaxStop(function())	Визначає функцію , коли всі AJAX запити завершились
$(selector).ajaxSuccess(function(event,xhr,options))	Визначає функцію якзо запит AJAX успішно завершений
$(selector).get(url,data,success(response,status,xhr), dataType)	Завантаження даних з сервера за допомогою AJAX, HTTP GET-запиту
$(selector).getJSON(url,data,success(data,status,xhr))	Завантаження JSON-кодованих даних від сервера, використовуючи HTTP GET-запит
$(selector).getScript(url,success(response,status))	Завантаження (і виконання) JavaScript з сервера за допомогою AJAX, HTTP GET-запиту
$(selector).load(url,data,callback)	Завантаження HTML даних з сервера і розміщення їх у вибраний елемент
$.param(object,trad)	Створює подання масиву або об'єкта (може бути використана в якості URL рядок запиту для запитів AJAX)
$(selector).post(url,data,success(response,status,xhr), dataType)	Завантаження даних з сервера, використовуючи HTTP POST AJAX запит
$(selector).serialize()	Кодування набору елементів форми у вигляді рядка для пересилання
$(selector).serializeArray()	Кодування набору елементів форми у вигляді масиву пар: назва і значення

 

У таблиці використано такі позначення :

· url – адреса сервера, тип (формат) даних, дані та назва функції, що прийме на опрацювання дані;

· success(response,status,xhr) – функція для виконання після успішного завершення запиту;

· response – дані відповіді;

· status- статус запиту ("success", "notmodified", "error", "timeout", або "parsererror");

· xhr – містить об’єкт XMLHttpRequest;

· dataType – це тип даних (xml, html, script, json,text, _default) з сервера (необов’язковий параметр).

Наведемо приклад виклику основного методу $.ajax(), з наступними параметрами:

$.ajax({

url: url, data: data, success: callback, dataType: 'json'});

Аналогічні функції виконують методи

· $(selector).get(),

· $(selector).getJSON(),

· $(selector).post().

Наступний приклад надсилає запит, отримує відповідь з файлом та заносить окремі значення ключових слів у відповідні елементи сторінки. Реалізовано це ієрархією 4-х функцій: функція дії на завантажену сторінку (функція дії на подію (функція дії на опрацювання XML – файлу (функція дії на знаходження та знанесення значень відповідних ключів) ) ) ).

$(document).ready(function(){ // після завантаження

$('#example').click(function(){ // ф-я для події id = example

$.post('ajax/example.xml', {}, function(xml){ / дані з файлу

$('#example').html('');

$(xml).find('note').each(function(){ // заповнення

$('#example').append('To:' + $(this).find('to').text() + '<br/>')

.append('From: ' + $(this).find('from').text() + '<br/>')

.append('<b>' + $(this).find('heading').text() + '</b><br/>')

.append( $(this).find('body').text() + '<br/>');

});

}, 'xml'); // тип даних

})

});

Тут використовуються раніше наведені методи доступу до XML тексту та знаходження значень та доповнення елементів сторінки:

· $('#example').html('')- Зміна змісту елемента (inner) HTML

· $(xml).find('note').each(function(){ } – пошук ідентифікатора і для кожного виконати функцію

· $(this).find('to').text() – пошук ключа і занесення значення у text

· $('#example').append() - додавання змісту до елемента (inner) HTML

Файл example.xml має вигляд:

<?xml version="1.0" encoding="UTF-8"?>

<note>

<to>Peter</to>

<from>Nick</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

Подібним чином наступний приклад надсилає запит, отримує відповідь з JSON текстом у файлі та заносить окремі значення ключових слів у відповідні елементи сторінки. Тут є тльки три функції, оскільки не потрібно шукати ключові слова у JSON – файлі (на відміну від XML-файлу), а заносити дані згідно назви змінних, які відповідають назвам ключів у вхідному файлі.

$(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 + '<br/>')

.append('From: ' + json.note.from + '<br/>')

.append('<b>' + json.note.heading + '</b><br/>')

.append( json.note.body + '<br/>');

});

})

});

Сам файл example.json має вигляд подібно до асоціативного масиву в мовах JavaScript чи PHP:

{

note:{

to:'Peter',

from:'Nick',

heading:'Reminder',

body:'Don\'t forget to bring me my book!'

}

}