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. 关于linux的添加永久静态路由的static-routes方法

    一:使用 route 命令添加 使用route 命令添加的路由,机器重启或者网卡重启后路由就失效了,方法: //添加到主机的路由 # route add –host 192.168.1.11 dev ...

  2. exception PLS-00215: String length constraints must be in range (1 .. 32767)

      exception PLS-00215: String length constraints must be in range (1 .. 32767) CreationTime--2018年8月 ...

  3. 创建安全的基于HTTP的api应用接口

    #http://my.oschina.net/xiangtao/blog/196211 #要创建安全的基于HTTP的api接口,最重要的是要在服务端的进行请求的认证. #如何进行有效的服务端验证呢? ...

  4. 以__name__进行单元测试

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #以__name__进行单元测试 #何为单元测试? #单元测试(模块测试)是开发者编写的一小段代码,用于检测被 ...

  5. js的7个技巧

    http://www.vaikan.com/seven-javascript-things-i-wish-i-knew-much-earlier-in-my-career/

  6. MySQL-事务隔离级别设置

    加锁研究:http://www.cnblogs.com/JohnABC/p/4377529.html 先了解下 第一类丢失更新.脏读.不可重复读.幻读.第二类丢失更新 第一类丢失更新 撤销一个事务时, ...

  7. 老毛桃pe装机工具备份系统

    电脑故障可以说是难以避免的,误操作或者修改了哪个设置系统就莫名其妙崩溃了.这在日常使用当中并不鲜见,许多用户就会寻求备份系统方法.有没有好的一键备份系统教程可以参考呢?在本篇教程中,就容我跟大家讲讲怎 ...

  8. 【LeetCode】115. Populating Next Right Pointers in Each Node (2 solutions)

    Populating Next Right Pointers in Each Node Given a binary tree struct TreeLinkNode { TreeLinkNode * ...

  9. $(document).ready(function(){}), $().ready(function(){})和$(function(){})三者区别

    当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件.ready() 函数仅能用于当前文档,因此无需选择器.所以document选择器可以不要,那么就可以 ...

  10. sqlserver中将varchar类型转换为int型再进行排序的方法

    sql中把varchar类型转换为int型然后进行排序,如果我们数据库的ID设置为varchar型的 在查询的时候order by id的话 如果我们数据库的ID设置为varchar型的 在查询的时候 ...