怎么在jQuery中利用Ajax读取XML数据

tangjin

作者

怎么在jQuery中利用Ajax读取XML数据？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

具体如下：

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="JqueryAjax_Default"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>www.jb51.netjQuery使用ajax获取xml</title>
<styletype="text/css">
</style>
<scriptsrc="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$("#Display").click(function(){
$("#message").html('');
$.ajax({
type:"GET",
url:"Friend.xml",
dataType:"xml",
success:function(ResponseText){
vartable="<tableborder='1px'><tr><td>firstname</td><td>lastname</td><td>city</td></tr>";
$(ResponseText).find('friend').each(function(){
varfirst=$(this).find('firstName').text();
varlast=$(this).find('lastName').text();
varcity=$(this).find('city').text();
table+="<tr><td>"+first+"</td><td>"+last+"</td><td>"+city+"</td></tr>";
})
table+="</table>";
$("#message").append(table);
}
});
});
});
</script>
</head>
<body>
<formid="form1"runat="server">
<label>DisplayMyFriends</label><br/>
<inputtype="button"value="Display"id="Display"/>
<divid="message"></div>
</form>
</body>
</html>

Friend.xml：

<?xmlversion="1.0"encoding="utf-8"?>
<friends>
<friend>
<name>
<firstName>Guo</firstName>
<lastName>Hu</lastName>
</name>
<address>
<province>Shanghai</province>
<city>PuDong</city>
</address>
</friend>
<friend>
<name>
<firstName>Lei</firstName>
<lastName>Hu</lastName>
</name>
<address>
<province>hubei</province>
<city>xiantao</city>
</address>
</friend>
<friend>
<name>
<firstName>JunWen</firstName>
<lastName>Li</lastName>
</name>
<address>
<province>hubei</province>
<city>wuhan</city>
</address>
</friend>
<friend>
<name>
<firstName>Jinhao</firstName>
<lastName>Liu</lastName>
</name>
<address>
<province>ShanXi</province>
<city>Taiyuan</city>
</address>
</friend>
<friend>
<name>
<firstName>Cheng</firstName>
<lastName>Fang</lastName>
</name>
<address>
<province>GuangDong</province>
<city>GuangZhou</city>
</address>
</friend>
</friends>

运行结果：