js ajax基础

最新推荐文章于 2022-04-16 11:24:43 发布

bingqise5193

最新推荐文章于 2022-04-16 11:24:43 发布

阅读量147

点赞数

分类专栏： js 文章标签： js ajax

本文链接：https://blog.csdn.net/bingqise5193/article/details/102951255

版权

js 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

作用

对页面的局部内容刷新，且不会进行url跳转

使用

新建实例 let xhr = new XMLHttpRequest()
定义请求 xhr.open("GET", "https://www.apiopen.top/journalismApi", true)
定义数据请求完成后的行为 xhr.onload = function() {}
发送请求 xhr.send()

整体有如上4步，接下来通过一个例子来大概了解下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ajax-api</title>
	<style>
		.news{
			background-color: #f4f4f4;
			padding: 10px;
			margin-bottom: 10px;
		}
	</style>
</head>
<body>
	<div>请求到的内容为：</div>
	<div id="content"></div>
	<script>
		var content = document.getElementById("content")
		var xhr = new XMLHttpRequest();
		// 如果为post则需为对象添加 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		// true表示不执行异步操作
		xhr.open("GET", "https://www.apiopen.top/journalismApi", true)
		xhr.onload = function() {
			if (this.status == 200) {
				// 先将JSON转为对象，再取属性
				var res = JSON.parse(this.responseText).data
				var count = 0;
				// 遍历对象
				for(var i in res) {
					// 遍历数组
					for(var j in res[i]) {
						var title = res[i][j].title
						var contents = res[i][j].digest
						count++
						// 不能忘记加号+
						content.innerHTML += `<div class="news">
											  	<h3>${count}.${title}</h3>
										      	<p>${contents}</p>
										      </div>`
					}
				}
			} else {
				alert("请求错误")
			}
		}
		xhr.send()
	</script>
</body>
</html>

当xhr.send()执行后，请求主要经历以下几个阶段：

readyState 值	状态	描述
`0`	`UNSENT`	代理被创建，但尚未调用 open() 方法。
`1`	`OPENED`	`open()` 方法已经被调用。
`2`	`HEADERS_RECEIVED`	`send()` 方法已经被调用，并且头部和状态已经可获得。
`3`	`LOADING`	下载中； `responseText` 属性已经包含部分数据。执行onprogress()方法
`4`	`DONE`	下载操作已完成。执行onload()方法