jQuery get XML data

XML (Extensible Markup Language) is a special format for structuring and storing data in files with .xml extension, with a syntax based on tags. The XML documents are commonly used in API applications when data is transferred from one server to another (from an external server to the site that has requested the transfer).
This tutorial shows you how to get data from an XML file and display it on the web page, using jQuery Ajax.

Let's see an example.
First we create a simple XML document in a file named "webpages.xml":

<?xml version="1.0" encoding="utf-8"?>
<webpages>
  <course id="1">
    <title>JavaScript Course</title>
    <url>http://coursesweb.net/javascript</url>
  </course>
  <course id="2">
    <title>jQuery Course</title>
    <url>http://coursesweb.net/jquery/jquery-tutorials</url>
  </course>
</webpages>

Now we create the HTML and jQuery code for an web page that will display some of these XML data, in a DIV element.
The page contains a button which when is clicked calls a jQuery ajax() function that accesses the XML file created above (webpages.xml), gets some data from its content (id, title, and url), then will include them into a <div> on the page.
To use XML in jQuery, you must set dataType:"xml" in the ajax() method (for other details, see the comments in code):

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Ajax - XML</title>
<script type="text/javascript" src="jquery_1.6.1.js"></script>
<script type="text/javascript"><!--
$(document).ready(function() {
  // when the tag with id="buton" is clicked, performs a Ajax GET request to an XML file
  // gets the XML data, parses oits elements and dysplays its data
  $('#buton').click(function() {
    $.ajax({
      type: 'get',
      url: 'webpages.xml',
      beforeSend: function() {
        // before send the request, displays a "Loading..." messaj in the element where the response will be placed
        $('#resp').html('Loading...');
      },
      timeout: 10000,        // sets timeout for the request (10 seconds)
      error: function(xhr, status, error) { alert('Error: '+ xhr.status+ ' - '+ error); },     // alert a message in case of error
      dataType: 'xml',
      success: function(response) {
        $('#resp').html('');        // removes the "loading..." notification from "#resp"

        // gets and parse each child element in <webpages>
        $(response).find('webpages').children().each(function() {
          // gets the "id", "title", and "url" of current child element
          var elm = $(this);
          var id = elm.attr('id');
          var title = elm.find('title').text();
          var url = elm.find('url').text();

          // displays data
          $('#resp').append(id+ ') Title: <b>'+ title+ '</b> -- URL: <b><i>'+ url+ '</i></b><br />');
        });
      }
    });
  });
});
--></script>
</head>
<body>
<div id="resp">Here will be displayed the data from the XML file.</div><br />
<button id="buton">Click</button>
</body>
</html>

- jQuery_object.children().each() - gets each directly child element in the "jQuery_object".
- elm.attr('id') - returns the value of the "id" attribute.
- elm.find('url').text() - returns the text content of the <url> element included in "elm".

Thursday 6 December 2012

jQuery get XML data

jQuery get XML data

No comments:

Post a Comment