Ajax读取XML和JSON数据

Ajax从服务器获取的数据都是字符串，但是通过不同的解析，可以解析为XML或者JSON。

一般来说.使用XML格式的数据比较通用,但是服务器和客户端解析起来都比较复杂一些;而使用JSON语句话,服务端需要多做一些工作,但到了客户端,通过使用eval()函数来进行解析,就会获得js对象,使用起来很方便.在使用过程中,究竟使用哪种方法,这个要根据项目的实际需要,建议:在能使用JSON的情况下,尽量使用JSON.

例子

1、XML数据user.xml

 <?xml version="1.0" encoding="utf-8" ?>
 <users>
   <user>
     <username>张三XML</username>
     <age>33</age>
   </user>
   <user>
     <username>李四XML</username>
     <age>34</age>
   </user>
 </users>

2、JSON数据user.js

 [
     { username: "张三JSON", age: 33 },
     { username: "李四JSON", age: 32 }
 ]

3、HTML页面代码

 <html>
     <head>
         <title>Ajax</title>
         <style type="text/css">
             table,td,th
             {
                 border:solid 1px silver;
                 border-collapse:collapse;
                 text-align:center;
             }
             th,td
             {
                 width:100px;
                 height:20px;
             }
         </style>
         <script type="text/javascript">
             function GetXML() {
                 var xmlHttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
                 xmlHttp.open("get", "XML/user.xml?random=" + Math.random(), true);
                 // 绑定回调函数
                 xmlHttp.onreadystatechange = function () {
                     if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                         // 获取返回的XML数据主体内容
                         var result = xmlHttp.responseXML.documentElement;
                         // 获取user节点元素
                         var users = result.getElementsByTagName("user");

                         for (var i = 0; i < users.length; i++) {
                             // 获取单个user
                             var user = users[i];
                             // 获取user的具体信息
                             var userName = user.getElementsByTagName("username")[0].childNodes[0].nodeValue;
                             var age = user.getElementsByTagName("age")[0].childNodes[0].nodeValue;
                             // 添加行
                             appendRow(userName, age);
                         }
                     }
                 }
                 // 发送请求
                 xmlHttp.send();
             }
             // 添加新行
             function appendRow(username, age) {
                 var ui = document.getElementById("userinfo");
                 // 添加新行
                 var newRow = ui.insertRow(ui.rows.length);
                 // 添加新的单元格
                 newRow.insertCell(0).innerHTML = username;
                 newRow.insertCell(1).innerHTML = age;
             }
             // 获取JSON数据
             function GetJSON() {
                 var xmlHttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
                 xmlHttp.open("get", "JSON/user.js?random=" + Math.random(), true);
                 xmlHttp.onreadystatechange = function () {
                     if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                         var result = xmlHttp.responseText;
                         // 使用eval函数使返回的字符串变成js对象
                         var users = eval("(" + result + ")");
                         for (var i = 0; i < users.length; i++) {
                             // 获取单个user信息
                             var user = users[i];
                             // 此处已经知道user数据的格式，故可以直接使用
                             appendRow(user.username, user.age);
                         }
                     }
                 }
                 xmlHttp.send();
             }
         </script>
     </head>
     <body>
         <input type="button" value="加载XML数据" onclick="GetXML();" />
         <input type="button" value="加载JSON数据" onclick="GetJSON();" />
         <br />
         <br />
         <table id="userinfo">
             <thead>
             <tr>
                 <th>姓名</th>
                 <th>年龄</th>
             </tr>
             </thead>
         </table>
     </body>
 </html>

运行结果如下：

这篇文章是照着此文写的 http://www.cnblogs.com/oneword/archive/2011/06/04/2072770.html

但是当我按照文中写的做时，却无法读取XML文件中的数据，于是自己就在网上搜了一下，修改了网页文件中的33、34行，最后成功读取数据。