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