На этом шаге мы рассмотрим использование XML-документов.
Название XML является частью аббревиатуры AJAX, но мы еще не рассматривали загрузку данных в формате XML. Эта возможность реализуется просто и очень похожа на методику работы с форматом JSON. Для начала нам потребуется XML-файл d.xml, содержащий некоторые данные, которые требуется отобразить:
<?xml version="1.0" encoding="win-1251"?>
<entries>
<entry term="DARKNESS, THE" part="Hard Rock">
<definition>
The Darkness - английская хард-рок группа,
образованная в английском городе Лоустофт в 2000 году.
</definition>
</entry>
<entry term="DEAD CAN DANCE" part="Ethnic Fusion">
<definition>
Dead Can Dance - австралийский музыкальный коллектив.
</definition>
</entry>
<entry term="DEF LEPPARD" part="Hard'N'Heavy">
<definition>
Def Leppard - британская рок-группа из Шеффилда, Йоркшир, Англия;
образована в 1977 году.
</definition>
<quote author="http://ru.wikipedia.org/wiki/Def_Leppard">
<line>Их стилевая манера с годами претерпела ряд изменений,
двигаясь от хард-рока к поп-року.</line>
<line>Def Leppard дебютировали как NWOBHM-группа с альбомом
On through the Night в 1980 году.</line>
<line>Пик популярности этой группы пришёлся на 1984-89 годы,
когда вышли их платиновые альбомы <Pyromania> и
<Hysteria></line>
</quote>
</entry>
<entry term="DEPECHE MODE" part="New Wave">
<definition>
Depeche Mode - британский музыкальный коллектив, образовавшийся
в 1980 году в городе Базилдон (графство Эссекс).
</definition>
</entry>
<entry term="DEVO" part="New Wave">
<definition>
Devo - американская рок-группа, образованная в Акроне, Огайо,
в 1972 году и завоевавшая репутацию одной из самых изобретательных
и новаторских в новой волне.
</definition>
</entry>
<entry term="DINOSAUR JR." part="Alternative">
<definition>
Dinosaur Jr. (первоначально - Dinosaur) - альтернативная рок-группа
из США, основанная в 1984 г.
</definition>
</entry>
<entry term="DOKKEN" part="Hard Rock">
<definition>
Dokken - американская рок-группа, образованная в 1978 году в
Лос-Анджелесе.
</definition>
<quote author="http://ru.wikipedia.org/wiki/Dokken">
<line>Музыка группы сочетала хард-рок с элементами
хеви-метала.</line>
<line>Часто музыку Dokken относят к стилю глэм-метала.</line>
<line>По всему миру было продано более 10 миллионов альбомов
группы.</line>
<line>Состав Dokken часто менялся, неизменным участником
оставался только основатель и вокалист группы Дон Доккен.</line>
</quote>
</entry>
<entry term="DOOBIE BROTHERS, THE" part="Soft Rock">
<definition>
The Doobie Brothers - американская музыкальная группа, которая начиная
с 1970 года играла калифорнийский поп-рок в духе The Beach Boys.
</definition>
</entry>
<entry term="DOORS" part="Classic Rock">
<definition>
The Doors - американская рок-группа, созданная в 1965 году в
Лос-Анджелесе, оказавшая сильное влияние на культуру и искусство
60-х годов.
</definition>
<quote>
<line>Загадочные, мистические, иносказательные тексты песен и
яркий образ вокалиста группы, Джима Моррисона, сделали ее едва ли не
самой знаменитой и равно же противоречивой группой своего времени.</line>
<line>Общий тираж альбомов группы превысил 80 млн экземпляров.</line>
</quote>
</entry>
<entry term="DRACONIAN" part="Gothic Doom">
<definition>
Draconian - шведская готик-дум-метал группа, играющая в духе
My Dying Bride, Tristania и ранних Theatre of Tragedy.
</definition>
</entry>
<entry term="DRAGONFORCE" part="Power">
<definition>
DragonForce - рок-группа из Великобритании, играющая Power Metal.
</definition>
</entry>
</entries>
Конечно, эти данные можно выразить множеством способов, и некоторые из них более близко имитируют структуру, выбранную для форматов HTML и JSON, использовавшихся выше. Однако здесь мы постарались продемонстрировать некоторые особенности XML, которые обеспечивают более высокую удобочитаемость этого формата для человека, например использование атрибутов для определения терминов и разделов вместо отдельных тегов.
Начало функции уже знакомо нам:
$(document).ready(function() {
$('#letter-d a').click(function() {
$.get('d.xml', function(data) {
});
return false;
});
});
На этот раз основную работу будет выполнять функция $.get(). Вообще говоря, эта функция просто извлекает файл из заданного адреса URL и передает функции обратного вызова простой текст. Однако если из ответа известно, что он имеет формат XML, благодаря тому, что сервер вместе с ответом возвращает его тип MIME, функция обратного вызова получит дерево DOM XML.
К счастью, как мы уже видели, библиотека jQuery обладает мощными средствами обхода дерева DOM. При обработке документов XML мы можем использовать обычные методы .find(), .filter() и другие методы обхода дерева, как если бы это был документ HTML:
$(document).ready(function() {
$('#letter-d a').click(function() {
$.get('d.xml', function(data) {
$('#dictionary').empty();
$(data). find('entry').each( function() {
var $entry = $(this);
var html = '<div class="entry">';
html += '<h3 class="term">' + $entry.attr('term')
+ '</h3>';
html += '<div class="part">' + $entry.attr('part')
+ '</div>';
html += '<div class="definition">';
html += $entry.find('definition').text();
var $quote = $entry.find('quote');
if ($quote.length) {
html += '<div class="quote">';
$quote.find('line').each( function() {
html += '<div class="quote-line">'
+ $(this).text() + '</div>';
});
if ($quote.attr('author')) {
html += '<div class="quote-author">'
+ $quote.attr('author') + '</div>';
}
html += '</div>';
}
html += '</div>';
html += '</div>';
$('#dictionary').append($(html));
});
});
return false;
});
});
Рис.1. Вид страницы после загрузки данных в формате XML
Полный текст этого примера можно взять здесь.Улучшенный механизм селекторов, реализованный в jQuery, упрощает поиск элементов документа XML даже в самых сложных ситуациях. Например, предположим, что нам требуется отобразить только те статьи, в которых имеются цитаты, для которых в свою очередь указаны авторы. Для этого мы можем организовать выборку только тех статей, которые имеют вложенные элементы <quote>, заменив селектор entry на entry:has(quote). Затем можно добавить дополнительное ограничение и отобрать только те статьи, в которых элемент <quote> имеет атрибут author, указав селектор entry:has(quote[author]). Теперь строка с начальным селектором будет выглядеть так:
$(data). find('entry:has(quote[author])').each( function() {
Этот новый селектор соответствующим образом ограничивает перечень возвращаемых словарных статей, как показано на рисунке 2.
Рис.2. Вид страницы с ограниченным набором словарных статей
Полный текст этого примера можно взять здесь.Этот новый способ использования уже знакомых нам методов обхода дерева DOM подчеркивает гибкость поддержки селекторов CSS в библиотеке jQuery. Синтаксис стилей CSS обычно используется для улучшения оформления страниц HTML, поэтому для определения селекторов в стандартных файлах .css используются имена тегов HTML, такие как div или body, чтобы указать местоположение искомого содержимого. Однако при работе с библиотекой jQuery наравне со стандартными именами тегов HTML допускается использовать произвольные имена тегов XML, такие как entry и definition.
На следующем шаге мы рассмотрим выбор формата данных.
