原生JS中的Ajax

所谓Ajax，就是在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式。而我们常说的原生JS中的Ajax就是围绕XMLHttpRequest对象进行发送请求。

1.XMLHttpRequest的基本概念

1.1 什么XMLHttpRequest

XMLHttpRequest（简称 xhr）是浏览器提供的 Javascript 对象，通过它，可以请求服务器上的数据资源。

1.2 资源的请求方式

客户端请求服务器时，请求的方式有很多种，最常见的两种请求方式分别为 get 和 post 请求。

① get 请求通常用于获取服务端资源（向服务器要资源）

例如：根据 URL 地址，从服务器获取 HTML 文件、css 文件、js文件、图片文件、数据资源等② post 请求通常用于向服务器提交数据（往服务器发送资源）

例如：登录时向服务器提交的登录信息、注册时向服务器提交的注册信息、添加用户时向服务器提交的用户信息等各种数据提交操作

2. 使用XMLHttpRequest发起请求

2.1 使用xhr发起GET请求

（1）步骤：

① 创建 ajax对象 ( xhr 对象 )；
② 创建请求 ( 调用 xhr.open() 函数 )；
③ 发送请求 ( 调用 xhr.send() 函数 )；
④ 监听 xhr.onreadystatechange 事件 ( 监听状态，接收响应 )。

（2）代码体验

<script>// 1. 创建ajax对象（异步对象）let xhr = new XMLHttpRequest();// 2. 创建请求// xhr.open('请求方法','url地址','是否采用异步处理去访问接口true/false')xhr.open("GET", "https://www.bingjs.com:8001/Subject/GetAll");// 3. 发送请求xhr.send();// 4. 监听状态，接收响应xhr.onreadystatechange = function() {// 4.1 监听 xhr 对象的请求状态 readyState ；与服务器响应的状态 statusif (xhr.readyState === 4&& xhr.status === 200) {// 4.2 使用xhr.response 获取服务器返回的数据console.log(xhr.response);}};
</script>
注意：

① xhr.open("请求方法","请求的url")

(1) 常用请求方式: GET查询、 POST添加、 PUT修改、 DELETE删除，使用大写格式；

(2) 请求的url：直接使用后端给的接口即可；

② get请求发送请求直接使用：xhr.send() ；

③ onreadyStateChange事件表示当xhr.readyState的值变化时，就会触发该事件

（1）xhr.readyState 表示Ajax状态码（请求状态码）：即Ajax请求的过程状态，是Ajax对象返回的，它有5个值0,1,2,3,4 ;

(2) xhr.status 表示Http状态码（响应状态码）：即请求的处理结果，是服务器端返回的，常见返回值比如：

200 请求成功

404 请求资源不存在

500 服务器错误

(3) xhr.response 表示服务端返回的数据信息

2.2 了解xhr对象的readyState属性

XMLHttpRequest 对象的 readyState 属性，用来表示当前 Ajax 请求所处的状态。每个 Ajax 请求必然处于以下状态中的一个：

2.3 使用xhr发起带参数的GET请求

使用 xhr 对象发起带参数的 GET 请求时，只需在调用 xhr.open 期间，为 URL 地址指定参数即可，如下：

// ...省略不必要的代码
xhr.open('GET', 'https://www.bingjs.com:8001/Subject/GetAll?subjectId=1&subjectName=大数据')
// ...省略不必要的代码

这种在 URL 地址后面拼接的参数，叫做查询字符串。

2.4 查询字符串

（1）定义：查询字符串（URL 参数）是指在 URL 的末尾加上用于向服务器发送信息的字符串（变量）。

（2）格式：将英文的 ? 放在URL 的末尾，然后再加上 参数＝值 ，想加上多个参数的话，使用 & 符号进行分隔。以这个形式，可以将想要发送给服务器的数据添加到 URL 中。

2.5 GET请求携带参数的本质

无论直接使用 xhr 对象，还是使用 $.ajax()，又或者使用 $.get()，发起 GET 请求，当需要携带参数的时候，本质上，都是直接将参数以查询字符串的形式，追加到 URL 地址的后面，发送到服务器的。

2.6 URL编码与解码

（1）什么是URL编码

URL 地址中，只允许出现英文相关的字母、标点符号、数字，因此，在 URL 地址中不允许出现中文字符。如果 URL 中需要包含中文这样的字符，则必须对中文字符进行编码（转义）。

URL编码的原则：使用安全的字符（没有特殊用途或者特殊意义的可打印字符）去表示那些不安全的字符。

URL编码原则的通俗理解：使用英文字符去表示非英文字符。

https://www.bingjs.com:8001/Subject/GetAll?subjectId=1&subjectName=大数据
// 经过 URL 编码之后，URL地址变成了如下格式：
https://www.bingjs.com:8001/Subject/GetAll?subjectId=1&subjectName=%E5%A4%A7%E6%95%B0%E6%8D%AE

（2）如何对URL进行编码与解码

浏览器提供了 URL 编码与解码的 API，分别是：

① encodeURI() 编码的函数；
② decodeURI() 解码的函数；

encodeURI('大数据')

// 输出字符串 %E5%A4%A7%E6%95%B0%E6%8D%AE

decodeURI('%E5%89%8D%E7%AB%AF')

// 输出字符串前端

注意：由于浏览器会自动对 URL 地址进行编码操作，因此，大多数情况下，程序员不需要关心 URL 地址的编码与解码操作。

2.7 使用xhr发起POST请求

（1）步骤：

① 创建 ajax对象 ( xhr 对象 )；
② 创建请求 ( 调用 xhr.open() 函数 )；
③ 设置 Content-Type 属性（固定写法）；
④ 发送请求 ( 调用 xhr.send() 函数 )，同时指定要发送的数据；
⑤ 监听 xhr.onreadystatechange 事件 ( 监听状态，接收响应 )。

（2）代码体验

<script>// 1. 创建对象let xhr = new XMLHttpRequest(); // 2. 创建请求xhr.open("POST", "https://www.bingjs.com:8001/Subject/Add"); // 3. 设置 Content-Type 属性（固定写法）xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')// 4. 发送请求，同时将数据以查询字符串的形式，提交给服务器xhr.send('subjectName=UI设计&classHour=22&gradeId=S1'); // 5. 监听 onreadystatechange 事件，接收响应数据xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200)console.log(xhr.response);}}
</script>
注意：如果使用POST请求，请一定要告诉后端你发送的是什么格式的数据，即设置Content-Type属性，也称之为请求头，常见如下：

（1）URL格式请求头

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

（2）json格式请求头

xhr.setRequestHeader("Content-Type", "application/json");