AJAX-数据格式提要

深藏阁楼爱情的钟 2024-02-17 22:54 40阅读 0赞

服务器端的编程语言只能以如下三种格式返回数据：XML，jSON，HTML

（1）HTML返回:

（2）XML返回：

<!DOCTYPE html>
    <html>
      <head>
        <title>index.html</title>
    	
        <meta name="keywords" content="keyword1,keyword2,keyword3">
        <meta name="description" content="this is my page">
        <meta name="content-type" content="text/html; charset=UTF-8">
        
        
    
      <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){
    		       
    		         //<h2> <a href = "motto:andy@clearleft.com">Andy buGG</a></h2>   转换的目标格式
                     //<a href = "http://www.pzhu.cn">http://www.pzhu.cn</a>
                     
                     //结果为xml格式，所以需要responseXML来获取
                     var result = request.responseXML;
                     //结果不能使用，必须创建相应节点，再放到#details中
                     var name = result.getElementsByTagName("name")[0].firstChild.nodeValue;
                     var website = result.getElementsByTagName("website")[0].firstChild.nodeValue;
                     var email = result.getElementsByTagName("email")[0].firstChild.nodeValue;
                     
                     
                     var aNode = document.createElement("a");
                    aNode.appendChild(document.createTextNode(name));
                    aNode.href = website;
                     
                     var h2Node = document.createElement("h2");
                     h2Node.appendChild(aNode);
                     
                     var aNode2 = document.createElement("a");
                     aNode2.appendChild(document.createTextNode(email));
                     aNode2.href = website;
                     
                     var detailsNode = document.getElementById("details");
                     detailsNode.innerHTML = "";
                     detailsNode.appendChild(h2Node);
                     detailsNode.appendChild(aNode2);
    		       }   
    		    }
    		  }
    		  return false ;
    		}
    	   }
         }
        
      </script>
    
      </head>
      
      <body>
      <ul>
       <li> <a href = "andy.xml">Andy</a></li>
       <li> <a href = "tom.xml">Tom</a></li>
           <br><br><br>
       <div id = "details"></div>
      </ul>
      </body>
    </html>

xml格式：

<?xml version="1.0" encoding="UTF-8"?>
    <details>
      <name>tom</name>
      <website>http://pzhu.cn</website>
      <email>tom@clearleft</email>
    </details>

（3）JSON格式返回：

一个简单的JSON：

调用resposetext函数， 返回一个Json字符串，需要进行转换成html格式：

//eval()可以将字符串内容解析成一个js处理 
    var JsonStr = "{'name':'zhangsan'}";
    var testStr = eval("("+JsonStr+")");
    alert(testStr.name);

<!DOCTYPE html>
    <html>
      <head>
        <title>testJson.html</title>
    	
        <meta name="keywords" content="keyword1,keyword2,keyword3">
        <meta name="description" content="this is my page">
        <meta name="content-type" content="text/html; charset=UTF-8">
        
        
    
     <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){
    		       
    		         //<h2> <a href = "motto:andy@clearleft.com">Andy buGG</a></h2>   转换的目标格式
                     //<a href = "http://www.pzhu.cn">http://www.pzhu.cn</a>
                     var result = request.responseText;
                     var Object = eval("("+result+")");
                     
                     //结果不能使用，必须创建相应节点，再放到#details中
                     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 = website;
                     
                     var h2Node = document.createElement("h2");
                     h2Node.appendChild(aNode);
                     
                     var aNode2 = document.createElement("a");
                     aNode2.appendChild(document.createTextNode(email));
                     aNode2.href = website;
                     
                     var detailsNode = document.getElementById("details");
                     detailsNode.innerHTML = "";
                     detailsNode.appendChild(h2Node);
                     detailsNode.appendChild(aNode2);
    		       }   
    		    }
    		  }
    		  return false ;
    		}
    	   }
         }
        
      </script>
    
      </head>
      
      <body>
          <ul>
       <li> <a href = "andy.js">Andy</a></li>
       <li> <a href = "tom.js">Tom</a></li>
           <br><br><br>
       <div id = "details"></div>
      </ul>
      </body>
    </html>

Json数据格式：

//andy.js
    {"person":{
    	"name":"andy",
    	"website":"http://pzhu.cn",
    	"email":"andy@clearleft"
    }
    }

三种数据格式的比较：

HTML:若应用程序不需要与其他应用程序数据共享，则优选。

JSON:若数据重用，则优选。

XML:远程应用程序未知时，则优选；因为xml是web领域的世界语。