Ajax Learning Notes AJAX processing of XML returned by the server

Suppose the XML document returned by the server, as follows:

The code is as follows

Copy Code

<?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> &LT;BIRTH&GT;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>

The client obtains the server-side XML data and displays it in the table. The code is as follows:

The code is as follows

Copy Code

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <title>responseXML</title> <style> <!-- . datalist{ border:1px solid #744011; /* Table Border * * font-family:arial; Border-collapse:collapse; /* Border overlap * * Background-color: #ffd2aa; /* Table Background color * * font-size:14px; } . DataList th{ border:1px solid #744011; /* Line name Border * * Background-color: #a16128; /* Line Name background color * * Color: #FFFFFF; /* Line Name Color * * Font-weight:bold; padding-top:4px; padding-bottom:4px; padding-left:12px; padding-right:12px; Text-align:center; } . DataList td{ border:1px solid #744011; /* Cell Border * * Text-align:left; padding-top:4px; padding-bottom:4px; padding-left:10px; padding-right:10px; } . DataList Tr:hover,. DataList tr.altrow{ Background-color: #dca06b; /* Dynamic discoloration * * } input{/* Button style * * 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) { Table to add a row of related actions, see 7.2.1 section 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) { Manipulating XML documents with DOM methods 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; Add a row Addtablerow (sname, Sclass, Sbirth, Sconstell, smobile); } } function Handlestatechange () { if (xmlhttp.readystate = = 4 && xmlhttp.status = 200) Drawtable (Xmlhttp.responsexml); Responsexml get to XML document } </script> <body> <input type= "button" value= "Get 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>

We can see that the code to get the XML file at the client is as follows:

The code is as follows	Copy Code
<input type= "button" value= "Get xml" onclick= "GetXML (' 9-4.xml ');" >

In other words, the XML data is obtained directly. The actual development of the return of XML data work is through the server side (such as: asp.net, JSP, etc.) code generated dynamically. In other words, the file address in GetXML (' ... ') should be the suffix of a dynamic page such as. aspx or. jsp.

Using the jquery framework to implement

If you use the jquery framework on the client side, implement Ajax to get the server-side XML data.

The code is as follows:

The code is as follows

Copy Code

<title> Demo </title> <meta name= "Author" content= "Xugang"/> <script language= "javascript" src= "Jquery.min.js" ></script> <script type= "Text/javascript" > function GetXML (addressxml) { Ajax approach to using jquery $.ajax ({ Type: "Get", Url:addressxml, DataType: "xml",//return type (case-sensitive) Success:function (myXML) { Each traversal <member> tag $ (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 (); Add rows $ ("#member"). Append ($ ("<tr><td>" +sname + "</td><td>" + sclass + "</td><td>" + Sbirth + "</td><td>" + Sconstell + "</td><td>" + smobile + "</td></tr>"); } ) } }) } </script> <body> <input type= "button" value= "Get 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>

Server-side delivery of XML data is unchanged