AJAX之三種數據傳輸格式詳解
阿新 • • 發佈：2018-07-16
javascrip 無序 post object josn ans 利用 itl tar
一、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會把一個字符串當作它的參數。然後這個字符串會被當作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":"[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文檔是首選
AJAX之三種數據傳輸格式詳解