example_of_jquery_3.html

<!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 loadBtn = document.querySelector('#load')
			const url = 'http://api.tianapi.com/meinv/?key=772a81a51ae5c780251b1f98ea431b84&page='
			var page = 0
			loadBtn.addEventListener('click', (evt) => {
				page += 1
				// 创建异步请求对象
				let xhr = new XMLHttpRequest()
				// open方法的第一个参数是请求类型, 第二个参数是请求的URL, 第三个参数必须设置为true(异步请求)
				xhr.open('get', url + page, true)
				// 绑定事件回调函数,在收到服务器返回的数据后要对页面进行局部刷新
				xhr.addEventListener('readystatechange', () => {
					if (xhr.readyState == 4 && xhr.status == 200) {
						// 将返回的JSON字符串解析成JavaScript的对象
						let json = JSON.parse(xhr.responseText)
						json.newslist.forEach((mm) => {
							let img = document.createElement('img')
							img.src = mm.picUrl
							img.width = '300'
							photos.insertBefore(img, photos.firstElementChild)
						})
					}
				})
				// 发送异步请求
				xhr.send()
			})
		})()
		</script>
	</body>
</html>