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]网络爬虫（九）：百度贴吧的网络爬虫（v0.4）源码及解析

    转自:http://blog.csdn.net/pleasecallmewhy/article/details/8934726 百度贴吧的爬虫制作和糗百的爬虫制作原理基本相同,都是通过查看源码扣出关键 ...

  2. LoadRunner 检查点函数总结

    今天我来总结一下Loadrunner中的检查点函数,主要介绍两个函数:web_find()和web_reg_find() 这两个函数均用于内容的查找,但两者也有本质的区别,具体介绍如下: 一.web_ ...

  3. SSO之CAS + LDAP

    本来主要详细是介绍CAS和LDAP整合实现单点登录的步骤. 1. 依<SSO之安装CAS Server>所述安装好CAS Server.2. 安装ApacheDS.安装好ApacheDS后 ...

  4. 微信小程序信息展示

    概述 使用第三方在线API模拟数据,进行微信小程序开发.不会后端开发也可以体验微信小程序. 详细 代码下载:http://www.demodashi.com/demo/10719.html 一.准备工 ...

  5. Xiuno 开发手册正式发布。

    下载地址:http://bbs.xiuno.com/down/xiuno.chm.tar.gz

  6. Android网络开发之WIFI

    WIFI全称Wireless Fidelity, 又称802.11b标准.WIFI联盟成立于1999年,当时的名称叫做Wireless Ethernet Compatibility Alliance( ...

  7. 架构-LAMP特级学习(网站大存储量解决方案)

    数据库采用主从.分区技术 数据库优化

  8. JavaScript：用JS实现加载页面前弹出模态框

    用JS实现加载页面前弹出模态框 主要的JavaScript 代码是: <script> //加载模态框 $('#myModal').modal(); $(document).ready(f ...

  9. js重要函数

    window.setTimeout(code,millisec)   方法用于在指定的毫秒数后调用函数或计算表达式.只执行 code 一次(比如某个界面是上左右的三个frame界面,右边这个界面要调用 ...

  10. 使用Visual Studio code

    快捷键 ctrl+b 打开或关闭侧边栏 ctrl+\ 打开多个editor ctrl+e 快速的通过名字打开一个文件 右键选择 Reveal in Explorer 打开文件夹 ctrl+tab 快速 ...