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行，最后成功读取数据。

Ajax读取XML和JSON数据的更多相关文章

  1. 用Ajax读取XML格式的数据

    ].firstChild.data);}catch(exception){ }}}}</script>

  2. 【Spring学习笔记-MVC-5】利用spring MVC框架，实现ajax异步请求以及json数据的返回

    作者:ssslinppp      时间:2015年5月26日 15:32:51 1. 摘要 本文讲解如何利用spring MVC框架,实现ajax异步请求以及json数据的返回. Spring MV ...

  3. 11月13日上午ajax返回数据类型为JSON数据的处理

    ajax返回数据类型为JSON数据的处理 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...

  4. SpringMVC中出现" 400 Bad Request "错误（用@ResponseBody处理ajax传过来的json数据转成bean）的解决方法

    最近angularjs post到后台 400一头雾水 没有任何错误. 最后发现好文,感谢作者 SpringMVC中出现" 400 Bad Request "错误(用@Respon ...

  5. 8.ajax与django后台json数据的交互

    1新建django项目名为json_ajax,应用名为app,在templates模板中新建ajax.html文件 ajax.html <!DOCTYPE html> <html l ...

  6. AJAX跨域请求json数据的实现方法

    这篇文章介绍了AJAX跨域请求json数据的实现方法,有需要的朋友可以参考一下 我们都知道,AJAX的一大限制是不允许跨域请求. 不过通过使用JSONP来实现.JSONP是一种通过脚本标记注入的方式, ...

  7. 类型：JQuery；问题：ajax调用ashx文件；结果：ashx文件怎么获取$.ajax()方法发送的json数据

    ashx文件怎么获取$.ajax()方法发送的json数据 作者:careful 和ajax相关     新浪微博QQ空间QQ微博百度搜藏腾讯朋友QQ收藏百度空间人人网开心网0 $.ajax({  t ...

  8. 实现页面查看xml或json数据类似控制台效果

    在前端查看xml或者json数据时,实现在类似与控制台中console的效果. 配合Ant Design的Collapse折叠面板进行展示. Collapse组件的地址:https://ant.des ...

  9. Ajax中XML和JSON格式的优劣比较

    刚做完一个小的使用Ajax的项目.整个小项目使用JavaScript做客户端,使用PHP做服务器端.利用xmlHttpRequest组件作为交互工具,利用XML作为数据传输的格式.做完后基本做一个简单 ...

随机推荐

  1. python中的sort、sorted、reverse、reversed详解

    python语言中的列表排序方法有三个:reverse反转/倒序排序.sort正序排序.sorted可以获取排序后的列表.在更高级列表排序中,后两中方法还可以加入条件参数进行排序. reverse() ...

  2. 【转】SQL2008的sa账户被禁用，其他账户无法连接的解决方法

    或者你还有其它的sysadmin权限的账号,你可以用此账号登录,重置SA密码. 但是在以下情况下,怎么办呢? 1. SA密码丢失或者SA账号被禁用. 2. 你进行了一些安全操作,把BuiltinAdm ...

  3. 【转发】JS中如何判断null/ undefined/IsNull

    以下是不正确的方法:var exp = null;if (exp == null){ alert("is null");}exp 为 undefined 时,也会得到与 null ...

  4. Android Studio关于USB device not found的解决的方法

    Android Studio关于USB device not found的解决的方法 我们使用Android Studio进行Android开发时.当我们使用真机进行调试时.非常可能会出现USB de ...

  5. mysql 设置密码

    法一: 格式:mysqladmin -u用户名 -p旧密码 password 新密码 方法二:1.用root 进入mysql后mysql>set password =password('你的密码 ...

  6. 快速搭建Seeddms文档管理系统

    Seddms文档管理系统是开源的 环境: Redhat6.5 lamp 01.LAMP的安装 安装请看:http://www.cnblogs.com/xiaochina/p/6442337.html ...

  7. HDUOJ----2512一卡通大冒险

    一卡通大冒险 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  8. HDUOJ----John

    John Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Total Submis ...

  9. 【LeetCode】79. Word Search

    Word Search Given a 2D board and a word, find if the word exists in the grid. The word can be constr ...

  10. 【LeetCode】104. Maximum Depth of Binary Tree (2 solutions)

    Maximum Depth of Binary Tree  Given a binary tree, find its maximum depth. The maximum depth is the ...