jquery中ajax常用的方法,详解如何实现前端jquery中的ajax方法，看这一篇就够了

首页 / 前端开发 / Javascript / 详解如何实现前端jquery中的ajax方法，看这一篇就够了

详解如何实现前端jquery中的ajax方法，看这一篇就够了

2020-4-13

952

0

前言

这篇文章主要聊一聊如何手写一个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