getxml.html:
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(){
$.ajax({
type:"GET",
url:"student.xml",
dataType:"xml",
success:function(data){
var stud="<table border=\"1\">";
$(data).find("student").each(function(){
var name= $(this).find('first-name').text();
var mark = $(this).find('marks').text()
var city = $(this).find('city').text()
stud += "<tr><td>"+name+"</td>";
stud += "<td>"+mark+"</td>";
stud += "<td>"+city+"</td></tr>";
})
stud += "</table>";
$("#message").append(stud);
}
})
return false;
})
});
</script>
<body>
<p>To see the Names of the students extracted from XML file click the button given below:</p>
<input type="submit" id="submit" />
<div id="message">
</div>
</body>
student.xml:
<?xml version="1.0" encoding="utf-8"?>
<school>
<student>
<roll>110</roll>
<name>
<first-name>Anil</first-name>
<last-name>Sharma</last-name>
</name>
<address>
<street>
22/10 Sri Nagar Road
</street>
<city>
Ajmer
</city>
<state>
Rajasthan
</state>
<marks>
85
</marks>
</address>
</student>
<student>
<roll>111</roll>
<name>
<first-name>Ann</first-name>
<last-name>Arora</last-name>
</name>
<address>
<street>
H.NO 11-B Alwar Gate
</street>
<city>
Ajmer
</city>
<state>
Rajasthan
</state>
<marks>
92
</marks>
</address>
</student>
</school>
如图所示: