溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Ajax學(xué)習(xí)筆記-Ajax數(shù)據(jù)格式

發(fā)布時(shí)間：2020-06-27 03:59:44 來源：網(wǎng)絡(luò) 閱讀：347 作者：umgsai 欄目：web開發(fā)

HTML

HTML由一些普通文本組成。如果服務(wù)器通過XMLHttpRequest發(fā)送HTML，文本將存儲(chǔ)在responseText屬性中。不必從responseText屬性中讀取數(shù)據(jù)，它已經(jīng)是期望的格式，可以直接將其插入到頁面中。插入HTML代碼最簡單的方法是更新這個(gè)元素的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>

優(yōu)點(diǎn)

    -從服務(wù)器端發(fā)送的HTML代碼在瀏覽器端不需要用Javascript進(jìn)行解析。

    -HTML的可讀性好

    -HTML代碼塊與innerHTML屬性搭配，效率高。

缺點(diǎn)

    -若需要通過Ajax更新一篇文檔的多個(gè)部分，HTML不合適

    -innerHTML不是DOM標(biāo)準(zhǔn)

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) {
							//結(jié)果為XML格式，需要使用responseXML
							var result = request.responseXML;
							//結(jié)果不能直接用，必須先創(chuàng)建對應(yīng)的結(jié)點(diǎn)，再把結(jié)點(diǎn)放入到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>

優(yōu)點(diǎn)

    -XML是一種通用的數(shù)據(jù)格式

    -不必把數(shù)據(jù)強(qiáng)加到已定義好的格式中，而是要為數(shù)據(jù)自定義合適的標(biāo)記

    -利用DOM可以完全掌控文檔

缺點(diǎn)

    -如果文檔來自服務(wù)器，就必須保證文檔含有正確的首部信息。若文檔類型不正確，那么responseXML的值將是空的

    -當(dāng)瀏覽器接收到長的XML文件后，DOM解析可能會(huì)很復(fù)雜


JSON

JSON（JavaScript Object Notation）是一種簡單的數(shù)據(jù)格式，比XML更輕巧，是JavaScript原生格式，這意味著在JavaScript中處理JSON不需要任何特殊的API或工具包。

<script type="text/javascript">
	var object = {
		"name" : "umgsai",
		"age" : 12,
		"address" : {
			"city" : "beijing",
			"school" : "ctgu"
		},
		"teaching" : function() {
			alert("這是一個(gè)方法");
		}
	};
	alert(object.name);
	alert(object.age);
	alert(object.address.city);
	object.teaching();
	/*將字符串當(dāng)做語句來執(zhí)行
	var testStr = "alert('hello')";
	eval(testStr);
	*/
	/*
	var jsonStr = "{'name':'umgsai'}";
	var testObject = eval("("+jsonStr+")");//字符串轉(zhuǎn)成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+")");
							//結(jié)果不能直接用，必須先創(chuàng)建對應(yīng)的結(jié)點(diǎn)，再把結(jié)點(diǎn)放入到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"
}
}

優(yōu)點(diǎn)

    -作為一種數(shù)據(jù)傳輸格式，json與xml很相似，但是json更加靈巧。

    -json不需要從服務(wù)器端發(fā)送含有特定內(nèi)容類型的首部信息

缺點(diǎn)

    -語法過于嚴(yán)謹(jǐn)

    -代碼不易讀

    -eval函數(shù)存在風(fēng)險(xiǎn)

小結(jié)

-若應(yīng)用程序不需要與其他應(yīng)用程序共享數(shù)據(jù)的時(shí)候，使用HTML片段來返回?cái)?shù)據(jù)是最簡單的。

-如果數(shù)據(jù)需要重用，JSON文件是個(gè)不錯(cuò)的選擇，其在性能和大小方面有優(yōu)勢。

-當(dāng)遠(yuǎn)程應(yīng)用程序未知時(shí)，XML文檔是首選，因?yàn)閄ML是web服務(wù)領(lǐng)域的“世界語”

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手