003 Ajax中传输格式为XML

一：

1.优缺点

　　

二：大纲

1.结构设计

　　

三：程序

1.xml

 <?xml version="1.0" encoding="utf-8"?>
 <details>
   <name>Andy Budd</name>
   <website>http://andybudd.com/</website>
   <email>andy@clearleft.com</email>
 </details>

2.css

body {
  background: #fff url("logo.png") fixed no-repeat top left;
  color: #321;
  font-family: Myriad,"Lucida Grande","Trebuchet MS",Verdana,Helvetica,Arial,sans-serif;
  line-height: 1.6;
  margin: 1em 20%;
}
a {
  color: #674;
  font-weight: bold;
  text-decoration: none;
}
a:hover {
  color: #896;
  text-decoration: underline;
}

　　

3.index.html

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>Insert title here</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){
                             //XML格式
                             var result=request.responseXML;
                             //构建对应节点
                             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));
                             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>

四：效果

1.