ajax数据处理

来源：互联网发布：php fpm 错误日志编辑：程序博客网时间：2024/05/19 22:48

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

1 0