CRainyDay

Ajax——常用的数据格式

XML

JSON

HTML

三种数据格式: XML、JSON、HTML

一.HTML格式

HTML由一些普通文本组成.若服务器通过XMLHttpRequest发送HTML, 文本将存储在responseText属性中.

可以直接将responseText赋值给节点的innerHTML属性.

优点:

  1. 从服务器发送的HTML代码在浏览器端不需要用JS再解析
  2. HTML的可读性好
  3. HTML代码块与innerHTML属性搭配, 效率高

缺点:

  1. 若需通过Ajax更新一篇文档的多个部分, HTML不合适
  2. 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
<!--index.html-->
<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
<!--sun.html-->
<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
<!--zhu.html-->
<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
<!--sha.html-->
<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就是为了传输数据而生的
优点:

  1. XML是一种通用的数据格式
  2. XML可以为数据自定义标记
  3. 利用DOM就可以完全掌控文档

缺点:

  1. 若XML文档来自服务器, 就必须得保证文档文档含有正确的部首信息. 若文档类型不正确, 那么responseXML的值将为空
  2. 当浏览器接收到的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) {
//1.接受XML格式数据
var result = request.responseXML;
//2.解析XML数据
/* 目标格式
* <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
<!--sun.xml-->
<!--一定不要忘记XML的部首信息-->
<?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
<!--zhu.xml-->
<?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
<!--sha.xml-->
<?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

优点:

  1. 也是一种数据传输的格式, JSON与XML很相似, 但是JSON更轻巧
  2. JSON不需要从服务端发送含有特定内容类型的首部信息.

缺点:

  1. 语法严谨
  2. 代码不太易读
  3. 用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) {
//1.接受json格式数据
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":"流沙河"
}
}

 评论



本博客所有文章除特别声明外,均采用[(CC BY-NC-SA 4.0)]许可协议。转载请注明出处!

本站使用 Material X 作为主题 , 总访问量为 次 。
Copyright © 2019 CRainyDay's Blog 版权所有