前言本文主要讲如何手写一个jqueryAjax方法。这是前端中的基础知识，也是非常经典的前端面试题！一步一步，在网页中手写ajax与后台通信的顺序一般是客户端向服务器端发起请求，然后服务器端回复客户端。用于通信的工具是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表示loading，open已经执行但是send还没有执行；2表示已经加载，send已经执行，请求已经发送；3表示等待服务器响应；4表示响应完成。从上面的readyState状态我们可以看出ajax只需要4个，其他状态其实都是失败的！另外xhr的status属性表示服务器返回的状态码。根据我们的经验，状态码在400以上就是有问题，要么是服务端问题，要么是客户端问题！300到400之间的范围似乎与重定向有关，但有一个例外——304。如果你了解浏览器缓存，你一定知道它与协商缓存有关。其实就是请求成功了！另外200以下的status需要请求者继续操作，不符合要求！综上所述，可用的状态码在200到300之间，再加上一个304！好了，经过上面的分析，我们继续完善onreadystatechange事件的处理函数：图3如图3所示，在事件处理函数中，我们写了两个方法ajaxSuccess和ajaxError，分别执行传入的success和error通过ajax参数对象这两个函数属性。我们知道ajax对象参数中还有一个属性叫做complete，它是一个无论请求成功与否都会执行的方法，所以在ajaxSuccess和ajaxError中都需要调用一次。xhr.responseText代表服务器返回的数据，xhr.statusText代表状态码对应的状态信息。接下来，我们需要设置请求标头，这可以通过xhr.setRequestHeader完成，如下所示：图4在图4中，我们对两个特殊请求标头（Accept和Content-type）进行了默认设置。当我们使用post类型向服务器发送带有参数的请求时。此时需要设置content-type为application/x-www-form-urlencoded，其他请求头可以通过ajax对象参数的headers属性传入。注意setRequestHeader方法需要在open方法之后调用！在某些场景下，我们需要在发送请求之前进行一些逻辑判断。如果不满足条件，我们需要阻止发送请求。为了满足需求，我们需要在ajax调用open方法前加一个hook！图5在图5中，我们通过beforeSend函数的执行结果来判断是否需要取消请求！其实这里还剩下一步要写，就是超时逻辑。比如在网络不好的情况下，我们不能让页面一直处于loading状态。我们需要设置一个超时时间。如果超时超过这个时间，就说明ajax请求失败了！制定超时需求，我们能想到的最简单的就是使用定时器setTimeout，现在我们补上！图6如图6所示，在超时的情况下，我们将onreadystatechange事件处理函数设置为空函数并放弃请求，然后执行error函数。另外，在正常的onreadystatechange事件处理逻辑中，我们需要及时清除这个定时器！写到这里，一个简单的ajax就开发好了，现在直接使用demo是没有问题的！面试常见问题1.手写一个ajax？如果你看到这个，我想应该没有问题吧！2、如果请求被重定向，ajax会如何处理？当然是进入了error函数！3、请求超时，ajax怎么处理？当然也进入了error函数！综上所述，本文手写的ajax可以在移动端直接使用，无需考虑PC端的兼容性！根据我的经验，只要会手写ajax，面试遇到相关问题就不会被难倒。这样的题其实是子题！另外，在开发PC端页面时，我们使用jquery，而在开发移动端时，我们应该使用zepto.js！这篇文章写到这里，下一篇继续写JSONP的实现！
