Печать

Парсим XML средствами jQuery

Наверняка вы уже знаете, как работать с форматом JSON через jQuery. Пришло время познакомиться с тем, как можно распарсить XML файл. Единственное весомое различие заключается в том, что вы можете использовать XML только в пределах домена, в котором происходит AJAX запрос. Для использования сторонних файлов вам понадобится JSONP.

XML

Теперь я приведу пример XML кода. Вы его можете найти в файле books.xml. Внутри вы обнаружите главный элемент (корневой) и его структурированных потомков.

<?xml version="1.0" encoding="utf-8" ?>
<RecentBooks>
  <Book>
    <Title>My Cool Book Title</Title>
    <Description>The my cool book is possibly the best cool book in that any developer could use to be a great web designer.</Description>
    <Date>12/1/2010</Date>
  </Book>
  <Book>
    <Title>Another PHP book</Title>
    <Description>Learn everything about PHP with 'Another PHP book,' your ultimate guide to the ins and outs of PHP.</Description>
    <Date>4/1/2010</Date>
  </Book>
  <Book>
    <Title>jQuery Techniques</Title>
    <Description>jQuery techniques runs you through real life examples of jQuery from beginner to expert</Description>
    <Date>6/2/2010</Date>
  </Book>
  <Book>
    <Title>MySQL Database Book</Title>
    <Description>Brush up your knowledge with the best MySQL database book on the market.</Description>
    <Date>14/2/2010</Date>
  </Book>
</RecentBooks>

JavaScript

Для того чтобы распарсить XML файл, нам надо сделать AJAX запрос.

ВАЖНО. Если вы хотите делать кросдоменные AJAX запросы, то вам следует использовать JSONP

Итак, файл у нас есть. Теперь воспользуемся методом .find(), для того чтобы добраться до нужного нам элемента.

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "books.xml",
        dataType: "xml",
        success: xmlParser
    });
});

function xmlParser(xml) {

    $('#load').fadeOut();

    $(xml).find("Book").each(function () {

        $(".main").append('<div class="book"><div class="title">' + $(this).find("Title").text() + '</div><div class="description">' + $(this).find("Description").text() + '</div><div class="date">Published ' + $(this).find("Date").text() + '</div></div>');
        $(".book").fadeIn(1000);

    });

}

HTML

Содержимое XML файла будет записано в блоке с классом .main.

<div class="main">
<div align="center" class="loader"><img src="/loader.gif" id="load" width="16" height="11" align="absmiddle"/></div>
</div>

<div class="clear"></div>
Интересная статья? Поделись ей с другими: