Ajax读取XML和JSON数据

浏览数：31 / 时间：2015年06月09日

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>