一、HTML

  • HTML由一些普通文本组成。如果服务器通过XMLHTTPRequest发送HTML，文本将存储在responseText属性中。
  • 从服务器端发送的HTML的代码在浏览器端不需要用JavaScript进行解析。
  • 可以直接使用innerHTML属性把服务器传输过来的HTML文本插入到页面中。

①、html文本

andy.html
<h2><a href="andy@qq.com">Andy Budd</a></h2>

<a href="http://anybudd.com">http://anybudd.com</a>
jeremy.html
<h2><a href="">Jeremy Budd</a></h2>

<a href="">http://Jeremy.com</a>
richard.html
<h2><a href="">Richard Budd</a></h2>

<a href="">http://Richard Budd.com</a>

②、解析HTML文本

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title></title>

  <script type="text/javascript">

      window.onload=function(){

            var aNodes=document.getElementsByTagName("a");

            for(var i=0;i<aNodes.length;i++){

                aNodes[i].onclick=function(){

                var request=new XMLHttpRequest();

                var method="GET";

                var url=this.href;

                request.open(method,url);

                request.send(null);

                request.onreadystatechange=function(){

                    if(request.readyState==4){

                        if(request.status==200){

                            document.getElementById("details").innerHTML=request.responseText;

                        }

                    }

                }

                        return false;

                  }

            }

      }

  </script>

  </head>

  <body>

    <h1>People</h1>

    <ul>

        <li><a href="files/andy.html">Andy</a></li>

           <li><a href="files/richard.html">Richard</a></li>

           <li><a href="files/jeremy.html">Jeremy</a></li>

    </ul>

    <div id="details"></div>

  </body>

</html>

二、XML

  • XML是一种通用的数据格式
  • 不必把数据强加到已定义好的格式中，而是要为数据自定义合适的标记
  • 利用DOM可以完全掌控文档

①、xml文档

andy.xml
<?xml version="1.0" encoding="UTF-8"?>

<details>

    <name>andy keith</name>

    <website>http://andys.com/</website>

    <email>jandy@qq.com</email>

</details>
jeremy.xml
<?xml version="1.0" encoding="UTF-8"?>

<details>

    <name>jeremy keith</name>

    <website>http://adsds.com/</website>

    <email>jeryem@qq.com</email>

</details>
richar.xml
<?xml version="1.0" encoding="UTF-8"?>

<details>

    <name>richard keith</name>

    <website>http://richard.com/</website>

    <email>richard@qq.com</email>

</details>

③、解析XML

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title></title>

  <script type="text/javascript">

      window.onload=function(){

            var aNodes=document.getElementsByTagName("a");

            for(var i=0;i<aNodes.length;i++){

                aNodes[i].onclick=function(){

                var request=new XMLHttpRequest();

                var method="GET";

                var url=this.href;

                request.open(method,url);

                request.send(null);

                request.onreadystatechange=function(){

                    if(request.readyState==4){

                        if(request.status==200){

                            //1.结果为xml格式，所以需要使用responsexml来获取

                            var result=request.responseXML;

                            //2.结果不能直接使用，必须先创建对应的节点，再把节点加入到details里面

                            //目标格式为

                            /*

                            <h2><a href="andy@qq.com">Andy Budd</a></h2>

                            <a href="http://anybudd.com">http://anybudd.com</a>

                            */

 var name=result.getElementsByTagName("name")[0].firstChild.nodeValue;

 var website=result.getElementsByTagName("website")[0].firstChild.nodeValue;

 var email=result.getElementsByTagName("email")[0].firstChild.nodeValue;

                            //alert(name);

                            //alert(website);

                            //alert(email);

                            var aNode=document.createElement("a");

                            aNode.appendChild(document.createTextNode(name));

                            aNode.href="mailto:"+email;

                            var h2Node=document.createElement("h2");

                            h2Node.appendChild(aNode);

                            var aNode2=document.createElement("a");

                            aNode2.appendChild(document.createTextNode(website));

                            aNode2.href=website;

                            var detailsNode=document.getElementById("details");

                            detailsNode.innerHTML="";

                            detailsNode.appendChild(h2Node);

                            detailsNode.appendChild(aNode2);

                        }

                    }

                }

                        return false;

                  }

            }

      }

  </script>

  </head>

  <body>

    <h1>People</h1>

    <ul>

        <li><a href="files/andy.xml">Andy</a></li>

           <li><a href="files/richard.xml">Richard</a></li>

           <li><a href="files/jeremy.xml">Jeremy</a></li>

    </ul>

    <div id="details"></div>

  </body>

</html>

三、JSON

  • JSON（JavaScript Object Notation）一种简单的数据格式，比xml更轻巧。JSON是JavaScript原生格式。
  • JSON的规则很简单：对象是一个无序的键值对的集合。一个对象以“{” 左括号开始，以“}”右括号结束。每个“名称”后跟一个“：”(冒号)；键值对之间用“，”（逗号分隔 ）
  • JSON只是一种文本字符串。它被存储在responseText属性中
  • 函数eval会把一个字符串当作它的参数。然后这个字符串会被当作JavaScript代码来执行。因为JSON的字符串就是由JavaScript代码构成的所以它本身是可执行的
  • JSON提供了json.js 包，下载https://github.com/douglascrockford/JSON-js后，使用JSON.parse()方法将字符串解析为JOSN对象

①、json文档

andy.js
{"person":{

    "name":"andy budd",

    "website":"http://andy.com",

    "email":"andy@qq.com"

}

}

jeremy.js

{"person":{

    "name":"jeremy budd",

    "website":"http://jeremy.com",

    "email":"jeremy@qq.com"

}

}

richard.js

{"person":{

    "name":"richard budd",

    "website":"http://richard.com",

    "email":"richard@qq.com"

}

}

②、解析JSON

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title></title>

  <script type="text/javascript">

      window.onload=function(){

            var aNodes=document.getElementsByTagName("a");

            for(var i=0;i<aNodes.length;i++){

                aNodes[i].onclick=function(){

                var request=new XMLHttpRequest();

                var method="GET";

                var url=this.href;

                request.open(method,url);

                request.send(null);

                request.onreadystatechange=function(){

                    if(request.readyState==4){

                        if(request.status==200){

                            //1.结果为JSON格式，所以需要使用responseText来获取

                            var result=request.responseText;
　　　　　　　　　　　　　　　　　//使用json.js API  
　　　　　　　　　　　　        // var object = result.parseJOSN();

                            var object=eval("("+result+")");

                            //2.结果不能直接使用，必须先创建对应的节点，再把节点加入到details里面

                            //目标格式为

                            /*

                            <h2><a href="andy@qq.com">Andy Budd</a></h2>

                            <a href="http://anybudd.com">http://anybudd.com</a>

                            */

                            var name=object.person.name;

                            var website=object.person.website;

                            var email=object.person.email;

                            //alert(name);

                            //alert(website);

                            //alert(email);

                            var aNode=document.createElement("a");

                            aNode.appendChild(document.createTextNode(name));

                            aNode.href="mailto:"+email;

                            var h2Node=document.createElement("h2");

                            h2Node.appendChild(aNode);

                            var aNode2=document.createElement("a");

                            aNode2.appendChild(document.createTextNode(website));

                            aNode2.href=website;

                            var detailsNode=document.getElementById("details");

                            detailsNode.innerHTML="";

                            detailsNode.appendChild(h2Node);

                            detailsNode.appendChild(aNode2);

                        }

                    }

                }

                        return false;

                  }

            }

      }

  </script>

  </head>

  <body>

    <h1>People</h1>

    <ul>

       　　 <li><a href="files/andy.js">Andy</a></li>

           <li><a href="files/richard.js">Richard</a></li>

           <li><a href="files/jeremy.js">Jeremy</a></li>

    </ul>

    <div id="details"></div>

  </body>

</html>

三、三者对比

  • 若应用程序不需要与其他应用程序共享数据的时候，使用HTML片段来返回数据时最简单
  • 如果数据需要重用，JOSN文件是个不错的选择，其在性能和文件大小方面有优势。
  • 当远程应用程序未知时，XML文档是首选
 
 
 

AJAX之三种数据传输格式详解的更多相关文章

  1. Ajax——三种数据传输格式

    一.HTML HTML由一些普通文本组成.如果服务器通过XMLHTTPRequest发送HTML,文本将存储在responseText属性中. 从服务器端发送的HTML的代码在浏览器端不需要用Java ...

  2. 以太网帧格式、IP数据报格式、TCP段格式+UDP段格式 详解

    转载:http://www.cnblogs.com/lifan3a/articles/6649970.html 以太网帧格式.IP数据报格式.TCP段格式+UDP段格式 详解   1.ISO开放系统有 ...

  3. php 序列化（serialize）格式详解

    1．前言 PHP (从 PHP 3.05 开始)为保存对象提供了一组序列化和反序列化的函数:serialize.unserialize.不过在 PHP 手册中对这两个函数的说明仅限于如何使用,而对序列 ...

  4. PNG,JPEG,BMP,JIF图片格式详解及其对比

    原文地址:http://blog.csdn.net/u012611878/article/details/52215985 图片格式详解 不知道大家有没有注意过网页里,手机里,平板里的图片,事实上,图 ...

  5. python selenium 三种等待方式详解[转]

    python selenium 三种等待方式详解   引言: 当你觉得你的定位没有问题,但是却直接报了元素不可见,那你就可以考虑是不是因为程序运行太快或者页面加载太慢造成了元素不可见,那就必须要加等待 ...

  6. binlog之四：mysql中binlog_format模式与配置详解，binlog的日志格式详解

    mysql复制主要有三种方式:基于SQL语句的复制(statement-based replication, SBR),基于行的复制(row-based replication, RBR),混合模式复 ...

  7. FLV视频封装格式详解

    FLV视频封装格式详解 分类: FFMpeg编解码 2012-04-04 21:13 1378人阅读 评论(2) 收藏 举报 flvheaderaudiovideocodecfile 目录(?)[-] ...

  8. Linux下 ps -ef 和 ps aux 的区别及格式详解

    原文:https://www.cnblogs.com/5201351/p/4206461.html Linux下ps -ef和ps aux的区别及格式详解 Linux下显示系统进程的命令ps,最常用的 ...

  9. BMP格式详解

    BMP格式详解 BMP文件格式详解(BMP file format) BMP文件格式,又称为Bitmap(位图)或是DIB(Device-Independent Device,设备无关位图),是Win ...

随机推荐

  1. MVC阻止用户注入JavaScript代码或者Html标记

    使用HttpUtility.HtmlEncode("")将字符串进行过滤处理

  2. spring测试junit事务管理及spring面向接口注入和实现类单独注入（无实现接口），实现类实现接口而实现类单独注入否则会报错。

    1.根据日志分析,spring junit默认是自动回滚,不对数据库做任何的操作. 18:16:57.648 [main] DEBUG o.s.j.d.DataSourceTransactionMan ...

  3. linux中sudo如何读取标准输入作为密码,避免每次都输入密码?

    需求描述: 今天想要在生产环境中,弄自动部署的脚本,但是现在呢,需要sudo权限,每次都要输入.就想看sudo如何能从标准输入读取密码. 操作过程: 1.原来的方法 [deployer@testvm ...

  4. mysql中json_merge函数的使用?

    需求描述: 通过mysql中的json_merge函数,可以将多个json对象合并成一个对象 操作过程: 1.查看一张包含json列的表 mysql> select * from tab_jso ...

  5. 关于测试中哪些信息需要放到jira上面

    1.每个新需求的功能点,全部在jira上一一呈现 2.每个bug也一样在jira上一一呈现 3.任务一个需要优化改进的点也一一在jira上呈现 然后程序员一直开发新功能和修改新bug,测试人员负责bu ...

  6. struts2 第一次使用 404 页面引发的一系列问题

    环境:ubuntu  . eclipse.struts-2.3.24 问题描写叙述: 1.  struts2 訪问出现404 2.  严重: Exception starting filter Str ...

  7. 5 -- Hibernate的基本用法 --4 7 二级缓存相关属性

    Hibernate的SessionFactory可持有一个可选的二级缓存,通过使用这种二级缓存可以提高Hibernate的持久化访问的性能. Hibernate的二级缓存属性: ⊙ hibernate ...

  8. Eclipse Maven 配置setting.xml 的镜像远程仓库

    1.在.m2中新建settings.xml文件 1.window-->Preferences-->Maven-->User Settings 3.点击open file 编辑将远程仓 ...

  9. 6.824 Lab 5: Caching Extents

    Introduction In this lab you will modify YFS to cache extents, reducing the load on the extent serve ...

  10. tomcat运行模式APR安装

    centos6.2下,Tomcat运行模式apr安装过程,如下: 一.安装apr [root@vmT227-m5 /]# cd /usr/local/ [root@vmT227-m5 local]# ...