XMLHttpRequest的基本使用

短命女 2024-04-01 18:40 63阅读 0赞

> 提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

#### XMLHttpRequest ####

*  一、XMLHttpRequest是什么？
 *  二、使用xhr发送GET请求
 *  三、xhr对象的readyState属性
 *  四、使用xhr发起带参数的GET请求
 *  五、查询字符串
 *  六、URL编码与解码
 *  七、使用xhr发起POST请求

--------------------

## 一、XMLHttpRequest是什么？ ##

> XMLHttpRequest 对象用于在后台与服务器交换数据。

*  在不重新加载页面的情况下更新网页
 *  在页面已加载后从服务器请求数据
 *  在页面已加载后从服务器接收数据
 *  在后台向服务器发送数据

`所有现代的浏览器都支持 XMLHttpRequest 对象`  
![在这里插入图片描述][856d4be3f5b0472795089a12fc39a5af.png]

## 二、使用xhr发送GET请求 ##

![在这里插入图片描述][e5d73c4fcc68408eac1c2cbbb0dd5672.png]

## 三、xhr对象的readyState属性 ##

> XMLHttpRequest.readyState 属性返回一个 XMLHttpRequest 代理当前所处的状态。一个 XHR 代理总是处于下列状态中的一个：

![在这里插入图片描述][2f521b8322b1429cad60ca95c46e1e3d.png]

## 四、使用xhr发起带参数的GET请求 ##

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

## 五、查询字符串 ##

`什么是查询字符串：`

> 定义：查询字符串（URL 参数）是指在 URL 的末尾加上用于向服务器发送信息的字符串（变量）。 格式：将英文的 ? 放在URL 的末尾，然后再加上 参数＝值 ，想加上多个参数的话，使用 & 符号进行分隔。以这个形式，可以将想要发送给服务器的数据添加到 URL 中。

![在这里插入图片描述][5cb512ef664149a7b34baa0eaf76ffcf.png]  
`GET请求携带参数的本质:`

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

![在这里插入图片描述][cf6a7243a5a545098df77e420c3df78a.png]

## 六、URL编码与解码 ##

> URL 地址中，只允许出现英文相关的字母、标点符号、数字，因此，在 URL 地址中不允许出现中文字符。 如果 URL 中需要包含中文这样的字符，则必须对中文字符进行编码（转义）。 URL编码的原则：使用安全的字符（没有特殊用途或者特殊意义的可打印字符）去表示那些不安全的字符。 URL编码原则的通俗理解：使用英文字符去表示非英文字符。  
> ![在这里插入图片描述][9125931ae3ae46758c919f130c220f09.png]

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

*  encodeURI() 编码的函数
 *  decodeURI() 解码的函数  
    ![在这里插入图片描述][2856468ab0d4414c91aa2c4fc7092ecf.png]

## 七、使用xhr发起POST请求 ##

![在这里插入图片描述][dc07ce6af86541f2ab3c6b4b55b10237.png]

[856d4be3f5b0472795089a12fc39a5af.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/ac00c2156a674f6196273c6ae5cd2055.png
[e5d73c4fcc68408eac1c2cbbb0dd5672.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/aa26f93916fa4df89cb4168457d666ac.png
[2f521b8322b1429cad60ca95c46e1e3d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/772afc12dee342bcb8c1d995e27aa909.png
[5cb512ef664149a7b34baa0eaf76ffcf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/3f34af90e17c43b087284cd2bfc1d836.png
[cf6a7243a5a545098df77e420c3df78a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/908b5d309f984d4c8f9ca44e23789cfd.png
[9125931ae3ae46758c919f130c220f09.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/e4b764b1a7864d46ade34e02f7845ab6.png
[2856468ab0d4414c91aa2c4fc7092ecf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/cc0bc7dc0bd94088a945a20d9850ef88.png
[dc07ce6af86541f2ab3c6b4b55b10237.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/11c87ef4d08944d0af1935a82ce7d709.png