一、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. png、jpg、gif三种图片格式的区别

    png.jpg.gif三种图片格式的区别   2014-06-17 为什么想整理这方面的类容,我觉得就像油画家要了解他的颜料和画布.雕塑家要了解他的石材一样,作为网页设计师也应该对图片格式的特性有一定 ...

  3. PhpStrom如何安装主题？（总结三种不同格式安装方法）

    在网上搜了很多都是不怎么齐全的方法,在这里我总结一下PhpStrom的三种不同格式的安装方法,以后就不用再去网上搜直接看我自己的博客就知道了.以下默认为Windows系统,Linux现在暂时还没更新. ...

  4. Loadrunner三种post格式的请求

    Loadrunner三种post格式的请求 web_custom_request intweb_custom_request(const char *RequestName, <List of ...

  5. 多媒体开发之h264的三种字节流格式---annexb 哥伦布/mp4 以及还有一种rtp传输流格式

    ------------------------------------author:pkf ------------------------------------------time:2015-1 ...

  6. 类似于xml的一种数据传输格式protobuf

    1.Protobuf 简介 Protocol Buffer是google 的一种数据交换的格式,已经在Github开源,目前最新版本是3.1.0.它独立于语言,独立于平台.google 提供了多种语言 ...

  7. ajax 三种数据格式

    1.JSON(格式要正确,可以引jar包操作) servlet代码 package com.hsp.action; import java.io.IOException; import java.io ...

  8. JDBC连接ORACLE的三种URL格式

    格式一: Oracle JDBC Thin using an SID jdbc:oracle:thin:@host:port:SID 例如: jdbc:oracle:thin:@localhost:1 ...

  9. AJAX三种返回值方式

    (一)TEXT方式 该方式返回的是拼接字符串,想要取到其中的值,需要先将返回值进行拆分 (二)JSON方式 该方式返回的是数组,想要取到其中的值,可用索引项进行提取 (三)XML方式 XML:可扩展标 ...

随机推荐

  1. CSS命名规范参考及书写注意事项

    CSS书写顺序 *{ /*显示属性*/ display position float clear cursor … /*盒模型*/ margin padding width height /*排版*/ ...

  2. 使用spring框架的JdbcTemplate实现对Oracle数据库的简单操作实例

    最近实现了一个小功能,针对Oracle数据库两张关联表进行查询和修改,因为比较简单,所以选择了spring框架里的JdbcTemplate.JdbcTemplate算是老古董了,是当年spring为了 ...

  3. tomcat启动报错:org.springframework.beans.factory.BeanCreationException

    Web容器在启动时加载 spring 配置文件时解析xml失败常常引起容器启动失败.这次配置文件是 ibatis的sql脚本出了问题: Context initialization failed or ...

  4. sed 相关

    sed中,a命令是指在匹配的位置后面插入新的内容. c命令是说将在匹配模式空间的指定行用新文本加以替代.

  5. MongoDB高级查询用法大全 （转）

    http://www.cnblogs.com/t2xingzhe/p/3555268.html

  6. float型数据与字节数组的转化

    float型数据与字节数组的转化 字节(float)浮点数为例. 一.C语言 转化常见的方法有: 1.强制指针类型转换. [html] view plain copy //转换float数据到字节数组 ...

  7. linux 输入子系统之电阻式触摸屏驱动

    一.输入子系统情景回忆ING...... 在Linux中,输入子系统是由输入子系统设备驱动层.输入子系统核心层(Input Core)和输入子系统事件处理层(Event Handler)组成.其中设备 ...

  8. 关系数据库SQL复习

    1.1 SQL的概述 SQL(Structured Query Language)结构化查询语言,是关系数据库的标准语言 SQL是一个通用的.功能极强的关系数据库语言 1.2 SQL的特点 1. 综合 ...

  9. Deep Learning 学习笔记（4）：Logistic Regression 逻辑回归

    逻辑回归主要用于解决分类问题,在现实中有更多的运用, 正常邮件or垃圾邮件 车or行人 涨价or不涨价 用我们EE的例子就是: 高电平or低电平 同时逻辑回归也是后面神经网络到深度学习的基础. (原来 ...

  10. Oracle11gr2_ADG管理之跳归档恢复dg实战

    模拟故障 关闭备库 SQL> shutdown immediate; Database closed. Database dismounted. ORACLE instance shut dow ...