一、HTML
- HTML由一些普通文本组成。如果服务器通过XMLHTTPRequest发送HTML，文本将存储在responseText属性中。
- 从服务器端发送的HTML的代码在浏览器端不需要用JavaScript进行解析。
- 可以直接使用innerHTML属性把服务器传输过来的HTML文本插入到页面中。
①、html文本
andy.html
<h2><a href="[email protected]">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>[email protected]</email>
</details>
jeremy.xml
<?xml version="1.0" encoding="UTF-8"?>
<details>
<name>jeremy keith</name>
<website>http://adsds.com/</website>
<email>[email protected]</email>
</details>
richar.xml
<?xml version="1.0" encoding="UTF-8"?>
<details>
<name>richard keith</name>
<website>http://richard.com/</website>
<email>[email protected]</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="[email protected]">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（)方法将字符串解析为JOSN对象
①、json文档
andy.js
{"person":{
"name":"andy budd",
"website":"http://andy.com",
"email":"[email protected]"
}
}jeremy.js
{"person":{
"name":"jeremy budd",
"website":"http://jeremy.com",
"email":"[email protected]"
}
}richard.js
{"person":{
"name":"richard budd",
"website":"http://richard.com",
"email":"[email protected]"
}
}②、解析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="[email protected]">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文档是首选