Обмін форматизованими даними
Поширеною мовою опису даних є XML. Мова XML призначена для опису та зберігання даних ієрархічного типу. Вона використовується для зберігання та обміну форматизованими даними між різними програмними системами:
дані Web-серверів;
дані результатів запитів до серверів баз даних;
дані Web-сервісів;
новини RSS блоків.
мова XHTML є підмножиною XML.
Структура документа XML така:
заголовок <?xml version="1.0" encoding="UTF-8"?>, потім тег, що може містити ще багато тегів.
Синтаксис тегу:
<element attributes>
Текст чи теги
</element>
Тег без внутрішніх тегів/змісту закінчується символами />
Синтаксис атрибутів:
name="value"
Коментарі:
<!-- comment -->
Наведемо приклад файла XML:
<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
<book category="cooking">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year><price>30.00</price>
</book>
<book category="computers">
<title lang="en">XQuery Kick Start</title>
<author>James McGovern</author>
<year>2003</year><price>49.99</price>
</book>
<book category="children">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year><price>29.99</price>
</book>
<book category="computers">
<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year><price>39.95</price>
</book></bookstore>
Наведені дані про книги можна відобразити ієрархічною структурою (рис.1.2).
Рис.1.2. Дерево ієрархічних даних
Повернений XML файл записується у властивість (об’єкт) responseXML. Доступ до елементів даних та їх атрибутів здійснюється алгоритмом обходу дерева з використанням методів getElementsByTagName() та getAttribute(). Це проілюстровано наступним фрагментом програми JavaScript:
var xmlDoc = ajax.responseXML;
var books = xmlDoc.getElementsByTagName("book");
for (var i = 0; i < books.length; i++) {
var category = books[i].getAttribute("category");
if (category == "computers") {
var title = books[i].getElementsByTagName("title")[0].firstChild.nodeValue;
var author = books[i].getElementsByTagName("author")[0].firstChild.nodeValue;
var p = document.createElement("p");
p.innerHTML = title + ", by " + author;
document.body.appendChild(p);
}
}
Фрагмент формує параграф з автором та назвами книг, наприклад: "XQuery Kick Start, by James McGovern".
Використання 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!'
}
}