AJAX详解
AJAX
Asynchronous Javascript AndXML = 异步 JavaScript 和 XML
通过在后台与服务器进行少量数据交换,Ajax可以使用网页实现异步更新。意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新（无刷新技术）。传统的网页（不使用Ajax）如果需要更新内容，必须重载整个网页页面。
零、回顾一下发请求有哪几种方式
| 请求类型 | 缺点 | |
|---|---|---|
| form | all | 会刷新当前或新开的页面 |
| a | GET | 会刷新当前或新开的页面 |
| img | GET | 只能以图片的形式展示 |
| link | GET | 只能以CSS、favicon的形式展示 |
| script | GET | 只能以脚本的形式运行 |
（注：通过设置属性src的请求方式都可以跨域）
有什么请求方式可以实现以下条件
- 各种请求方式都支持
- 不一定要以特定方式展示或运行
同步和异步请求的区别
- 同步方式发送请求：发送一个请求，需要等待响应返回，然后才能够发送下一个请求，如果该请求没有响应，不能发送下一个请求，客户端会一直处于等待过程中。
- 异步方式发送请求：发送一个请求，不需要等待响应返回，随时可以再发送下一个请求，即不需要等待。
一、AJAX原理
- AJAX引擎会在不刷新浏览器地址栏的情况下，发送异步请求：
- 使用JavaScript获取浏览器内置的AJAX引擎（XMLHttpRequest对象）
- 使用js确定请求路径和请求参数
- AJAX引擎对象根据请求路径和请求参数进行发送请求，服务器接收到Ajax引擎的请求进行处理：
- 服务器获得请求参数数据
- 服务器处理请求业务（调用业务层代码）
- 服务器响应数据给Ajax引擎
- Ajax引擎获得服务器响应的数据，通过执行JavaScript的回调函数将数据更新到浏览器页面的具体位置：
- 通过设置给Ajax引擎的回调函数获取服务器响应的数据
- 使用JavaScript在指定的位置，显示响应的数据，从而局部修改页面的数据，达到局部刷新的目的。
二、AJAX实现
1）原生JS实现（面试考的居多）
- 创建Ajax引擎对象
- 为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
- 绑定提交地址
- 发送请求
- 监听里面处理响应数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX</title>
</head>
<body>
<button>click</button>
<script>
//1.创建Ajax引擎对象
let request = new XMLHttpRequest()
//2.为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
request.onreadystatechange = function () {
//5.监听里面处理响应数据
//这个回调函数什么调用呢？是ajax引擎对象与服务器通信状态码改变的时候调用
/*ajax引擎对象与服务器通信状态码xmlHttp.readystate，范围0~4
0 请求未初始化
1 服务器连接已建立
2 请求已接收
3 请求处理中
4 请求已完成，且响应已就绪
* 这个回调函数一共被调用4次，但只有状态码4的时候才代表服务器响应完成数据完成。
* ajax引擎通信转态码为4和http通信转态码为200
*/
if (request.readyState === 4 && request.status === 200) {
console.log(request.responseText)
}
}
//3.绑定提交地址
/**
* xmlHttp.open(method,url)
* method,请求方法，get或post请求
* url：请求路径
*/
request.open('GET', '/xxx')
//4.发送请求
request.send()
</script>
</body>
</html>
2）Ajax引擎连接状态readyState值0~4变化过程
-
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
值 状态 描述 0 UNSET（未打开） open()方法还未被调用 1 OPENED（未发送） send()方法还未被调用 2 HEADERS_RECEIVED（已获取响应头） send()方法已经被调用，响应头和响应状态已经返回 3 LOADING（争在下载响应体） 响应体下载中；requestText中已获取部分数据 4 DONE（请求完成） 整个请求过程已经完毕
- 这里状态值4只能说明接收到了服务器的响应服务器处理ajax请求结束，但是不能代表正确的获取了服务器的响应，需要配合http状态码200两个条件就可以说明正确的获取了服务器响应。只有这两个条件满足，request.responseText才可以获取到正确的响应数据。
3）从后端接收到的数据的处理
- 从后端接收到的数据格式一般都是JSON的，（简单来讲就是一对大括号里面放一些键值对，其中键和值都是用双引号包裹的）
- 用
window.JSON.parse(string)（string是接收到的数据）来将其转化为JS对象
三、如何解决同源策略带来的问题
CORS——跨域资源共享标准（ cross-origin sharing standard ）
- 跨域资源共享（ CORS）机制允许 Web 应用服务器进行跨域访问控制，从而使跨域数据传输得以安全进行。现代浏览器支持在 API 容器中（例如
XMLHttpRequest或 Fetch ）使用 CORS，以降低跨域 HTTP 请求所带来的风险。
四、Ajax中与HTTP请求 响应对应的部分
1）Ajax可以设置HTTP请求中任意一部分
- 请求行：open('method', 'url')
- 请求头：request.setRequestHeader('': "")
- 请求体：request.send('自己要设置的请求头')
2）Ajax可以获取HTTP响应中任意一部分
-
状态码：request.status，状态说明（OK）：request.statusText
-
响应头：request.getResponseHeader('要获取的键名')，或者request.getAllResponseHeader()
-
响应内容：request.responseText
