AJAX full form: Asynchronous JavaScript and XML
We’ll also see the use of setTimeout() function.
Using AJAX technique, we fetch only the required data from the server without reloading the entire page.
In this article, we fetch the data present in XML format and display fetched content on the webpage and update it in real time, without reloading the html page.
HTML code
index.html
Here we have 1 ul tag. We’ll load the list items dynamically using jQuery, from XML file.
XML File Content
corporateData.xml
Here we have a base tag called corporate. Inside that we have employee details like name, age and company which is bound inside employee tag. Each employee will have his/her details inside separate/individual employee tag.
For more about XML, please visit XML category.
jQuery File: corporateData() function
my_script.js
Here we write a custom jQuery function called corporateData.
$.ajax() is a jQuery static method and it has a lot of properties. In this tutorial, we illustrate url, dataType, success and error properties.
Specify the url from which the data has to be fetched, along with its data type.
If the file gets parsed successfully, the function inside the success property gets executed. If there is an error, the error property function gets triggered.
Once the xml file gets parsed successfully, $.ajax method throws an object which contains xml file data. We catch this data with anonymous function present in success property.
Next, we clear any previous data got attached to the unordered list of html document.
Using the object, we find each employee tags present inside the XML file, fetch individual name, age and company names and then append it to the unordered list.
jQuery File: setTimeout() method
my_script.js
Inorder to make sure our application fetches the fresh data from the
XML file, we check the XML file after certain period of time.
Using setTimeout() method of jQuery:
setTimeout() takes two parameters, first one being the function names to be called and the second one being the time interval after which those functions has to be called.
using setTimeout() we have called itself( fetch() ) and corporateData() function. This makes sure, whenever the XML file gets updated, our application fetches the data and displays on our webpage, without refreshing the page.
jQuery File: call the functions to make it work
my_script.js
Make sure to call both corporateData and fetch method once the page
loads. This makes sure the XML data is fetched before fetch functions
tries to re-fetch the things.
jQuery File: Complete Code
my_script.js
corporateData.xml and index.html files must be in the same folder.
We’ll also see the use of setTimeout() function.
Using AJAX technique, we fetch only the required data from the server without reloading the entire page.
In this article, we fetch the data present in XML format and display fetched content on the webpage and update it in real time, without reloading the html page.
HTML code
index.html
1 2 3 4 5 6 7 8 9 10 | <html> <head><title>Reading an XML file using jQuery</title></head> <body> <ul></ul> <script src="script/jquery-1.8.1.min.js" type="text/javascript"></script> <script src="script/my_script.js" type="text/javascript"></script> </body> </html> |
XML File Content
corporateData.xml
1 2 3 4 5 6 7 8 9 | < ?xml version="1.0" ?> <corporate> <employee> <name>Satish</name> <age>25</age> <company>Microsoft</company> </employee> </corporate> |
For more about XML, please visit XML category.
jQuery File: corporateData() function
my_script.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | function corporateData() {
$.ajax({
url: "corporateData.xml",
dataType: "xml",
success: function(data) {
$("ul").children().remove();
$(data).find("employee").each( function() {
var info = '<li>Name: '+$(this).find("name").text()+'</li>
<li>Age: '+$(this).find("age").text()+'</li>
<li>Company: '+$(this).find("company").text()+'</li>';
$("ul").append(info);
});
},
error: function() { $("ul").children().remove();
$("ul").append("<li>There was an error baby!</li>"); }
});
}
|
$.ajax() is a jQuery static method and it has a lot of properties. In this tutorial, we illustrate url, dataType, success and error properties.
Specify the url from which the data has to be fetched, along with its data type.
If the file gets parsed successfully, the function inside the success property gets executed. If there is an error, the error property function gets triggered.
Once the xml file gets parsed successfully, $.ajax method throws an object which contains xml file data. We catch this data with anonymous function present in success property.
Next, we clear any previous data got attached to the unordered list of html document.
Using the object, we find each employee tags present inside the XML file, fetch individual name, age and company names and then append it to the unordered list.
jQuery File: setTimeout() method
my_script.js
1 2 3 4 5 6 7 8 | function fetch() {
setTimeout( function() {
corporateData();
fetch();
}, 100);
}
|
Using setTimeout() method of jQuery:
setTimeout() takes two parameters, first one being the function names to be called and the second one being the time interval after which those functions has to be called.
using setTimeout() we have called itself( fetch() ) and corporateData() function. This makes sure, whenever the XML file gets updated, our application fetches the data and displays on our webpage, without refreshing the page.
jQuery File: call the functions to make it work
my_script.js
1 2 3 4 | $(document).ready( function() {
corporateData();
fetch();
});
|
jQuery File: Complete Code
my_script.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | $(document).ready( function() {
corporateData();
fetch();
});
function fetch() {
setTimeout( function() {
corporateData();
fetch();
}, 100);
}
function corporateData() {
$.ajax({
url: "corporateData.xml",
dataType: "xml",
success: function(data) {
$("ul").children().remove();
$(data).find("employee").each( function() {
var info = '<li>Name: '+$(this).find("name").text()+'</li>
<li>Age: '+$(this).find("age").text()+'</li>
<li>Company: '+$(this).find("company").text()+'</li>';
$("ul").append(info);
});
},
error: function() { $("ul").children().remove();
$("ul").append("<li>There was an error baby!</li>"); }
});
}
|
No comments:
Post a Comment