Articles → Jquery → Reading An Xml File Using Jquery

Reading An Xml File Using Jquery

Introduction

In this tutorial we will discuss how to access an xml file using jQuery. Here we will read an xml file and display its content on the webpage.

Reading A File

Consider an xml file called SessionInfo.xml

<?xml version="1.0" encoding="utf-8" ?>
<RecentSessions>
    <Session>
        <Title>Session for .Net</Title>
        <Location>New Delhi</Location>
        <Date>12/1/2010</Date>
    </Session>
    <Session>
        <Title>Session for Cloud Computing</Title>
        <Location>Mumbai</Location>
        <Date>4/1/2010</Date>
    </Session>
    <Session>
        <Title>jQuery Techniques</Title>
        <Location>Chandigarh</Location>
        <Date>6/2/2010</Date>
    </Session>
    <Session>
        <Title>MySQL Database Session</Title>
        <Location>Banglore</Location>
        <Date>14/2/2010</Date>
    </Session>
</RecentSessions>

This xml gives the information about the different technical sessions. For the sake of this tutorial we will get the titles of different sessions. Using the technique you can get any information from xml file.

Syntax

$.ajax({
	url: "<URL of xml file>",
	dataType: "<data type>",
	success: < Method to parse >
});

This is the syntax for fetching the data from the xml file. Here in the ajax() function there are three parameters(there may be several other parameters but for the sake of this tutorial we are just taking these three parameters).

url – The path of the xml file on which to which request is send to fetch the data.

dataType – The data type of the output.

Success – Method which executes when the call to the server is successful i.e. when the response comes from the server.

As the name of the xml file is SessionInfo.xml so the code will be

$(document).ready(
        function () {
            $.ajax({
                type: "GET",
                url: "./SessionInfo.xml",
                dataType: "xml",
                success: xmlParser
            });                       
});

Here the output or the response from the server is in the xml format and xmlParser is the method which will be executed when the call to the server will be successful.

Now lets define the xmlParser method

function xmlParser(xml) {
	$(xml).find("Session").each(function() {
		$("#xmlData").append("<br/>" + $(this).find("Title").text());
	});
}

First of all look at the input parameter of the method. This is the response which we got from the server. In this example the xml variable contain the content of the xml file. The datatype of the output is xml.

Before I explain the code further there are two things which you should understand i.e. each method and find method.

each() method serves as the same purpose as the for loop in the programming language. In the example we have to loop through each session tag in the xml file using the each() method. find() method to find the particular element.

In the xml there is a series of tags session and inside the session there is a tag called title. Here $(xml) represents the xml i.e. the input variable so $(xml).find("Session") finds the session tag in the xml file.

$(this).find("Title").text() is to find the text of the tag title, which we have appended it in the div tag with id divData.

Code

Xml file

<?xml version="1.0" encoding="utf-8" ?>
<RecentSessions>
    <Session>
        <Title>Session for .Net</Title>
        <Location>New Delhi</Location>
        <Date>12/1/2010</Date>
    </Session>
    <Session>
        <Title>Session for Cloud Computing</Title>
        <Location>Mumbai</Location>
        <Date>4/1/2010</Date>
    </Session>
    <Session>
        <Title>jQuery Techniques</Title>
        <Location>Chandigarh</Location>
        <Date>6/2/2010</Date>
    </Session>
    <Session>
        <Title>MySQL Database Session</Title>
        <Location>Banglore</Location>
        <Date>14/2/2010</Date>
    </Session>
</RecentSessions>

Html page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
    xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1">
        <title></title>
        <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
        <script language="javascript" type="text/javascript">
        $(document).ready(
            function () {               

                $.ajax({
                    type:"GET",
                    url: "./SessionInfo.xml",
                    dataType: "xml",                    
                    success: function (xml) {
                        $(xml).find("Session").each(function() {
							$("#xmlData").append("<br/>" + $(this).find("Title").text());
							}
						);
                    }
                });
            });

            
          
    
        </script>
    </head>
    <body>
        <form id="form1">
            <div id="divData">
                <b>Numbers of Sessions</b>

                <div id="xmlData"></div>

            </div>
        </form>
    </body>
</html>

Posted By -	Karan Gupta

Posted On -	Tuesday, November 29, 2011

Query/Feedback

Your Email Id

Subject

Query/Feedback	Characters remaining 250