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. expdp impdp 错误: ORA-39064: 无法写入日志文件 ORA-29285: 文件写入错误(解决方案)

    windows: 运行 -> regedit ->查找 键值 NLS_LANG 将字符集 SIMPLIFIED CHINESE_CHINA.ZHS16GBK 修改为AMERICAN_AME ...

  2. 【Linux】shell数学运算

    在Bash shell环境中,可以利用let.(())和[]执行基本的算术操作.而在进行高级操作时,expr和bc这两个工具就特别有用 let的使用 Script01.sh #!/bin/bash # ...

  3. java 在控制台上输入密码时，密码不显示在控制台上

    用下面的方法可以实现在控制台上输入密码时,密码不显示在控制台上:Console cons=System.console(); System.out.print(" 密码:"); c ...

  4. Rational Rose 2003 逆向工程转换C++源代码成UML类图

    主要介绍用户如何使用Rose的逆向工程生成UML模型,并用来进行C++代码的结构分析. Rational Rose可以支持标准C++和Visual C++的模型到代码的转换以及逆向工程.下面将详细地说 ...

  5. Google 做过的 12 件奇葩事

    Google做了太多伟大的事情了.以至于有时它有点让人难以实时跟上它的动态.假设你对这家公司略微有点感情.看看他们做过的一些有点匪夷所思的事儿,可能认为,毕竟是大公司.还挺难以被全然理解透的. 一个Q ...

  6. 在sys用户下执行的sql脚本创建了摁多个表和序列, 怎么回退?

    一个个删除, 暂时不会别的方法...

  7. Java中的平衡树

    leetcode 729 给定一堆线段,每个线段都有一个起点.一个终点,用数组[(beg1,end1),(beg2,end2),(beg3,end3)......]来表示.可以提出以下问题: 这些线段 ...

  8. 有效Log4j按指定级别定向输出日志到指定的输出文件地址配置Threshold，log4j中如何屏蔽父logger输出源rootlogger的additivity配置，log4j向多个文件记录日志

    log4j向多个文件记录日志 关键配置,指定想要的日志级别信息输出到指定的日志文件中: log4j.appender.errorLogger.Threshold=ERROR #扩展,可指定只在子类自己 ...

  9. 越狱iphone在cydia下插件后出现exit safe mode肿么办小教程

    http://bbs.app111.com/thread-318898-1-1.html 从简单的开始..最简单的点击状态栏会弹出来一个窗口,那窗口有三个选择请选择第二个,然后等待它重启,重启后还没消 ...

  10. Android——点击对话框上按钮不关闭对话框

    有时候我没可能需要在点击按钮进行一些检测,但是并不想关闭次对话框(系统默认点击任何一个按钮则关闭对话框),处理方法如下:在点击事件下添加如下代码: try { Field field = dialog ...