Ajax之三种数据传输格式
通过ajax异步传输的数据格式有三种，分别是html、xml以及json格式。下面就分别给出它们传输格式的代码实例：
html格式
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
<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();
method = "GET";
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>
<div align="center">
<h1>People</h1>
<ul>
<!-- `andy.html`:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Insert title here</title>
</head>
<body>
<h3>Hello,This is Andy!</h3>
<p>Welcom!</p>
</body>
</html>
-->
<li><a href="files/andy.html">Andy</a>
</li>
<li><a href="files/richard.html">Richard</a>
</li>
<li><a href="files/jeremy.html">Jeremy</a>
</li>
</ul>
<div id="details"></div>
</div>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
xml格式
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
<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();
method = "GET";
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格式，所以使用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;
//alert(name);
//alert(email);
//alert(website);
// 创建DOM树：<h2><a href="...">...</a></h2>
var aNode = document.createElement("a");
aNode.appendChild(document.createTextNode(name));
aNode.href = "mailto:" + email;
var h2Node = document.createElement("h2");
h2Node.appendChild(aNode);
// 创建DOM树：<a href="...">...</a>
var aNode2 = document.createElement("a");
aNode2
.appendChild(document
.createTextNode(website));
aNode2.href = website;
// 将上面创建两个的DOM树加入#details中
var detailsNode = document
.getElementById("details");
detailsNode.innerHTML = "";
detailsNode.appendChild(h2Node);
detailsNode.appendChild(aNode2);
}
}
}
return false;
}
}
}
</script>
</head>
<body>
<div align="center">
<h1>People</h1>
<ul>
<!-- `andy.xml`:
<?xml version="1.0" encoding="UTF-8"?>
<details>
<name>Andy</name>
<website>http://adsctio.com/</website>
<email>Andy@clearleft.com</email>
</details>
-->
<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>
</div>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
json格式
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
<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();
method = "GET";
url = this.href;
request.open(method, url);
request.send(null);
request.onreadystatechange = function() {
if (request.readyState == 4) {
if (request.status == 200 || request.status == 304) {
// 结果集为JSON格式，所以使用responseTest来获取
var result = request.responseText;
var objectJson = eval("(" + result + ")");
// 结果不能直接使用，必须先创建对应的节点，再把节点加入到#details中
var name = objectJson.person.name;
var website = objectJson.person.website;
var email = objectJson.person.email;
//alert(name);
//alert(email);
//alert(website);
// 创建DOM树：<h2><a href="...">...</a></h2>
var aNode = document.createElement("a");
aNode.appendChild(document.createTextNode(name));
aNode.href = "mailto:" + email;
var h2Node = document.createElement("h2");
h2Node.appendChild(aNode);
// 创建DOM树：<a href="...">...</a>
var aNode2 = document.createElement("a");
aNode2
.appendChild(document
.createTextNode(website));
aNode2.href = website;
// 将上面创建两个的DOM树加入#details中
var detailsNode = document
.getElementById("details");
detailsNode.innerHTML = "";
detailsNode.appendChild(h2Node);
detailsNode.appendChild(aNode2);
}
}
}
return false;
}
}
}
</script>
</head>
<body>
<div align="center">
<h1>People</h1>
<ul>
<!-- `andy.js`:
{"person":{
"name":"Richard",
"website":"http://Richard.com",
"email":"Richard@clearleft.com"
}
}
-->
<li><a href="files/andy.js">Andy</a></li>
<li><a href="files/jeremy.js">Jeremy</a></li>
<li><a href="files/richard.js">Richard</a></li>
</ul>
<div id="details"></div>
</div>
</body>
</html>