ajax的原创

最新推荐文章于 2025-08-08 15:43:57 发布

原创最新推荐文章于 2025-08-08 15:43:57 发布 · 318 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax

ajax 专栏收录该内容

4 篇文章

订阅专栏

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>