Reading XML file using JQuery :
In this following article we are going to see how we can read an XML file using
JQuery. The JQuery AJAX API helps us to load data from the server without
refreshing the page in the browser. Let us start by creating a simple XML file
with some test data
We will name this file employees.xml
<employees>
<employee>
<firstname>abc</firstname>
<lastname>abcd</lastname> </employee>
<employee> <firstname>wxy</firstname>
<lastname>wxyz</lastname> </employee>
</employees>
Now we create a new HTML file and add references to the JQuery library
<head>
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
The ajax() method of the jquery helps us to send an ajax request to a particular
resource. In this case, for reading an XML file, we are going to use 5
parameters of Jquery Ajax.
- URL: This string
specifies the URL to which request is sent
- type: This
specifies the type of the request to be made ie either GET or POST. Default is
GET.
- dataType: This
specifies the type of data that is expected back from the server.x
- success: This
specifies the function to be executed if the request succeeds
- error: This
specifies the function to be executed if the request fails.
So let us
start writing jquery code to request some XML data through AJAX and process the
returned results.
<script
type="text/javascript">
$(document).ready(function
() {
$.ajax({
type:
"GET",
url:
"employees.xml",
dataType:
"xml",
success:
function (data) {
$(data).find('employee').each(function
() {
alert('Employee
found');
});
},
error:
function () {
alert('Could
not process the XML');
}
});
});
</script>
</script>Here you can that see we have filled in the details for all the
parameters that we talked about. The URL contains the xml file name, dataType is
XML, type of request is GET which is by default and we have written a success
function and an error function.
Open this file in FIREFOX browser and you will get alert boxes for the
number of employees in your XML file. Now try to open this page in the
Internet Explorer, it will give you the error ie the alert which we have
written in the ERROR parameter in Ajax request.
![fig1.gif]()
Why doesn't it work properly in IE ? This is because the data that is received
through Ajax request gets loaded into IE as simple text. We need to convert this
into XML to use it for further processing.
We make the following changes to our code.
FIX to make the code work in IE :
For the dataType parameter we check if the browser is IE, we receive the data as
TEXT
dataType: ($.browser.msie) ? "text" : "xml",
Our JQuery script changes to the below code
<script
type="text/javascript">
$(document).ready(function
() {
$.ajax({
| type:
"GET",
url:
"employees.xml",
dataType: ($.browser.msie)
? "text" : "xml",
success:
function (data) {
var xml;
if (typeof data
== "string") {
xml =
new ActiveXObject("Microsoft.XMLDOM");
xml.async =
false;
xml.loadXML(data);
}
else {
xml = data;
}
$(xml).find('employee').each(function
() {
alert('Employee
found');
});
},
error:
function () { alert('Could
not process the XML');
}
});
});
</script>
In the success function, we have checked if the received data is in the string
format ie TEXT. If yes, we create an XML object and load the received data into
it. If the received data is in XML format(in case of Firefox), we simply assign
the data to the 'xml' object
The complete XML and HTML files are attached with this article.
References :
http://api.jquery.com/jQuery.ajax/
http://www.newmediafun.com/2009/07/parsing-xml-with-jquery-in-internet-explorer/