XML- Ajex Example

XML


//Test.php

<script src="jquery-1.11.0.min.js" type="text/javascript">
</script>
<script src="test.js" type="text/javascript"></script>
<body>
<h1>The child node of rot node are</h1>
<div id="dvContent">

</div>
</body>

//test.js
$(document).ready(function(){
 $("#dvContent").append("<ul></ul>");
 $.ajax({
   type: "GET",
   url: "BookList.xml",
   dataType: "xml",
   success: function(xml){
   $(xml).find('Book').each(function(){
     var sTitle = $(this).find('Title').text();
     var sPublisher = $(this).find('Publisher').text();
 var sAuthor = $(this).find('Firstname').text();
 
     $("<li></li>").html(sTitle + ", " + sPublisher+","+sAuthor).appendTo("#dvContent ul");
   });
 },
 error: function() {
   alert("An error occurred while processing XML file.");
 }
 });
});






//BookList.xml

<?xml version="1.0" encoding="utf-8" ?>
<BookList>
<Book>
    <Title>jQuery: Novice to Ninja</Title>
    <Publisher>Site point</Publisher>
<Author><Firstname>aashish</Firstname>
<Lastname>mittal</Lastname>
</Author>

 </Book>
 <Book>
    <Title>Learning jQuery</Title>
    <Publisher>PACKT</Publisher>
<Author><Firstname>aashish</Firstname>
<Lastname>mittal</Lastname>
</Author>
 </Book>
 <Book>
    <Title>Head First jQuery</Title>
    <Publisher>O'Reilly</Publisher>
 <Author><Firstname>aashish</Firstname>
<Lastname>mittal</Lastname>
</Author>
 </Book>
 <Book>
    <Title>jQuery UI 1.8</Title>
    <Publisher>PACKT</Publisher>
 <Author><Firstname>aashish</Firstname>
<Lastname>mittal</Lastname>
</Author>
 </Book>
</BookList>


Reactions: