详解如何实现前端jquery中的ajax方法,看这一篇就够了
前言
这篇文章主要聊一聊如何手写一个jquery的ajax方法,这是前端中的基础知识,也是一道非常经典的前端面试题!
一步步手写ajax
在web页面中与后端通信的顺序一般都是客户端向服务器发起请求,然后服务器再回复客户端,用于通信的工具就是ajax。如果你喜欢足球,你肯定知道荷甲联赛中也有一支豪门足球俱乐部叫阿贾克斯,名字一毛一样。ajax就像电话一样,将页面和服务器联系在一起,基本用法如下:

图1
从图1中我们可以看出$.ajax是一个函数,它的参数是一个对象,那么我们可以像如下这样定义:
var $ = {}; // 模拟jquery对象
$.ajax = function(options){
// 实现逻辑
}
接下来我们就开始写函数里面的逻辑。

图2
如图2,ajax的关键在于XMLHttpRequest对象,它提供了对http协议的安全访问接口,这里使用了它的两个方法和一个事件:
1)open方法的第一个参数是请求类型:get、post、head等,第二个参数是请求的接口地址,第三个参数表示ajax请求是异步(true)还是同步(false),如果是异步,在ajax发送完请求后js会继续执行,不会等待服务器响应,我们一般选择异步,提高页面的渲染效率;
2)send方法只有一个参数,表示向服务器发送的参数,一般是对象;
3)onreadystatechange是一个事件,它可以监听从请求开始到结束整个过程的状态,状态保存在xhr的readyState属性中。
readyState状态:
- 0代表未初始化,open方法还未执行;
- 1代表正在加载,open已被执行但send还未被执行;
- 2代表已经加载完毕,send已被执行,请求已被发送;
- 3代表正在等待服务器响应;
- 4代表响应已经完成。
从上面readyState状态我们可以看出,ajax只需要4的情况,其他状态其实都是失败!
另外,xhr的status属性代表服务器返回的状态码,根据我们的经验,状态码在400以上都是有问题的,要么是服务端问题,要么就是客户端问题!300到400之间好像都和重定向有关系,但是有一个除外——304,如果你了解浏览器缓存,你肯定知道它和协商缓存有关系,其实它代表请求成功!另外200以下的状态都需要请求者继续操作,也不符合要求!总结一下,可用的状态码就是200到300之间,加一个304!
好了,经过上面的分析,我们继续完善onreadystatechange事件的处理函数:

图3