標籤：伺服器 元素
HTML
HTML由一些普通文本組成。如果伺服器通過XMLHttpRequest發送HTML，文本將儲存在responseText屬性中。不必從responseText屬性中讀取資料，它已經是期望的格式，可以直接將其插入到頁面中。插入HTML代碼最簡單的方法是更新這個元素的innerTHML屬性。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</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 || request.status == 304) {document.getElementById("details").innerHTML = request.responseText;}}}return false;}}}</script></head><body><ul><li><a href="a.html">百度</a></li></ul><div id="details"></div></body></html>
a.html
<a href="http://www.baidu.com">http://www.baidu.com</a>
優點
-從伺服器端發送的HTML代碼在瀏覽器端不需要用Javascript進行解析。
-HTML的可讀性好
-HTML代碼塊與innerHTML 屬性搭配，效率高。
缺點
-若需要通過Ajax更新一篇文檔的多個部分，HTML不合適
-innerHTML不是DOM標準
XML
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</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 || request.status == 304) {//結果為XML格式，需要使用responseXMLvar result = request.responseXML;//結果不能直接用，必須先建立對應的結點，再把結點放入到details中var name = result.getElementsByTagName("name")[0].firstChild.nodeValue;var website = result.getElementsByTagName("website")[0].firstChild.nodeValue;var email = result.getElementsByTagName("email")[0].firstChild.nodeValue;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(name));aNode2.href = website;var detailsNode = document.getElementById("details");detailsNode.innerHTML = "";detailsNode.appendChild(h2Node);detailsNode.appendChild(aNode2);}}}return false;}}}</script></head><body><ul><li><a href="andy.xml">andy</a></li></ul><div id="details"></div></body></html>
andy.xml
<?xml version="1.0" encoding="UTF-8"?><details><name>Andy Budd</name><website>http://www.baidu.com</website><email>[email protected]</email></details>
優點
-XML是一種通用的資料格式
-不必把資料強加到已定義好的格式中，而是要為資料自訂合適的標記
-利用DOM可以完全掌控文檔
缺點
-如果文檔來自伺服器，就必須保證文檔含有正確的首部資訊。若文件類型不正確，那麼responseXML的值將是空的
-當瀏覽器接收到長的XML檔案後，DOM解析可能會很複雜
JSON
JSON（JavaScript Object Notation）是一種簡單的資料格式，比XML更輕巧，是JavaScript原生格式，這意味著在JavaScript中處理JSON不需要任何特殊的API或工具包。
<script type="text/javascript">var object = {"name" : "umgsai","age" : 12,"address" : {"city" : "beijing","school" : "ctgu"},"teaching" : function() {alert("這是一個方法");}};alert(object.name);alert(object.age);alert(object.address.city);object.teaching();/*將字串當做語句來執行var testStr = "alert(‘hello‘)";eval(testStr);*//*var jsonStr = "{‘name‘:‘umgsai‘}";var testObject = eval("("+jsonStr+")");//字串轉成json對象alert(testObject.name);*/</script>
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</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 || request.status == 304) {//使用jsonvar result = request.responseText;var object = eval("("+result+")");//結果不能直接用，必須先建立對應的結點，再把結點放入到details中var name = object.person.name;var website = object.person.website;var email = object.person.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(name));aNode2.href = website;var detailsNode = document.getElementById("details");detailsNode.innerHTML = "";detailsNode.appendChild(h2Node);detailsNode.appendChild(aNode2);}}}return false;}}}</script></head><body><ul><li><a href="andy.json">andy</a></li></ul><div id="details"></div></body></html>
andy.json
{"person":{"name":"umgsai","website":"http://www.baidu.com","email":"[email protected]"}}
優點
-作為一種資料轉送格式，json與xml很相似，但是json更加靈巧。
-json不需要從伺服器端發送含有特定內容類型的首部資訊
缺點
-文法過於嚴謹
-代碼不易讀
-eval函數存在風險
小結
-若應用程式不需要與其他應用程式共用資料的時候，使用HTML片段來返回資料是最簡單的。
-如果資料需要重用，JSON檔案是個不錯的選擇，其在效能和大小方面有優勢。
-當遠程應用程式未知時，XML文檔是首選，因為XML是web服務領域的“世界語”
本文出自 “阿凡達” 部落格，請務必保留此出處http://shamrock.blog.51cto.com/2079212/1561511
Ajax學習筆記-Ajax資料格式
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
