Jun 27, 2010

jQuery Read XML Document



In a long time ago, using javascript to read a XML Document is a suffering job. Like this:

Copy from w3schools

note.xml:
<note>
    <to>Tove</to>
    <from>Jani</from>
    <heading>Reminder</heading>
    <body>Don't forget me this weekend!</body>
</note>


Script:
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "note.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;

document.getElementById("to").innerHTML = xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
document.getElementById("from").innerHTML = xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
document.getElementById("message").innerHTML = xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;

In this script, There are many getElementsByTagName("xxx")[0] and childNodes[0]. It just read a simple XML. If read a more complex XML? It can make me crazy. Now, We can use jQuery to read XML file.

jQuery selector make select HTML more easy, but jQuery selector also can read XML document. Not only HTML document.

Now, I am going to show you how to read XML by jQuery. In this example, I will display a list of book title and book author.

Example:
XML file copy form Microsoft

books.xml:
<?xml version="1.0"?>
<catalog>
  <book id="bk101">
    <author>Gambardella, Matthew</author>
    <title>XML Developer's Guide</title>
    <genre>Computer</genre>
    <price>44.95</price>
    <publish_date>2000-10-01</publish_date>
    <description>An in-depth look at creating applications
with XML.</description>
  </book>
  <book id="bk102">
    <author>Ralls, Kim</author>
    <title>Midnight Rain</title>
    <genre>Fantasy</genre>
    <price>5.95</price>
    <publish_date>2000-12-16</publish_date>
    <description>A former architect battles corporate zombies,
an evil sorceress, and her own childhood to become queen
of the world.</description>
  </book>
  <book id="bk103">
    <author>Corets, Eva</author>
    <title>Maeve Ascendant</title>
    <genre>Fantasy</genre>
    <price>5.95</price>
    <publish_date>2000-11-17</publish_date>
    <description>After the collapse of a nanotechnology
society in England, the young survivors lay the
foundation for a new society.</description>
  </book>
  <book id="bk104">
    <author>Corets, Eva</author>
    <title>Oberon's Legacy</title>
    <genre>Fantasy</genre>
    <price>5.95</price>
    <publish_date>2001-03-10</publish_date>
    <description>In post-apocalypse England, the mysterious
agent known only as Oberon helps to create a new life
for the inhabitants of London. Sequel to Maeve
Ascendant.</description>
  </book>
  <book id="bk105">
    <author>Corets, Eva</author>
    <title>The Sundered Grail</title>
    <genre>Fantasy</genre>
    <price>5.95</price>
    <publish_date>2001-09-10</publish_date>
    <description>The two daughters of Maeve, half-sisters,
battle one another for control of England. Sequel to
Oberon's Legacy.</description>
  </book>
  <book id="bk106">
    <author>Randall, Cynthia</author>
    <title>Lover Birds</title>
    <genre>Romance</genre>
    <price>4.95</price>
    <publish_date>2000-09-02</publish_date>
    <description>When Carla meets Paul at an ornithology
conference, tempers fly as feathers get ruffled.</description>
  </book>
  <book id="bk107">
    <author>Thurman, Paula</author>
    <title>Splish Splash</title>
    <genre>Romance</genre>
    <price>4.95</price>
    <publish_date>2000-11-02</publish_date>
    <description>A deep sea diver finds true love twenty
thousand leagues beneath the sea.</description>
  </book>
  <book id="bk108">
    <author>Knorr, Stefan</author>
    <title>Creepy Crawlies</title>
    <genre>Horror</genre>
    <price>4.95</price>
    <publish_date>2000-12-06</publish_date>
    <description>An anthology of horror stories about roaches,
centipedes, scorpions  and other insects.</description>
  </book>
  <book id="bk109">
    <author>Kress, Peter</author>
    <title>Paradox Lost</title>
    <genre>Science Fiction</genre>
    <price>6.95</price>
    <publish_date>2000-11-02</publish_date>
    <description>After an inadvertant trip through a Heisenberg
Uncertainty Device, James Salway discovers the problems
of being quantum.</description>
  </book>
  <book id="bk110">
    <author>O'Brien, Tim</author>
    <title>Microsoft .NET: The Programming Bible</title>
    <genre>Computer</genre>
    <price>36.95</price>
    <publish_date>2000-12-09</publish_date>
    <description>Microsoft's .NET initiative is explored in
detail in this deep programmer's reference.</description>
  </book>
  <book id="bk111">
    <author>O'Brien, Tim</author>
    <title>MSXML3: A Comprehensive Guide</title>
    <genre>Computer</genre>
    <price>36.95</price>
    <publish_date>2000-12-01</publish_date>
    <description>The Microsoft MSXML3 parser is covered in
detail, with attention to XML DOM interfaces, XSLT processing,
SAX and more.</description>
  </book>
  <book id="bk112">
    <author>Galos, Mike</author>
    <title>Visual Studio 7: A Comprehensive Guide</title>
    <genre>Computer</genre>
    <price>49.95</price>
    <publish_date>2001-04-16</publish_date>
    <description>Microsoft Visual Studio 7 is explored in depth,
looking at how Visual Basic, Visual C++, C#, and ASP+ are
integrated into a comprehensive development
environment.</description>
  </book>
</catalog>

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>jQuery Read XML Sample</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
  </script>
  <script type="text/javascript">
      $(function(){
          $.ajax({
              url: 'books.xml',
              dataType: 'xml',
              success: function(xml){
                  //Use jQuery to read XML Document
                  var $books = $(xml).find("book");

                  //display all book title and author
                  $.each($books, function(i, book){
                      var author = $(book).children("author").text();
                      var bookName = $(book).children("title").text();
                      var li = $("<li>").text(bookName + " - " + author);
                      $("#books").append(li);
                  });
              }
          });
      });
  </script>
  </head>
  <body>
    <ul id="books">
    </ul>
  </body>
</html>

In function(i, book) book is not a jQuery object. It is a XML Document object, So I need to convert XML Document object to jQuery object again.

Get book title and author:
var author = $(book).children("author").text();
var bookTitle = $(book).children("title").text();

Create a li DOM object and append text:
var li = $("<li>").text(bookName + " - " + author);

Append li DOM object to ul DOM object:
$("#books").append(li);

Result:
<ul id="books">
  <li>XML Developer's Guide - Gambardella, Matthew</li>
  <li>Midnight Rain - Ralls, Kim</li>
  <li>Maeve Ascendant - Corets, Eva</li>
  <li>Oberon's Legacy - Corets, Eva</li>
  <li>The Sundered Grail - Corets, Eva</li>
  <li>Lover Birds - Randall, Cynthia</li>
  <li>Splish Splash - Thurman, Paula</li>
  <li>Creepy Crawlies - Knorr, Stefan</li>
  <li>Paradox Lost - Kress, Peter</li>
  <li>Microsoft .NET: The Programming Bible - O'Brien, Tim</li>
  <li>MSXML3: A Comprehensive Guide - O'Brien, Tim</li>
  <li>Visual Studio 7: A Comprehensive Guide - Galos, Mike</li>
</ul>

  • XML Developer's Guide - Gambardella, Matthew
  • Midnight Rain - Ralls, Kim
  • Maeve Ascendant - Corets, Eva
  • Oberon's Legacy - Corets, Eva
  • The Sundered Grail - Corets, Eva
  • Lover Birds - Randall, Cynthia
  • Splish Splash - Thurman, Paula
  • Creepy Crawlies - Knorr, Stefan
  • Paradox Lost - Kress, Peter
  • Microsoft .NET: The Programming Bible - O'Brien, Tim
  • MSXML3: A Comprehensive Guide - O'Brien, Tim
  • Visual Studio 7: A Comprehensive Guide - Galos, Mike


3 comments:

naklejki scienne said...

I really enjoy reading Your page, I have added it to favourites. Hope that You will keep up with good job, your post was very amusing. I hope you have a good day! Naklejki scienne, naklejki na sciany

long island family law said...

What type of software is used in the animated pictures as well as in the video games?

Tahir Bahi said...

thanks for sharing great post admin nice work
Revo Uninstaller Pro v3.1.5 Patch

Post a Comment

Twitter Delicious Facebook Digg Google Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Best Hostgator Coupon Code