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
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button id="ok">换一组</button>
<div id="container"></div>
<!-- HTML: Hyper-Text Markup Language -->
<!-- XML: eXtensible Markup Language -->
<!-- XML最为重要的用途是在两个异构的系统之间交换数据 -->
<!-- 现在这项功能基本上被JSON和YAML格式替代了 -->
<!-- Ajax: Asynchronous JavaScript and XML -->
<!-- 通过JavaScript代码向服务器发起异步请求并获得数据 -->
<!-- 异步请求：在不中断用户体验的前提下向服务器发出请求 -->
<!-- 获得数据后可以通过DOM操作对页面进行局部刷新加载服务器返回的数据 -->
<script>
(function() {
var div = document.getElementById('container');
var button = document.getElementById('ok');
button.addEventListener('click', function() {
// 1. 创建异步请求对象
var xhr = new XMLHttpRequest();
if (xhr) {
var url = 'http://api.tianapi.com/meinv/?key=772a81a51ae5c780251b1f98ea431b84&num=10';
// 2. 配置异步请求
xhr.open('get', url, true);
// 3. 绑定事件回调函数（服务器成功响应后要干什么）
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
div.innerHTML = '';
// 5. 解析服务器返回的JSON格式的数据
var jsonObj = JSON.parse(xhr.responseText);
var array = jsonObj.newslist;
// 6. 通过DOM操作实现页面的局部刷新
for (var i = 0; i < array.length; i += 1) {
var img = document.createElement('img');
img.src = array[i].picUrl;
img.width = '250';
div.appendChild(img);
}
}
};
// 4. 发出请求
xhr.send();
} else {
alert('使用垃圾浏览器还想看美女，做梦！');
}
});
})();
</script>
</body>
</html>
|