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
What attribute makes an option from <select> selected?
checked="checked" selected="selected" disabled="disabled"
<select name="a_name">
 <option value="val1">Option 1</option>
 <option value="val2" selected="selected">Option 2</option>
</select>
What CSS value allows to create color gradients for background?
contain repeat-x linear-gradient
#id {
  background: linear-gradient(top left, #1f1, #fff, #11f);
}
What statement creates an array in JavaScript?
[] {} new Object()
var arr = [1, "CoursesWeb.net", "MarPlo.net"];
alert(arr[2]);
Indicate the PHP function used to redirect to other page.
function() header() switch()
header("Location: http://coursesweb.net/");
exit;
jQuery get XML data

Last accessed pages

  1. EasyPhpThumbnail Class (137)
  2. Drag and Drop with jQuery UI (908)
  3. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (5271)
  4. Shape Tween - Flash Animation (367)
  5. ActionScript 3 - Change MovieClip Color (807)

Top accessed pages

  1. PHP-MySQL free course, online tutorials PHP MySQL code (5469)
  2. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (5271)
  3. Get Attribute (ID, Class, Name, Title, Src) with jQuery (5075)
  4. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (4858)
  5. PHP Chat Script (4620)