ajax的原创

来源：互联网发布：上海威纳贸易数据编辑：程序博客网时间：2024/06/05 14:26

Ajax:(AsynchronousJavaScript and XML):

允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax

•若应用程序不需要与其他应用程序共享数据的时候,使用 HTML片段来返回数据时最简单的

•如果数据需要重用, JSON 文件是个不错的选择, 其在性能和文件大小方面有优势

•当远程应用程序未知时, XML 文档是首选, 因为XML 是 web服务领域的 “世界语”

json的代码

<!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");   var request=new XMLHttpRequest();  var method="GET";  var url=null;    for(var i=0;i<aNodes.length;i++){  aNodes[i].onclick=function(){    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;  //使用eval方法，将json字符串转换为json对象  var object=eval("("+result+")");    //得到xml对应的节点的值  var name=object.person.name;  var website=object.person.website;  var email=object.person.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));  aNode.href=website;      var details=document.getElementById("details");    details.innerHTML="";    details.appendChild(h2Node);  details.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>

xml的代码

<!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");   var request=new XMLHttpRequest();  var method="GET";  var url=null;    for(var i=0;i<aNodes.length;i++){  aNodes[i].onclick=function(){    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格式的  var result=request.responseXML;    //得到xml对应的节点的值  var name=result.getElementsByTagName("name")[0].firstChild.nodeValue;  var website=result.getElementsByTagName("website")[0].firstChild.nodeValue;;  var email=result.getElementsByTagName("email")[0].firstChild.nodeValue;;  //创建对应的节点  /*  创建节点的格式为  <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));  aNode.href=website;      var details=document.getElementById("details");    details.innerHTML="";    details.appendChild(h2Node);  details.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>

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");    var request=new XMLHttpRequest();  var method="GET";  var url=null;  var details=document.getElementById("details");    for(var i=0;i<aNodes.length;i++){    aNodes[i].onclick=function(){  url=this.href;request.open(method, url);request.send(null);request.onreadystatechange=function(){if(request.readyState==4){if(request.status==200 || request.status==304){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>

0 0