首页 > 代码库 > Ajax学习笔记-Ajax数据格式

Ajax学习笔记-Ajax数据格式

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="http://www.mamicode.com/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格式,需要使用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 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="http://www.mamicode.com/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 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="http://www.mamicode.com/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服务领域的“世界语”

本文出自 “阿凡达” 博客,请务必保留此出处http://shamrock.blog.51cto.com/2079212/1561511

Ajax学习笔记-Ajax数据格式