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
Click on the tag that creates an ordered list
<ul> <tr> <ol>
<ol>
  <li>List-1</li>
  <li>List-2</li>
</ol>
Which selector represents the ID of an element in CSS
.name #name name
#id {
  color: #0110fb;
}
What statement creates an object in JavaScript?
{} [] new Date()
var obj = {"site": "CoursesWeb.net", "pr": 5};
alert(obj.site);
Indicate the instruction used to evaluate if a condiition is True or False
else if() switch()
$var = 8;
if($var == 8) echo $var;
jQuery get XML data

Last accessed pages

  1. Classes - Static Elements (46)
  2. Uploading multiple files (71)
  3. Display data from PHP Array, or MySQL in HTML table (909)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (3351)
  5. Forms and Input (413)

Top accessed pages

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