Сегодня я покажу в этой статье небольшой способ как можно с помощью jQuery парсить xml документ.

Прежде чем описывать сам способ как парсить xml с помощью jQuery давайте создадим сам 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>

Как видите xml по своей структуре очень просто: 1 общий узел RecentBooks, в котором находятся узлы Book, в которых находятся описания: Название книги, описание книги и дата.

jQuery

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

ВАЖНО: С помощью javascript невозможно делать перекрестные запросы, для таких целей следует использовать JSONP

После того как наш скрипт получил xml файл можно приступать к его парсингу. Парсить xml файл можно очень легко используя функцию .find(). В этой функции можно указывать любой узел и loop нашего xml документа, чтобы получить данные. После этого можно с помощью jQuery добавить эти данные в DOM.

$(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

<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>

.main{
	width:1000px;
	margin:0 auto;
	height:130px;
}

.book{
	width:208px;
	float:left;
	margin:10px;
	border:1px #dedede solid;
	padding:5px;
	display:none;
}

.title{
	margin-bottom:6px;}

.description{
	font-size:11px;
	font-family:Geneva, Arial, Helvetica, sans-serif;
}

.date{
	font-size:10px;
	color:#999;
	margin-top:4px;
}

.loader{
	eight:11px;
}

После загрузки страницы будет выведено изображение загрузки, а после загрузки скриптом xml файла вместо изображения будут плавно отображены продукты.