Ajax-数据格式HTML&XML&JSON

Ajax

数据格式_HTML

  • Ajax-数据格式HTML&XML&JSON

  • Ajax-数据格式HTML&XML&JSON

  • 实例

    • Ajax-数据格式HTML&XML&JSON

    • index.html

      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="UTF-8">
      <title>Perple 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){
      							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>
      
    • 效果

      Ajax-数据格式HTML&XML&JSON

  • Ajax-数据格式HTML&XML&JSON

数据格式_XML

  • Ajax-数据格式HTML&XML&JSON

  • Ajax-数据格式HTML&XML&JSON

  • index.html

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Perple 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){
    							//1.结果为XML格式,所以需要使用responseXML来获取
    							var result=request.responseXML;
    							//2.结果不能直接使用,必须先创建对应的节点,再把节点加入到 #details中
    							//目标格式为:
    								/*
    								<h2><a href="mailto:andy@clearleft.com">Andy Budd</a></h2>
    								<a href="http://andybudd.com/">http://andybudd.com/</a>
    								*/
    							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);
    							
    							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>
    
  • andy.xml

    <?xml version="1.0" encoding="UTF-8"?>
    <details>
    	<name>Andy Budd</name>
    	<website>http://andtbudd.com</website>
    	<email>andy@clearleft.com</email>
    </details>
    
  • 效果
    Ajax-数据格式HTML&XML&JSON

数据格式_JSON

  • Ajax-数据格式HTML&XML&JSON

  • Ajax-数据格式HTML&XML&JSON

  • index.html

    • <!DOCTYPE html>
      <html>
      <head>
      <meta charset="UTF-8">
      <title>Insert title here</title>
      <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){
      							
      							var result=request.responseText;
      							var object=eval("("+result+")");
      							//2.结果不能直接使用,必须先创建对应的节点,再把节点加入到 #details中
      							//目标格式为:
      								/*
      								<h2><a href="mailto:andy@clearleft.com">Andy Budd</a></h2>
      								<a href="http://andybudd.com/">http://andybudd.com/</a>
      								*/
      							var name=object.person.name;
      							var website=object.person.website;
      							var email=object.person.email;
      							
      							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>
      
    • andy.js

      {"person":{
      	"name":"Andy Budd",
      	"website":"http://andybudd.com",
      	"email":"andy@clearleft.com"
      	}
      }
      
    • Ajax-数据格式HTML&XML&JSON

  • 效果

    • Ajax-数据格式HTML&XML&JSON
  • Ajax-数据格式HTML&XML&JSON

总结

  • Ajax-数据格式HTML&XML&JSON
上一篇:js 动态添加列以及删除


下一篇:创建动态表格(实现单元格内随机数即随机颜色)