ajax数据处理

2017-01-04 08:18:10来源:CSDN作者:fanpengfei0人点击

HTML

andy.html

<h2><a href="mailto:andy@clearleft.com">Andy Budd</a></h2><a href="http://andybudd.com/">http://andybudd.com/</a>

<h2><a href="mailto:jeremy@clearleft.com">Jeremy Keith</a></h2><a href="http://adactio.com/">http://adactio.com/</a>

<h2><a href="mailto:richard@clearleft.com">Richard Rutter</a></h2><a href="http://clagnut.com/">http://clagnut.com/</a>
index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>People at Clearleft</title><style type="text/css">@import url("clearleft.css");</style><script type="text/javascript"></script><script>	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>	<h1>People</h1>	<ul>		<li><a href="files/andy.html">Andy</a></li>		<li><a href="files/richard.html">Richard</a></li>		<li><a href="files/jeremy.html">Jeremy</a></li>	</ul>	<div id="details"></div></body></html>

XML

andy.xml

<?xml version="1.0" encoding="utf-8"?><details>  <name>Andy Budd</name>  <website>http://andybudd.com/</website>  <email>andy@clearleft.com</email></details>
<?xml version="1.0" encoding="utf-8"?><details>  <name>Jeremy Keith</name>  <website>http://adactio.com/</website>  <email>jeremy@clearleft.com</email></details>

<?xml version="1.0" encoding="utf-8"?><details>  <name>Richard Rutter</name>  <website>http://clagnut.com/</website>  <email>richard@clearleft.com</email></details>
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  <head>  <meta http-equiv="content-type" content="text/html; charset=utf-8" />  <title>People at Clearleft</title>  <style type="text/css">  	@import url("clearleft.css");  </style>  <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;														//alert(name);							//alert(website);							//alert(email);							/*							<h2><a href="mailto:andy@clearleft.com">Andy Budd</a></h2>							<a href="http://andybudd.com/">http://andybudd.com/</a>							*/							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(website));							aNode2.href=website;														var detailsNode=document.getElementById("details");							detailsNode.innerHTML="";							detailsNode.appendChild(h2Node);							detailsNode.appendChild(aNode2);						}					}				}				return false;			}		}	}</script></head><body>  <h1>People</h1>  <ul>    <li>      <a href="files/andy.xml">Andy</a>    </li>    <li>      <a href="files/richard.xml">Richard</a>    </li>    <li>      <a href="files/jeremy.xml">Jeremy</a>    </li>  </ul>  <div id="details"></div></body></html>

JSON

andy.js

{"person": {  "name":"Andy Budd",  "website":"http://andybudd.com/",  "email":"andy@clearleft.com"  }}

{"person": {	"name":"Jeremy Keith",	"website":"http://adactio.com/",	"email":"jeremy@clearleft.com"	}}

{"person": {  "name":"Richard Rutter",  "website":"http://clagnut.com/",  "email":"richard@clearleft.com"  }}
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  <head>  <meta http-equiv="content-type" content="text/html; charset=utf-8" />  <title>People at Clearleft</title>  <style type="text/css">  	@import url("clearleft.css");  </style>  <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 jsonObj=eval("("+result+")")							//结果不能直接使用,必须先创建对应的节点,再把节点加入到#details中							var name=jsonObj.person.name;							var website=jsonObj.person.website;							var email=jsonObj.person.email;														//alert(name);							//alert(website);							//alert(email);							/*							<h2><a href="mailto:andy@clearleft.com">Andy Budd</a></h2>							<a href="http://andybudd.com/">http://andybudd.com/</a>							*/							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(website));							aNode2.href=website;														var detailsNode=document.getElementById("details");							detailsNode.innerHTML="";							detailsNode.appendChild(h2Node);							detailsNode.appendChild(aNode2);						}					}				}				return false;			}		}	}</script></head><body>  <h1>People</h1>  <ul>    <li>      <a href="files/andy.js">Andy</a>    </li>    <li>      <a href="files/richard.js">Richard</a>    </li>    <li>      <a href="files/jeremy.js">Jeremy</a>    </li>  </ul>  <div id="details"></div></body></html>



clearleft.css

body {  background: #fff url("logo.png") fixed no-repeat top left;  color: #321;  font-family: Myriad,"Lucida Grande","Trebuchet MS",Verdana,Helvetica,Arial,sans-serif;  line-height: 1.6;  margin: 1em 20%;}a {  color: #674;  font-weight: bold;  text-decoration: none;}a:hover {  color: #896;  text-decoration: underline;}


最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台