标签：XML appendChild website Ajax aNode var 数据格式 document detailsNode
Ajax
数据格式_HTML
-
-
-
实例
-
-
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> -
效果
-
-
数据格式_XML
-
-
-
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> -
效果
数据格式_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" } } -
-
-
效果
-
总结
标签：XML,appendChild,website,Ajax,aNode,var,数据格式,document,detailsNode 来源： https://blog.csdn.net/Aqours/article/details/100833308
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。