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 >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格式，需要使用responseXML
var 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 h3Node = document.createElement("h3");
h3Node.appendChild(aNode);
var aNode2 = document.createElement("a");
aNode2.appendChild(document.createTextNode(name));
aNode2.href = website;
var detailsNode = document.getElementById("details");
detailsNode.innerHTML = "";
detailsNode.appendChild(h3Node);
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>umgsai@126.com</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) {
//使用json
var 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 h3Node = document.createElement("h3");
h3Node.appendChild(aNode);
var aNode2 = document.createElement("a");
aNode2.appendChild(document.createTextNode(name));
aNode2.href = website;
var detailsNode = document.getElementById("details");
detailsNode.innerHTML = "";
detailsNode.appendChild(h3Node);
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":"umgsai@126.com"
}
}優點
-作為一種數據傳輸格式，json與xml很相似，但是json更加靈巧。
-json不需要從服務器端發送含有特定內容類型的首部信息
缺點
-語法過于嚴謹
-代碼不易讀
-eval函數存在風險
小結
-若應用程序不需要與其他應用程序共享數據的時候，使用HTML片段來返回數據是最簡單的。
-如果數據需要重用，JSON文件是個不錯的選擇，其在性能和大小方面有優勢。
-當遠程應用程序未知時，XML文檔是首選，因為XML是web服務領域的“世界語”
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
