Ajax------常用的数据格式
XML
JSON
HTML
三种数据格式: XML、JSON、HTML
一.HTML格式
HTML由一些普通文本组成.若服务器通过XMLHttpRequest发送HTML, 文本将存储在responseText属性中.
可以直接将responseText赋值给节点的innerHTML属性.
优点:
- 从服务器发送的HTML代码在浏览器端不需要用JS再解析
- HTML的可读性好
- HTML代码块与innerHTML属性搭配, 效率高
缺点:
- 若需通过Ajax更新一篇文档的多个部分, HTML不合适
- innerHTML并非DOM标准
同目录下四个html文件: index.html、sun.html、zhu.html、sha.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
|
<head>
<meta charset="UTF-8">
<title>index</title>
<script type="text/javascript">
window.onload = function() {
var briefA = document.getElementsByTagName("a");
for(var i = 0; i < briefA.length; i++) {
briefA[i].onclick = function() {
var request = new XMLHttpRequest();
request.open("GET", this.href, true);
request.send(null);
request.onreadystatechange = function() {
if(request.readyState == 4) {
if(request.status == 200) {
document.getElementsByClassName("detail")[0].innerHTML = request.responseText;
}
}
};
return false;
};
}
};
</script>
<style type="text/css">
.brief {
width: 200px;
margin: 0 auto;
}
.brief a{
font-size: 20px;
}
.detail {
width: 200px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="brief">
<a href="sun.html">孙悟空</a>
<a href="zhu.html">猪八戒</a>
<a href="sha.html">沙和尚</a>
</div>
<div class="detail">
</div>
</body>
|
1
2
3
4
|
<p>姓名:孙悟空</p>
<p>网址:<a href="https://baike.baidu.com/item/%E5%AD%99%E6%82%9F%E7%A9%BA/5576?fr=aladdin" target="_blank">简介</a></p>
<p>住址:花果山</p>
|
1
2
3
4
|
<p>姓名:猪八戒</p>
<p>网址:<a href="https://baike.baidu.com/item/%E7%8C%AA%E5%85%AB%E6%88%92/769?fr=aladdin" target="_blank">简介</a></p>
<p>住址:高老庄</p>
|
1
2
3
4
|
<p>姓名:沙和尚</p>
<p>网址:<a href="https://baike.baidu.com/item/%E6%B2%99%E6%82%9F%E5%87%80/29248?fromtitle=%E6%B2%99%E5%92%8C%E5%B0%9A&fromid=6472043&fr=aladdin" target="_blank">简介</a></p>
<p>住址:流沙河</p>
|
二.XML
XML就是为了传输数据而生的
优点:
- XML是一种通用的数据格式
- XML可以为数据自定义标记
- 利用DOM就可以完全掌控文档
缺点:
- 若XML文档来自服务器, 就必须得保证文档文档含有正确的部首信息. 若文档类型不正确, 那么responseXML的值将为空
- 当浏览器接收到的XML很大时, DOM解析可能会很复杂
同目录下四个文件: index.html、sun.xml、zhu.xml、sha.xml
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
| <head>
<meta charset="UTF-8">
<title>index</title>
<script type="text/javascript">
window.onload = function() {
var briefA = document.getElementsByTagName("a");
var detail = document.getElementsByClassName("detail")[0];
for(var i = 0; i < briefA.length; i++) {
briefA[i].onclick = function() {
var request = new XMLHttpRequest();
request.open("GET", this.href, true);
request.send(null);
request.onreadystatechange = function() {
if(request.readyState == 4&&request.status == 200) {
var result = request.responseXML;
/* 目标格式
* <p>姓名:</p>
* <p>网址:<a href="">简介</a></p>
* <p>住址:</p>
*/
detail.innerHTML = "";
var name = result.getElementsByTagName("name")[0].firstChild.nodeValue;
var web = result.getElementsByTagName("website")[0].firstChild.nodeValue;
var address = result.getElementsByTagName("address")[0].firstChild.nodeValue;
var p1 = document.createElement("p");
p1.innerHTML = "姓名:"+name;
var p2 = document.createElement("p");
p2.innerHTML = "网址:";
var p3 = document.createElement("p");
p3.innerHTML = "住址:" + address;
var a = document.createElement("a");
a.href = web;
a.target = "_blank";
a.innerHTML = "简介";
p2.appendChild(a);
detail.appendChild(p1);
detail.appendChild(p2);
detail.appendChild(p3);
}
};
return false;
};
}
};
</script>
<style type="text/css">
.brief {width: 200px;margin: 0 auto;}
.brief a{font-size: 20px;}
.detail {width: 200px;margin: 0 auto;}
</style>
</head>
<body>
<div class="brief">
<a href="sun.xml">孙悟空</a>
<a href="zhu.xml">猪八戒</a>
<a href="sha.xml">沙和尚</a>
</div>
<div class="detail">
</div>
</body>
|
1
2
3
4
5
6
7
8
|
<?xml version='1.0' encoding='UTF-8'?>
<detail>
<name>孙悟空</name>
<website>https://baike.baidu.com/item/%E5%AD%99%E6%82%9F%E7%A9%BA/5576?fr=aladdin</website>
<address>花果山</address>
</detail>
|
1
2
3
4
5
6
7
|
<?xml version='1.0' encoding='UTF-8'?>
<detail>
<name>猪八戒</name>
<website>https://baike.baidu.com/item/%E7%8C%AA%E5%85%AB%E6%88%92/769?fr=aladdin</website>
<address>高老庄</address>
</detail>
|
1
2
3
4
5
6
7
|
<?xml version='1.0' encoding='UTF-8'?>
<detail>
<name>沙和尚</name>
<website>https://baike.baidu.com/item/%E6%B2%99%E6%82%9F%E5%87%80/29248?fr=aladdin</website>
<address>流沙河</address>
</detail>
|
三.JSON
优点:
- 也是一种数据传输的格式, JSON与XML很相似, 但是JSON更轻巧
- JSON不需要从服务端发送含有特定内容类型的首部信息.
缺点:
- 语法严谨
- 代码不太易读
- 用eval函数解析JSON字符串存在风险
同目录下四个文件: index.html、sun.json、zhu.json、sha.json
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
| <head>
<meta charset="UTF-8">
<title>index</title>
<script type="text/javascript">
window.onload = function() {
var briefA = document.getElementsByTagName("a");
var detail = document.getElementsByClassName("detail")[0];
for(var i = 0; i < briefA.length; i++) {
briefA[i].onclick = function() {
var request = new XMLHttpRequest();
request.open("GET", this.href, true);
request.send(null);
request.onreadystatechange = function() {
if(request.readyState == 4&&request.status == 200) {
var result = request.responseText;
var obj = JSON.parse(result);
detail.innerHTML = "";
var p1 = document.createElement("p");
p1.innerHTML = "姓名:"+obj.person.name;
var p2 = document.createElement("p");
p2.innerHTML = "网址:";
var p3 = document.createElement("p");
p3.innerHTML = "住址:" + obj.person.address;
var a = document.createElement("a");
a.href = obj.person.website;
a.target = "_blank";
a.innerHTML = "简介";
p2.appendChild(a);
detail.appendChild(p1);
detail.appendChild(p2);
detail.appendChild(p3);
}
};
return false;
};
}
};
</script>
<style type="text/css">
.brief {
width: 200px;
margin: 0 auto;
}
.brief a{
font-size: 20px;
}
.detail {
width: 200px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="brief">
<a href="sun.json">孙悟空</a>
<a href="zhu.json">猪八戒</a>
<a href="sha.json">沙和尚</a>
</div>
<div class="detail">
</div>
</body>
|
1
2
3
4
5
6
| {"person":{
"name":"孙悟空",
"website":"https://baike.baidu.com/item/%E5%AD%99%E6%82%9F%E7%A9%BA/5576?fr=aladdin",
"address":"花果山"
}
}
|
1
2
3
4
5
6
| {"person":{
"name":"猪八戒",
"website":"https://baike.baidu.com/item/%E7%8C%AA%E5%85%AB%E6%88%92/769?fr=aladdin",
"address":"高老庄"
}
}
|
1
2
3
4
5
6
| {"person":{
"name":"沙和尚",
"website":"https://baike.baidu.com/item/%E6%B2%99%E6%82%9F%E5%87%80/29248?fr=aladdin",
"address":"流沙河"
}
}
|
