本文實例講述了ajax對服務器返回xml的處理方法。分享給大家供大家參考。具體分析如下：
在ajax 中，服務器端如果返回的xml 文檔，則可以通過異步對象的responsexml 屬性來獲取器xml 數據。而開發者可以利用dom 的相關方法對其進行處理。
假設服務器返回的xml 文檔，如下所示：
<?xml version=1.0 encoding=gb2312?> <list> <caption>member list</caption> <member> <name>isaac</name> <class>w13</class> <birth>jun 24th</birth> <constell>cancer</constell> <mobile>1118159</mobile> </member> <member> <name>fresheggs</name> <class>w610</class> <birth>nov 5th</birth> <constell>scorpio</constell> <mobile>1038818</mobile> </member> <member> <name>girlwing</name> <class>w210</class> <birth>sep 16th</birth> <constell>virgo</constell> <mobile>1307994</mobile> </member> <member> <name>tastestory</name> <class>w15</class> <birth>nov 29th</birth> <constell>sagittarius</constell> <mobile>1095245</mobile> </member> <member> <name>lovehate</name> <class>w47</class> <birth>sep 5th</birth> <constell>virgo</constell> <mobile>6098017</mobile> </member> <member> <name>slepox</name> <class>w19</class> <birth>nov 18th</birth> <constell>scorpio</constell> <mobile>0658635</mobile> </member> <member> <name>smartlau</name> <class>w19</class> <birth>dec 30th</birth> <constell>capricorn</constell> <mobile>0006621</mobile> </member> <member> <name>tuonene</name> <class>w210</class> <birth>nov 26th</birth> <constell>sagittarius</constell> <mobile>0091704</mobile> </member> <member> <name>dovecho</name> <class>w19</class> <birth>dec 9th</birth> <constell>sagittarius</constell> <mobile>1892013</mobile> </member> <member> <name>shanghen</name> <class>w42</class> <birth>may 24th</birth> <constell>gemini</constell> <mobile>1544254</mobile> </member> <member> <name>venessawj</name> <class>w45</class> <birth>apr 1st</birth> <constell>aries</constell> <mobile>1523753</mobile> </member> <member> <name>lightyear</name> <class>w311</class> <birth>mar 23th</birth> <constell>aries</constell> <mobile>1002908</mobile> </member> </list>
客戶端獲得服務器端的該xml 數據，并將其顯示在表格中。代碼如下：
代碼如下:
<!doctype html public -//w3c//dtd xhtml 1.0 transitional//en > <html> <head> <title>responsexml</title> <style> <!-- .datalist{ border:1px solid #744011; /* 表格邊框 */ font-family:arial; border-collapse:collapse; /* 邊框重疊 */ background-color:#ffd2aa; /* 表格背景色 */ font-size:14px; } .datalist th{ border:1px solid #744011; /* 行名稱邊框 */ background-color:#a16128; /* 行名稱背景色 */ color:#ffffff; /* 行名稱顏色 */ font-weight:bold; padding-top:4px; padding-bottom:4px; padding-left:12px; padding-right:12px; text-align:center; } .datalist td{ border:1px solid #744011; /* 單元格邊框 */ text-align:left; padding-top:4px; padding-bottom:4px; padding-left:10px; padding-right:10px; } .datalist tr:hover, .datalist tr.altrow{ background-color:#dca06b; /* 動態變色 */ } input{ /* 按鈕的樣式 */ border:1px solid #744011; color:#744011; } --> </style> <script language=javascript> var xmlhttp; function createxmlhttprequest(){ if(window.activexobject) xmlhttp = new activexobject(microsoft.xmlhttp); else if(window.xmlhttprequest) xmlhttp = new xmlhttprequest(); } function getxml(addressxml){ var url = addressxml + ?timestamp= + new date(); createxmlhttprequest(); xmlhttp.onreadystatechange = handlestatechange; xmlhttp.open(get,url); xmlhttp.send(null); } function addtablerow(sname, sclass, sbirth, sconstell, smobile){ //表格添加一行的相關操作，可參看7.2.1節 var otable = document.getelementbyid(member); var otr = otable.insertrow(otable.rows.length); var atext = new array(); atext[0] = document.createtextnode(sname); atext[1] = document.createtextnode(sclass); atext[2] = document.createtextnode(sbirth); atext[3] = document.createtextnode(sconstell); atext[4] = document.createtextnode(smobile); for(var i=0;i<atext.length;i++){ var otd = otr.insertcell(i); otd.appendchild(atext[i]); } } function drawtable(myxml){ //用dom方法操作xml文檔 var omembers = myxml.getelementsbytagname(member); var omember = , sname = , sclass = , sbirth = , sconstell = , smobile = ; for(var i=0;i<omembers.length;i++){ omember = omembers[i]; sname = omember.getelementsbytagname(name)[0].firstchild.nodevalue; sclass = omember.getelementsbytagname(class)[0].firstchild.nodevalue; sbirth = omember.getelementsbytagname(birth)[0].firstchild.nodevalue; sconstell = omember.getelementsbytagname(constell)[0].firstchild.nodevalue; smobile = omember.getelementsbytagname(mobile)[0].firstchild.nodevalue; //添加一行 addtablerow(sname, sclass, sbirth, sconstell, smobile); } } function handlestatechange(){ if(xmlhttp.readystate == 4 && xmlhttp.status == 200) drawtable(xmlhttp.responsexml);//responsexml獲取到xml文檔 } </script> </head> <body> <input type=button value=獲取xml onclick=getxml('9-4.xml');><br><br> <table class=datalist summary=list of members in ee studay id=member> <tr> <th scope=col>name</th> <th scope=col>class</th> <th scope=col>birthday</th> <th scope=col>constellation</th> <th scope=col>mobile</th> </tr> </table> </body> </html>
我們可以看到，在客戶端獲得xml 文件的代碼如下：
<input type=button value=獲取xml onclick=getxml('9-4.xml');>
也就是說，是直接取得xml 數據的。而實際開發中返回xml 數據的工作是通過服務器端（如：asp.net、jsp等）的代碼動態生成的。換句話說，getxml('...') 中的文件地址應該是.aspx 或.jsp等動態頁面的后綴。
使用jquery 框架實現
如果在客戶端使用jquery 框架，實現ajax 獲得服務器端的xml數據。
代碼如下:
<html> <head> <title> demo </title> <meta name=author content=xugang /> <script language=javascript src=jquery.min.js></script> <script type=text/javascript> function getxml(addressxml){ //使用jquery的ajax方法 $.ajax({ type:get, , datatype:xml, //返回類型(區分大小寫) success:function(myxml){ //each 遍歷每個<member>標記 $(myxml).find(member).each( function(){ var omember=,sname=,sclass=,sbirth=,sconstell=,smobile=; sname = $(this).find(name).text(); sclass = $(this).find(class).text(); sbirth = $(this).find(birth).text(); sconstell = $(this).find(constell).text(); smobile = $(this).find(mobile).text(); //添加行 $(#member).append($(<tr><td>+sname +</td><td> + sclass +</td><td> + sbirth +</td><td> + sconstell +</td><td> + smobile +</td></tr>)); } ) } }) } </script> </head> <body> <input type=button value=獲取xml onclick=getxml('9-4.xml');> <br/> <table class=datalist id=member> <tr> <th scope=col>name</th> <th scope=col>class</th> <th scope=col>birthday</th> <th scope=col>constellation</th> <th scope=col>mobile</th> </tr> </table> </body> </html>
服務器端傳遞xml 數據的方式不變。
希望本文所述對大家的ajax程序設計有所幫助。
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試
