一、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. JS ready和onload事件 比较分析

    页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件); 二是onload,指示页 面包含图片等文件在内的所有元素都加载完成.(可以说:ready 在onlo ...

  2. rpm 软件包离线安装

    1. 插件安装(可选) yum install yum-plugin-downloadonly 2. 只下载不安装(perl 演示) yum install --downloadonly --down ...

  3. (转)java中查找List的快捷小方法

    相信java开发的程序员,经常会遍历list里的数据,来查找想要的数据.之后选出来在做处理,我这有个小方法在大量数据的情况下能更快捷,当然这方法只对菜鸟有点用,对老鸟来说也许有更好的方法,请指点 遍历 ...

  4. (转)Android代码混淆-添加了Gson遇到的问题

    折腾了好久.....郁闷 -_- 1.首先,project.properties里的配置文件变了,之前的项目一直都是在project.properties这个文件中添加一行proguard.confi ...

  5. MyBatis缓存结构

    Mybatis Cache结构图: CacheKey(statementId, sql, sqlParams,other). 上图展示了Mybatis Cache的结构: 1)每个Mapper对应一块 ...

  6. Python 列表笔记

    列表解析 squares = []for i in range(1,11): square = i**2 squares.append(square)print squares ########## ...

  7. __CLASS__

    <?php class base_class { function say_a() { echo "'a' - said the " . __CLASS__ . " ...

  8. Bash脚本编程总结

    bash脚本编程之用户交互: read [option]… [name …]  -p ‘PROMPT’  -t TIMEOUT bash -n /path/to/some_script  检测脚本中的 ...

  9. Julia - 变量

    变量的赋值 julia> a = 1 # 把 10 赋给变量 a 1 julia> a + 1 # 变量 a 的值加 1 2 julia> a = 4 # 重新赋值给变量 a 4 j ...

  10. Wireshark捕获非加密的数据包

    启动监听模式 root@sch01ar:~# airmon-ng start wlan0 启动Wireshark工具 root@sch01ar:~# wireshark 选择接口,这里选择wlan0m ...