服务器端的编程语言只能以如下三种格式返回数据: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领域的世界语。