利用点击按钮模拟某京，某宝，滚动页面加载图片的效果，代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ajax请求</title>
</head>
<body>
<button id="load">加载更多</button>
<div id="photos">
</div>
<script>
(()=>{
const photos=document.querySelector("#photos")
// const.photos=document.getElementById('photos')
const loadBtn=document.getElementById('load')
//URL 需要自己申请
const url='https://apis.tianapi.com/esports/index?key=b28784d07b8a040597XXXX...5&page='
var page=1
loadBtn.addEventListener('click',()=>{
page+=1
//创建异步请求对象
//https://www.tianapi.com/#meinv
let xhr=new XMLHttpRequest()
//https://www.tianapi.com/gethttp/265
//open方法的第一个参数是请求的类型，第二个是请求的URL，第三个参数必须设置为true，表示发出的异步请求
//URl 的结尾加上&num=30表示一次拿30个数据
xhr.open('get',url+page,
true)//true表示发的是异步请求
//绑定事件回调函数，在收到Server返回的数据后要对页面进行局部刷新
//就绪状态改变的事件
xhr.addEventListener('readystatechange',()=>{
//判断请求是否成功
//405访问方法错，403没有访问权限，401未授权；4--请求错
//5--Server错了（一般看不到，一般是Server升级维护中）
//3--重定向（曾经请求过，数据还是原来的数据）
if(xhr.readyState ==4 &&xhr.status==200){
alert(xhr.responseText)
//alert(xhr.responseText)传出的是字符string
//将返回的JSON字符串解析成Javascript对象
let json=JSON.parse(xhr.responseText)
json.result.newslist.forEach((mm)=>{
//console.log(mm.picUrl)
let img=document.createElement('img')
img.src=mm.picUrl
img.width='300'
console.log(img)
photos.insertBefore(img, photos.firstElementChild)
})
}
})
//发出异步请求
xhr.send()
})
})()
</script>
</body>
</html>运行完成可以点击每一次按钮加载不同的图片
使用JQuery方法改写后的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ajax请求</title>
</head>
<body>
<button id="load">加载更多</button>
<div id="photos">
</div>
<script src='js/jquery-3.7.1.min.js'></script>
<script>
$(()=>{
const url='https://apis.tianapi.com/esports/index?key='
var page=0
$('#load').on('click',(evt)=>{
page+=1
let date={"key"="b28..........575","page":page}
//$对象getJSON方法可以执行异步请求（get请求）获得服务器返回的JSON格式
//第一个参数是请求的URL（统一资源定位符）
//第二个参数是要发送给Server的数据（JSON格式），如果没有数据发送给服务器可以为空
//第三个参数是请求成功服务器返回数据之后要执行的回调函数，其参数为服务器的JSON对象
$.getJSON(url,data,(json)=>{
json.result.newslist.forEach((mm)=>{
console.log(mm.picUrl)
$('#photos').prepend($('<img>').attr('src',mm.picUrl).attr('width','300'))
})
})
})
})
</script>
</body>
</html>Jquery 的$.ajax({})使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ajax请求</title>
</head>
<body>
<button id="load">加载更多</button>
<div id="photos">
</div>
<script src='js/jquery-3.7.1.min.js'></script>
<script>
$(()=>{
const url='https://apis.tianapi.com/esports/index'
var page=0
$("#load").on("click",(evt)=>{
page += 1
let data={"key":"b287.......75","page":page}
$.ajax({
"url":url,
"type":"get",//请求方式：可以是post,get,delete,put,patch 默认是get请求，可以省略不写
"data":data,
"datatype":"json",//返回的数据类型，XML：XML类型；text:文本类型 默认是JSON格式，可以省略不写
"headers":{},//请求头没有东西可以忽略不写
"success":(json)=>{
json.result.newslist.forEach((mm)=>{
console.log(mm.picUrl)
$('#photos').prepend($('<img>').attr('src',mm.picUrl).attr('width','300'))
})
},//请求成功了干什么
"errors":(error)=>{},//请求失败了干什么 可以省略
})
})
})
</script>
</body>
</html>
