46 lines
1.4 KiB
HTML
46 lines
1.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title></title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<button id="loadBtn">加载</button>
|
||
|
|
<script src="js/mylib.js"></script>
|
||
|
|
<script>
|
||
|
|
+function() {
|
||
|
|
bind($('loadBtn'), 'click', function() {
|
||
|
|
// 创建异步请求对象
|
||
|
|
var xhr = new XMLHttpRequest();
|
||
|
|
if (xhr) {
|
||
|
|
var url = 'http://api.tianapi.com/meinv/?key=772a81a51ae5c780251b1f98ea431b84&num=10';
|
||
|
|
// 第一个参数 - 请求的方式get或post
|
||
|
|
// 第二个参数 - 请求的资源对应的URL(统一资源定位符)
|
||
|
|
// 第三个参数 - true表示异步请求(不中断用户体验的非阻塞式请求)
|
||
|
|
xhr.open('get', url, true);
|
||
|
|
// 绑定事件回调函数(服务器响应完成并成功后要对页面进行局部刷新)
|
||
|
|
xhr.onreadystatechange = function() {
|
||
|
|
if (xhr.readyState == 4 && xhr.status == 200) {
|
||
|
|
// 将服务器返回的数据解析成JSON
|
||
|
|
var json = JSON.parse(xhr.responseText);
|
||
|
|
var mmList = json.newslist;
|
||
|
|
for (var i = 0; i < mmList.length; i += 1) {
|
||
|
|
var mm = mmList[i];
|
||
|
|
// 动态创建<img>标签并绑定src属性
|
||
|
|
var img = document.createElement('img');
|
||
|
|
img.src = mm.picUrl;
|
||
|
|
img.width = 300;
|
||
|
|
document.body.insertBefore(img, $('loadBtn'));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
xhr.send();
|
||
|
|
} else {
|
||
|
|
alert('你的浏览器是一坨屎!');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}();
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|