Ajax基础（二）

1、数据格式提要
从服务器端接收数据的时候，那些数据必须以浏览器能够理解的格式来发送。服务器端的编程语言只能以如下三种格式返回数据：
XML、HTML、JSON
2、解析HTML
HTML由一些普通文本组成，如果服务器通过XMLHttpRequest发送HTML，文本将存储在responseXML属性中。
不必从responseXML属性中读取数据。他已经是希望的格式，可以直接将他插入到页面中。
插入HTML代码最简单的方法是更新这个元素的innerHTML属性。

windox.onload = function(){
		var aNodes = document.getElementsByTagName("a");
		for(var i = 0;i < aNodes.length; i++){
			aNodes[i].onclick = function(){
				var request = new XMLHttpRequest();
				var url = this.href;
				var method = "GET";
				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;
				}
			}
}

3、HTML小结
优点：
①从服务器端发送的HTML代码在浏览器端不需要用JavaScript进行解析。
②HTML的可读性好
③HTML代码块与innerHTML属性搭配，效率高
缺点：
①若需要通过AJAX更新一篇文档的多个部分，HTML不合适
②innerHTML并非DOM标准
4、XML
解析XML、构建对象的节点、放进对象里

windox.onload = function(){
		var aNodes = document.getElementsByTagName("a");
		for(var i = 0;i < aNodes.length; i++){
			aNodes[i].onclick = function(){
				var request = new XMLHttpRequest();
				var url = this.href;
				var method = "GET";
				request.open(method, url);
				request.send(null);
				request.onreadystatechange = function()｛
						if(request.readyState ==4){
							if(request.status ==200 || request.status ==304){
								//1、结果为XML格式，所以需要使用responseXML来获取。
								var result = request.responseXML;
								//2、结果不能直接使用，必须先创建对应的节点，再把节点加入到#details中
								//目标格式为：
								/*
								<h2><a href ="mailto:andy@clearleft.com">Andy Budd</a></h2>
								<a href ="http://andybudd.com/">http://andybudd.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;
								var aNode = documents.createElement("a");
								aNode.appendChild(document.createTextNode(name));
								aNode.href = "mailto:" +email;
								
								var h2Node = documents.createElement("h2");
								h2Node.appendChild(aNode);
								
								var aNode2 = documents.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;
				}
			}
}

5、XML小结
优点：
①XML是一种通用的数据格式。
②不必把数据强加到已定义好的格式中，而是要为数据自定义合适的标记。
③利用DOM可以完全掌控文档
缺点：
①如果文档来自于服务器，就必须得保证文档含有正确的部首信息。若文档类型不正确，那么responseXML的值将是空的。
②当浏览器接收到长的XML文件后，DOM解析可能会很复杂。
6、JSON
JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。
JSON的规则：
对象是一个无序的“‘名称/值’对”集合。一个对象以“｛”开始，以“｝”结束。每个“名称”后跟一个“：”。“‘名称/值’对”之间使用“，”分隔。

windox.onload = function(){
		var aNodes = document.getElementsByTagName("a");
		for(var i = 0;i < aNodes.length; i++){
			aNodes[i].onclick = function(){
				var request = new XMLHttpRequest();
				var url = this.href;
				var method = "GET";
				request.open(method, url);
				request.send(null);
				request.onreadystatechange = function()｛
						if(request.readyState ==4){
							if(request.status ==200 || request.status ==304){
								//1、结果为XML格式，所以需要使用responseXML来获取。
								var result = request.responseText;
								var object = eval("("+result+")");
								//2、结果不能直接使用，必须先创建对应的节点，再把节点加入到#details中
								//目标格式为：
								/*
								<h2><a href ="mailto:andy@clearleft.com">Andy Budd</a></h2>
								<a href ="http://andybudd.com/">http://andybudd.com/</a>
								*/
								var name = object.name;
								var website = object.website;
								var email = object.email;
								var aNode = documents.createElement("a");
								aNode.appendChild(document.createTextNode(name));
								aNode.href = "mailto:" +email;
								
								var h2Node = documents.createElement("h2");
								h2Node.appendChild(aNode);
								
								var aNode2 = documents.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;
				}
			}
}

7、JSON小结
优点：
①作为一种数据格式，JSON与XML很相似，但是他更加灵巧
②JSON不需要从服务器端发送含有特定内容类型的首部信息
缺点：
①语法过于严谨
②代码不易读
③eval函数存在风险