Ajax從服務器獲取的數據都是字符串，但是通過不同的解析，可以解析為XML或者JSON。
一般來說.使用XML格式的數據比較通用,但是服務器和客戶端解析起來都比較復雜一些;而使用JSON語句話,服務端需要多做一些工作,但到了客戶端,通過使用eval()函數來進行解析,就會獲得js對象,使用起來很方便.在使用過程中,究竟使用哪種方法,這個要根據項目的實際需要,建議:在能使用JSON的情況下,盡量使用JSON.
例子
1、XML數據user.xml
1 <?xml version="1.0" encoding="utf-8" ?> 2 <users> 3 <user> 4 <username>張三XML</username> 5 <age>33</age> 6 </user> 7 <user> 8 <username>李四XML</username> 9 <age>34</age> 10 </user> 11 </users>
2、JSON數據user.js
1 [ 2 { username: "張三JSON", age: 33 }, 3 { username: "李四JSON", age: 32 } 4 ]
3、HTML頁面代碼
1 <html> 2 <head> 3 <title>Ajax</title> 4 <style type="text/css"> 5 table,td,th 6 { 7 border:solid 1px silver; 8 border-collapse:collapse; 9 text-align:center; 10 } 11 th,td 12 { 13 width:100px; 14 height:20px; 15 } 16 </style> 17 <script type="text/javascript"> 18 function GetXML() { 19 var xmlHttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); 20 xmlHttp.open("get", "XML/user.xml?random=" + Math.random(), true); 21 // 綁定回調函數 22 xmlHttp.onreadystatechange = function () { 23 if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { 24 // 獲取返回的XML數據主體內容 25 var result = xmlHttp.responseXML.documentElement; 26 // 獲取user節點元素 27 var users = result.getElementsByTagName("user"); 28 29 for (var i = 0; i < users.length; i++) { 30 // 獲取單個user 31 var user = users[i]; 32 // 獲取user的具體信息 33 var userName = user.getElementsByTagName("username")[0].childNodes[0].nodeValue; 34 var age = user.getElementsByTagName("age")[0].childNodes[0].nodeValue; 35 // 添加行 36 appendRow(userName, age); 37 } 38 } 39 } 40 // 發送請求 41 xmlHttp.send(); 42 } 43 // 添加新行 44 function appendRow(username, age) { 45 var ui = document.getElementById("userinfo"); 46 // 添加新行 47 var newRow = ui.insertRow(ui.rows.length); 48 // 添加新的單元格 49 newRow.insertCell(0).innerHTML = username; 50 newRow.insertCell(1).innerHTML = age; 51 } 52 // 獲取JSON數據 53 function GetJSON() { 54 var xmlHttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); 55 xmlHttp.open("get", "JSON/user.js?random=" + Math.random(), true); 56 xmlHttp.onreadystatechange = function () { 57 if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { 58 var result = xmlHttp.responseText; 59 // 使用eval函數使返回的字符串變成js對象 60 var users = eval("(" + result + ")"); 61 for (var i = 0; i < users.length; i++) { 62 // 獲取單個user信息 63 var user = users[i]; 64 // 此處已經知道user數據的格式，故可以直接使用 65 appendRow(user.username, user.age); 66 } 67 } 68 } 69 xmlHttp.send(); 70 } 71 </script> 72 </head> 73 <body> 74 <input type="button" value="加載XML數據" onclick="GetXML();" /> 75 <input type="button" value="加載JSON數據" onclick="GetJSON();" /> 76 <br /> 77 <br /> 78 <table id="userinfo"> 79 <thead> 80 <tr> 81 <th>姓名</th> 82 <th>年齡</th> 83 </tr> 84 </thead> 85 </table> 86 </body> 87 </html>
運行結果如下：
這篇文章是照着此文寫的 http://www.cnblogs.com/oneword/archive/2011/06/04/2072770.html
但是當我按照文中寫的做時，卻無法讀取XML文件中的數據，於是自己就在網上搜了一下，修改了網頁文件中的33、34行，最后成功讀取數據。