js之AJAX - 技术栈

ajax 是一种创建交互式网页应用的网页开发技术。其中最核心的依赖是浏览器提供的XMLHttpRequest 对象，是这个对象使得浏览器可以发出 HTTP 请求与接收 HTTP 响应。实现了在页面不刷新的情况下和服务器进行交互

|----------------------------------|----------------------------------------------------------------------|
| new XMLHttpRequest() | 生成一个 XMLHttpRequest 对象 |
| open('请求类型' , 'URL' , '请求方式') | 1. 请求类型：get、post 2. 请求地址：服务器（文件）位置 3. 请求方式：true 为异步，false 为同步 |
| send() | 发送请求 |
| onreadystatechange | 该方法可以定义响应执行函数，当 readyState 属性发生变化时会自动调用该方法。 |
| readyState | 交互流程，有 5 个阶段 1. 请求初始化 2. 服务器链接已建立 3. 请求已接收 4. 正在处理请求 5. 请求已完成且响应已就绪 |
| status | HTTP 响应状态码 200 ：OK（请求成功） 403 ：Forbidden（禁止） 404 ：Page not found（未找到） |
| responseText | 响应文本（返回的数据） |
| setRequestHeader('头部名称' , '头部值') | 请求头，向请求添加 HTTP 头部 |

ajax使用方法

javascript 复制代码

<script>
			let xhr = new XMLHttpRequest();
			xhr.open('get', 'js/index.json', true);
			xhr.send();
			xhr.onreadystatechange = function() {
				if (xhr.readyState == 4 && xhr.status == 200) {
					let text = xhr.responseText;
					console.log(text);
					let data = JSON.parse(text);
					console.log(data);
				}
			};
		</script>

post请求方式

javascript 复制代码

<script>
	let obj = {
		phone_number: "15836028325",
		password: "111111"
	}
	// 1. 创建对象
	let xhr = new XMLHttpRequest();
	// 2. 创建请求
	xhr.open("POST", "https://zx.nh2r.top/api/admin/login", true);
	// 3. 设置 Content-Type 属性（固定写法）
	xhr.setRequestHeader('Content-Type', 'application/json');
	// 4. 发送请求，同时将数据以查询字符串的形式，提交给服务器
	xhr.send(JSON.stringify(obj));
	// 5. 监听 onreadystatechange 事件，接收响应数据
	xhr.onreadystatechange = function() {
		if (xhr.readyState === 4 && xhr.status === 200){
			console.log(JSON.parse(xhr.response));
}
	}
</script>

get 与 post 的区别：

get 是将参数包含在 URL 中明文传输，不安全。而 post 是通过 request body 传递参数，对于用户来说是不可见的，所有更安全。
get 传输数据量较小，因为 URL 有长度限制，post 传输的数据量较大，一般被默认为不受限制。
对于参数的数据类型，get 只接受 ASCII 字符，而 post 没有限制。
get 请求时只会产生一个 TCP 数据包，get 比 post 更快。
get 请求参数会被完整保留在浏览器历史记录里，而 post 中的参数不会被保留。

同步与异步的区别：

同步：在进程中任务未结束时，需等待结束才能执行下一个任务。

例如：在高速上，只有一条车道，如果前方发生车祸，那么后方的车需要等待前方处理好才能继续通行。

异步：在进程中任务未结束但在等待的过程中可以先去执行下一个任务。

例如：还是在高速上，有两条车道，如果前方发生车祸，那么后方的车可以从另一条车道继续通行。