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. navicat oracle library is not loaded

        navicat oracle library is not loaded CreationTime--2018年8月9日19点13分 Author:Marydon 1.情景展示 Navicat ...

  2. PHP微信公众平台

    微信公众平台客户中心微信公众平台开发文档微信公众平台自定义菜单微信公众平台开发(一) 配置接口微信公众平台开发(二) 微信公众平台示例代码分析微信公众平台开发(三) 订阅事件(subscribe)处理 ...

  3. CSS3+JS 实现的便签应用

    概述 利用HTML5新增的 locationStorage 实现的便签应用,没有使用 JQuery,主要是为了练习原生JS的使用,采用响应式开发,在手机端和桌面端都有良好的体验,而且使用CSS3添加了 ...

  4. 1038. Recover the Smallest Number (30)

    题目链接:http://www.patest.cn/contests/pat-a-practise/1038 题目: 1038. Recover the Smallest Number (30) 时间 ...

  5. TCP/IP协议栈--IP首部选项字段的分析

    IP输入函数(ipintr)将在验证分组格式(检验和,长度等)之后.确定分组是否到达目的地之前,对选项进行处理. 这表明分组所 遇到的每一个路由器以及终于的目的主机都对要分组的选项进行处理. IP分组 ...

  6. shell随机读取一行

    使用shell随机读取文件的一行数据 shuf -n1 file_name

  7. PHP-多域名单点登陆方案

    1.只是二级域名不同(比如a.xx.com, b.xx.com) 利用cookie, 设置domain为".xx.com"即可 2.多个本域名都不相同(比如www.a.com, w ...

  8. nginx error: upstream prematurely closed connection while reading response header from upstream

    本篇文章由:http://xinpure.com/nginx-error-upstream-prematurely-closed-connection-while-reading-response-h ...

  9. PHP5.5新特性

    详情见:http://www.php.net/manual/zh/migration55.new-features.php 1. 生成器 yield关键字 yield的中文文档在这里:http://p ...

  10. linux服务器的Gzip文件压缩方法[转]

    一.gzip介绍 gzip是GNU zip的缩写,它是一个GNU自由软件的文件压缩程序,也经常用来表示gzip这种文件格式.软件的作者是Jean-loup Gailly和Mark Adler.1992 ...