一、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. FIR滤波器的FPGA实现方法

    FIR滤波器的FPGA实现方法 2011-02-21 23:34:15   来源:互联网    非常重要的基本单元.近年来,由于FPGA具有高速度.高集成度和高可靠性的特点而得到快速发展.随着现代数字 ...

  2. 【转载】对一致性Hash算法，Java代码实现的深入研究

    原文地址:http://www.cnblogs.com/xrq730/p/5186728.html 一致性Hash算法 关于一致性Hash算法,在我之前的博文中已经有多次提到了,MemCache超详细 ...

  3. LG4360 [CEOI2004]锯木厂选址

    题意 原题来自:CEOI 2004 从山顶上到山底下沿着一条直线种植了 n 棵老树.当地的政府决定把他们砍下来.为了不浪费任何一棵木材,树被砍倒后要运送到锯木厂. 木材只能朝山下运.山脚下有一个锯木厂 ...

  4. 用python写定时任务

    一个是sched模块,一个是threading模块 参考链接:http://www.cnblogs.com/LinTeX9527/p/6181523.html

  5. npm 私服工具verdaccio 安装配置试用

      1. 安装 npm install -g verdaccio 2. 启动 verdaccio // 界面显示信息 Verdaccio doesn't need superuser privileg ...

  6. file_put_contents(): supplied resource is not a valid stream resource

    在项目开发的过程中 自己想把输出和一些想要内容输出到日志文件中,便于查看 但是在输入的过程中报了这样一个错误: file_put_contents(): supplied resource is no ...

  7. java工具类mht转html格式文件 及简单的HTML解析

    package com.szy.project.utils; import java.io.BufferedInputStream; import java.io.BufferedOutputStre ...

  8. MATLAB 02

    对一组数据作线性回归,并绘图 clear all; % 输入数据x和y x = [ ]'; y = [11 13 14 15 16 18 20 21 22 25 26 28 29 31]'; x = ...

  9. 1141 PAT Ranking of Institutions

    题意:给出考生id(分为乙级.甲级和顶级),取得的分数和所属学校.计算各个学校的所有考生的带权总成绩,以及各个学校的考生人数.最后对学校进行排名. 思路:本题的研究对象是学校,而不是考生!因此,建立学 ...

  10. 转载：Oracle RAC日常基本维护命令

    本文转载自: https://blog.csdn.net/tianlesoftware/article/details/5358573 Oracle RAC日常基本维护命令 好文转载, Oracle  ...