Jquery Course

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>https://coursesweb.net/javascript</url>
  </course>
  <course id="2">
    <title>jQuery Course</title>
    <url>https://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 is indicated to be used as container for menu with navigation links in Web site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Which CSS property shifts an item horizontally to the left or right of where it was?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Click on the Math object method which returns x, rounded downwards to the nearest integer.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicate the PHP function which returns the number of characters in string.
mb_strlen() count() stristr()
$str = "string with utf-8 chars åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 30
jQuery get XML data

Last accessed pages

  1. Simple Admin Login PHP Script (8218)
  2. Node.js Move and Copy Directory (11717)
  3. Send E-mail with HTML tags and Attachment (4131)
  4. Get and Modify content of an Iframe (25997)
  5. Prevent Hotlinking / Block External Access to Video and Audio files (3572)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (527)
  2. PHP Unzipper - Extract Zip, Rar Archives (427)
  3. SHA256 Encrypt hash in JavaScript (409)
  4. Read Excel file data in PHP - PhpExcelReader (364)
  5. Create simple Website with PHP (338)