使用js写一个作用于xml文件的ajax 





 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <script type="text/javascript">
 5             window.onload = function(){
 6                 var aNodes = document.getElementsByTagName("a");
 7                 for(var i = 0; i < aNodes.length; i++){
 8                     aNodes[i].onclick = function(){
 9                         var request;
10                         if(window.XMLHttpRequest) {
11                             request = new XMLHttpRequest();
12                         }else{
13                             request = new ActiveXObject("Microsoft.XMLHTTP");
14                         }
15                         var url = this.href;
16                         var method = "GET";
17                         request.open(method, url);
18                         request.send(null);
19                         request.onreadystatechange = function(){
20                             if(request.readyState == 4){
21                                 if(request.status == 200 || request.status == 304){
22                                     //1,结果为XML格式，所以需要用responseXML来获取
23                                     var result = request.responseXML;
24                                     //结果不能直接使用，必须先创建对应的节点，再把节点加入到#details里面
25                                     //目标格式
26                                     /*
27                                         <h2><a href    = "mailto:andy@clearleft.com">Andy Budd</a></h2>
28                                         <a href="http://andybudd.com/">http://andybudd.com/</a>
29                                     */
30                                     var name = result.getElementsByTagName("name")[0].firstChild.nodeValue;
31                                     var website = result.getElementsByTagName("website")[0].firstChild.nodeValue;
32                                     var email = result.getElementsByTagName("email")[0].firstChild.nodeValue;
33 
34                                     //alert(name);
35                                     //alert(website);
36                                     //alert(email);
37                                     //document.getElementById("details").innerHTML = request.responseText;
38                                     var aNode = document.createElement("a");
39                                     aNode.appendChild(document.createTextNode(name));
40                                     aNode.href = "mailto:" + email;
41                                     
42                                     var h2Node = document.createElement("h2");
43                                     h2Node.appendChild(aNode);
44                                     
45                                     var aNode2 = document.createElement("a");
46                                     aNode2.appendChild(document.createTextNode(website));
47                                     aNode2.href = website;
48                                     
49                                     var detailsNode = document.getElementById("details");
50 　　　　　　　　　　　　　　　　　　　　　 detailsNode.innerHTML = "";
　　　　　　　　　　　　　　　　　　　　　　　 //每次增加新节点前，先把原页面清空，否则会像下图那样，每次点击一个名字，
　　　　　　　　　　　　　　　　　　　　　　　 //就会在原有的页面上增加一个新的任务信息，而不会清空上一个人物信息
51                                     detailsNode.appendChild(aNode);
52                                     detailsNode.appendChild(aNode2);
53                                     
54                                     
55                                 }
56                             }
57                         }
58                         return false;
59                     }
60                 }
61             }
62         </script>
63     </head>
64     <body>
65         <h1>People</h1>
66         <ul>
67             <li><a href="files/andy.xml">Andy</a></li>
68             <li><a href="files/jimy.xml">jimy</a></li>
69             <li><a href="files/lucy.xml">lucy</a></li>
70             <li><a href="files/lily.xml">lily</a></li>
71         </ul>
72         <div id="details"></div>
73     </body>
74 </html>






 






 


 




 






            

            
posted @ 
2017-03-07 10:30 
云里有棵树 
阅读(140) 
评论(0) 
 
收藏 
举报