图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
如图3，在事宜处理函数中我们写了两个方法ajaxSuccess和ajaxError，它们分别实行ajax参数工具传入的success和error这两个函数属性。我们知道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方法之前添加一个钩子！
图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的实现！
喜好我的文章就关注我吧，有问题可以揭橥评论，我们一起学习，共同发展！
