ajax数据处理

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;
}

ajax数据处理

猜你在找的Ajax相关文章