案例一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button type="button" > 添加一张图片</button>
<script type="text/javascript">
// 封装 一个 方法，未来只需 url ，和 执行方式
function loadJson(url,callback){
// 1. 创建 XHR 对象
var xhr = new XMLHttpRequest();
// 2. 监听状态
xhr.onreadystatechange=callback
// 3.初始化请求
xhr.open('get',url,true)
// 4. 发送请求
xhr.send()
}
// 点击 创建一张
document.querySelector('button').onclick=function(){
loadJson('my.json',function(){
// 此时 请求完成后 的 操作
if(this.readyState==4 && this.status==200){
let data_ = JSON.parse(this.response);
var img_ = new Image();
img_.height=300;
img_.src=data_[parseInt(Math.random()*10)].img_url
document.body.appendChild(img_)
}
})
}
// 滚动条 到页面底部 加载一张
window.onscroll = function(e){
// 内容总高度
let all_height= document.documentElement.scrollHeight;
// 窗口高度
let inner_height = window.innerHeight;
// 内容卷去距离
let scroll_top = document.documentElement.scrollTop;
if(all_height==innerHeight+scroll_top){
loadJson('my.json',function(){
// 此时 请求完成后 的 操作
if(this.readyState==4 && this.status==200){
let data_ = JSON.parse(this.response);
var img_ = new Image();
img_.height=300;
img_.style.display='block'
img_.src=data_[parseInt(Math.random()*10)].img_url
document.body.appendChild(img_)
}
})
}
}
</script>
</body>
</html>
案例一JSON my.json
{
"0": {
"img_url": "//cdn.cnbj1.fds.api.mi-img.com/mi-mall/4fc620161647b9072771c6db03124590.jpeg"
},
"1": {
"img_url": "//cdn.cnbj1.fds.api.mi-img.com/mi-mall/9c86b669b21400d4f5953d2bd8f40cb3.jpg"
},
"2": {
"img_url": "//cdn.cnbj1.fds.api.mi-img.com/mi-mall/aaf838745e44e37bab3917d0c5e170d3.jpg"
},
"3": {
"img_url": "//cdn.cnbj1.fds.api.mi-img.com/mi-mall/75298f4f607941acc321e310bb7489da.jpg"
},
"4": {
"img_url": "//cdn.cnbj1.fds.api.mi-img.com/mi-mall/51b18c42e32b28b096271bfcbd5af4d1.jpg"
},
"5": {
"img_url": "//cdn.cnbj1.fds.api.mi-img.com/mi-mall/54b60d49bbfe14e4db53efee3e1b0053.jpg"
},
"6": {
"img_url": "//cdn.cnbj1.fds.api.mi-img.com/mi-mall/121e370dc1d5ccf75673eb9ac7a575a3.jpg"
},
"7": {
"img_url": "//cdn.cnbj1.fds.api.mi-img.com/mi-mall/6678e97a159fff2e90b31573059188e7.jpg"
},
"8": {
"img_url": "//cdn.cnbj1.fds.api.mi-img.com/mi-mall/ff17f96513e9c29c948e32453784f0e2.jpg"
},
"9": {
"img_url": "//cdn.cnbj1.fds.api.mi-img.com/mi-mall/6de6a9afb1703792ef400628e0352161.jpg"
},
"10": {
"img_url": "//cdn.cnbj1.fds.api.mi-img.com/mi-mall/1557525b534f9525998274d03bec17e8.jpg"
},
"11": {
"img_url": "//cdn.cnbj1.fds.api.mi-img.com/mi-mall/75a5356ddb367b1f9972574b877cef39.jpg"
},
"12": {
"img_url": "//cdn.cnbj1.fds.api.mi-img.com/mi-mall/e135b95d82f9e232953afc837dd9c68e.jpg"
},
"13": {
"img_url": "//cdn.cnbj1.fds.api.mi-img.com/mi-mall/5e8d464644b1b8ecaf38567b3a387605.jpg"
}
}
案例二 短视频案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var index = 1
// 异步加载
function AJAX(index = 1) {
// 1. 创建一个 XMLHttpRequest 对象
var req = new XMLHttpRequest();
// 2. 打开链接
req.open('GET', `https://api.apiopen.top/getJoke?page=${index}&count=10&type=video`, true)
// 3. 建立事件监听
req.onreadystatechange = function() {
if (req.readyState == 4 && req.status == 200) {
let temp = JSON.parse(req.response);
for (let i of temp.result) {
for (let j in i) {
if (j == 'video') {
console.log(i[j])
var vi = document.createElement('video')
vi.src = i[j];
vi.width = 300;
vi.controls = 'true'
var p = document.createElement('p')
p.appendChild(vi)
document.body.appendChild(p)
}
}
}
}
}
// 4. 发送
req.send()
}
AJAX(index)
window.onscroll = function(e) {
if (document.documentElement.scrollHeight - window.innerHeight == document.documentElement.scrollTop) {
console.log('抵达末尾')
index++
AJAX(index)
}
}
</script>
</body>
</html>