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

Demo:
Here will be displayed the data from the XML file.

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML5 tag can be used to embed an external application (SWF, PDF) in web page?
<mark> <embed> <canvas>
<embed src="flash_game.swf" width="450" height="350" />
Which CSS pseudo-element adds a special style to the first line of a text?
:first-letter :before :first-line
#id:first-line {
  font-weight: bold;
  color: blue;
}
Click on the window object property which gets or sets the URL of current page.
window.location window.self window.status
var url = window.location;
alert(url);
Indicate the PHP function used to get the contents of a file or page and store it into a string.
fopen() file_put_contents() file_get_contents()
$homepage = file_get_contents("http://coursesweb.net/");
echo $homepage;
jQuery get XML data

Last accessed pages

  1. Doodle God 2 (754)
  2. Sonic (1349)
  3. Sonic Xtreme 2 (534)
  4. Qwop (59136)
  5. Batman (625)

Popular pages this month

  1. Qwop (4616)
  2. Drag Racer V3 (2238)
  3. Flash Games - Free online Games (1108)
  4. Bubbles3 (994)
  5. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (983)