AJAX-数据格式提要

来源：互联网发布：技术总监知乎编辑：程序博客网时间：2024/05/16 08:10

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

（1）HTML返回:

<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>  <ul>   <li> <a href = "andy.html">Andy</a></li>   <li> <a href = "tom.html">Tom</a></li>   <li> <a href = "Deve.html">Deve</a>       <br><br><br>   <div id = "details"></div>  </ul>

（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">        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->  <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：

  <script type="text/javascript">         var jsonObject = {      "name":"atguigu",      "age":12,      "address":{"city":"beijing","school":"acguigu"},      "teaching":function(){       alert("java EE:Android");      }    }        alert(jsonObject.name);    alert(jsonObject.age);    alert(jsonObject.address.city);    jsonObject.teaching();  </script>

调用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">        <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <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领域的世界语。

阅读全文

0 0