Парсим 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>

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/ryQCasyAYu8/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Парсим XML средствами jQuery | | 2012-06-19 12:07:30 | | Статьи Web-мастеру | | Наверняка вы уже знаете, как работать с форматом JSON через jQuery. Пришло время познакомиться с тем, как можно распарсить XML файл. Единственное весомое различие заключается в том, что вы можете | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: