ajax post请求怎么传参_高级前端：详解手写原生Ajax的实现

点击上方“ 前端印象 ”，选择“ 设为星标 ” 第一时间关注技术干货！

对于Ajax，肯定很多小伙伴都听过甚至用过了，那么没听过的也不用着急，本文会对Ajax进行讲解，其次，一定还有一些人只用过JQuery封装好了的Ajax却对原生的Ajax并不了解，那么也不用着急，本文从最基本的Ajax开始讲起，然后最后会尽可能得模仿JQuery对其进行封装，让我刚才提到的两类人能对Ajax有进一步的了解。

一、什么是Ajax

Ajax(Asynchronous JavaScript And XML)是2005年新出现的技术，它的出现是为了解决这样一个场景：整个页面中，只有一小部分的数据需要进行更新，按照传统的前后端交互，我们需要向服务器请求该网页的所有数据，然后再在客户端重新渲染，这无疑是非常低效的操作。因此，Ajax就可以做到只向服务器请求我们想要的那一小部分数据，而不用请求全部数据，进而在刷新整个页面的前提下更新那部分的数据。

举个例子，我们去饭店吃饭，然后点了一桌子菜，后来发现其中有一道菜太咸了，因此我们只需要让服务员端回去给厨师重新做这一道菜再拿回来就行了。

在这个例子中的人、物对比Ajax的关系如下表：

吃饭事件	数据更新
我们	客户端
菜品	页面所有的数据
服务员	ajax对象
厨师	服务器

当我们发现有一道菜太咸了，不需要让厨师把所有的菜重新做一遍，只要让服务员拿这一道菜回去给厨师重做这一操作就相当于让ajax对象向后端请求那一小部分数据再拿回来更新页面而无需刷新整个页面。

二、Ajax的优缺点

了解了Ajax的作用和定义，我们再来看看它的优缺点

(1)优点

1. 浏览器默认支持(一般浏览器都是支持JavaScript的)
2. 提高用户体验(不需要刷新整个页面，而只需要局部刷新)
3. 提高页面的性能(只需要请求部分数据，所以数据量就明显下降了)

(2)缺点

1. 破坏了浏览器的前进和后退功能(Ajax不会改变网页URL，因此不会在浏览器记录前后页面)
2. 对搜索引擎的支持较弱(搜索引擎无法监测到JS引起的数据变化)

三、Ajax的使用

Ajax的基本流程：创建XHR对象 => 发送数据 => 接收数据

(1)状态码

既然Ajax涉及到前后端的数据交互，那么我们就先来简单的看一下几种类型的状态码，如下表：

状态码	含义
100 ~ 199	连接继续
200 ~ 299	各种成功的请求
300 ~ 399	重定向
400 ~ 499	客户端错误
500 ~ 599	服务端错误

(2)xhr的基本使用

在使用xhr之前，我们要创建一个xhr的实例对象

let xhr = new XMLHttpRequest()

然后再调用xhr对象上的 open() 方法，表示创建一个请求。

open() 方法接收三个参数：

• 第一个参数： 请求的类型(例如get 、post)
• 第二个参数： 请求的URL
• 第三个参数： 是否异步发送请求(默认为true)

// 创建了一个Ajax请求
xhr.open('get', 'example.php', 'true')

光调用了 open() 方法还不够，它只是创建了一个请求，但还没有发送请求，因此我们还要调用xhr对象上的另一个方法，即 send() 方法，表示将请求发送给目标URL

send() 方法接收一个参数：

• 第一个参数： 作为请求主体发送的数据(例如post请求携带的数据)

// 我们上面创建的是get请求，因此send()方法无需传参
xhr.send()

请求发送出去后，客户端需要接收服务器响应回来的数据，xhr对象中有一些属性，它们存储着服务端返回来的一些数据信息，如下表所示

属性名	含义
responseText<