持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情
系列介绍
经常会被面试官问到这个功能或者效果怎么实现，或者怎么实现xx功能/效果？
有些功能或者效果以前没有做过或者实现过，导致自己回答不出来，场面一度变得有些尴尬。
于是自己打算出一个怎么实现系列，来实现xx功能或者xx效果，以此来提升自己的实战效果和能力。
本系列是一个开放系列，可能自己能力有限，故我实现的效果或者代码不一定是最好的，欢迎大家参与交流讨论。
场景
面试官：有在项目里发送过请求吗？
我：有的
面试官：那你是怎么发送请求的？
我：引入axios库，用axios来发送请求
面试官：用axios来发送请求，那你有了解过怎么实现一个ajax请求吗？
（思考了一会）
我：我记得好像是利用xmlHttpRequest来做的
面试官：...
查阅资料
Ajax即“Asynchronous Javascript And XML”，是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
发送ajax请求，主要是利用xmlHttpRequest实例对象来完成。
接下来，我们看下怎么用xmlHttpRequest实例对象来发送ajax请求
实现
先创建一个index.html文件，在body里面添加一个script标签
1.创建一个xmlHttpRequest实例对象
let xhr = new XMLHttpRequest()
2.调用xmlHttpRequest实例对象的open方法
xhr.open('get','http://localhost:3000')
调用xmlHttpRequest实例对象的open方法， 传递两个参数
- 参数一：调用请求的方法，为get或者post
- 参数二：请求的url
这一步，主要是定义你发送请求的方法，是get还是post。同时指明你发送请求的地址。
3.设置ajax请求的回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState ==4) {
if(xhr.status ==200){
console.log('请求成功');
}else{
console.log('请求失败');
}
}
}
我们先了解一下ajax请求的几种状态。
xmlHttpRequest实例对象的readyState有4种状态：
- 1：请求已发送，调用了open()方法
- 2：请求发送完成状态，调用了send()方法
- 3：开始请求服务器响应
- 4：请求服务器响应结束
当xmlHttpRequest实例对象的readyState的值发生改变时，会触发readystatechange事件。所以我们可以监听readystatechange事件，当xmlHttpRequest实例对象的readyState状态值为4时，代表请求完成了，执行回调函数，在这里处理请求完成后，我们想要处理的逻辑。
4.调用xmlHttpRequest实例对象的send方法
xhr.send()
调用send方法，发送ajax请求。
如果发送的是post请求，那么post请求的参数，需要放在send方法里传递。在send方法里，传递一个对象即可。
完整代码
let xhr = new XMLHttpRequest()
xhr.open('get','http://localhost:3000')
xhr.onreadystatechange = function(){
if(xhr.readyState ==4) {
if(xhr.status ==200){
console.log('请求成功');
}else{
console.log('请求失败');
}
}
}
xhr.send()
小结
我们如果用原生js发送一个ajax请求，主要有以下几个步骤：
- 创建一个xmlHttpRequest实例对象
- 调用xmlHttpRequest实例对象的open方法
- 监听readystatechange事件
- 调用xmlHttpRequest的send方法，发送请求
最后，放上自己比较喜欢的一句诗句：
千淘万漉虽辛苦，吹尽狂沙始到金 - 唐 刘禹锡《浪淘沙》
