2018.04.26**********************************************************************author:wills
今天介绍一个H5里面异步加载的使用方法,下面是一个完整的html网页,保存为.html就可以直接用浏览器打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="photos">
</div>
<button id="load">加载</button>
<script type="text/javascript">
(function(){
var btn = document.getElementById('load');
btn.addEventListener('click', function(){
//javascript默认不允许跨域取数据(同源策略)
//但是今天绝大多数提供数据接口的服务器都设置了允许跨域取数据
//http协议有很多动词,但是浏览器支持两个get获取/post上传
//URL - Uniform Resource Locater统一资源定位符
//1.创建异步请求对象xhr
var xhr = new XMLHttpRequest();
//2.异步的从目标服务器获取数据
xhr.open('get',
'http://api.tianapi.com/meinv/?key=这个key请自行前往天行数据(https://www.tianapi.com/)注册账号获取&num=10', true);
//3.创建回调函数,表示服务器响应后需要干什么
xhr.onreadystatechange = function(){
if (xhr.readyState == 4 && xhr.status == 200) {
//4.通过服务器获取的数据对页面进行DOM操作实现局部刷新
//将获取的json数据字符串解析为json格式数据
var obj = JSON.parse(xhr.responseText);
//通过newslist获取所有的数据键值对放入mmArray中
var mmArray = obj.newslist;
//创建一个新的div元素用来放置异步数据获取的图片
var div = document.getElementById('photos')
for (var i = 0; i < mmArray.length; i++){
//对MMArray遍历,获取相应的图片网址url
var img = document.createElement('img');
//创建新的图片对象img,并且通过src属性将获取的图片链接url赋给img
img.src = mmArray[i].picUrl;
img.width = '360';
//将图片放置到预先创建的div里面
div.appendChild(img);
}
}
};
xhr.send();
});
}());
</script>
</body>
</html>