Articles → Jquery → Reading an xml file using jQuery

Reading an xml file using jQuery




Introduction





Reading a 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>





Syntax


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












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






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













Code




<?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>




<!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({                    

                    url: "SessionInfo.xml",

                    dataType: "xml",

                    success: xmlParser

                });
            }
        );
            function xmlParser(xml) {
                $(xml).find("Session").each(function() {
                    $("#divData").append("
            <br/>" + $(this).find("Title").text());
                }
                );
            }
    
        </script>
    </head>
    <body>
        <form id="form1">
            <div id="divData">
                <b>Numbers of Sessions</b>
            </div>
        </form>
    </body>
</html>



Posted By  -  Karan Gupta
 
Posted On  -  Tuesday, November 29, 2011

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250