本文整理在,我的github上。欢迎Star。

原理

说起ajax,就不得不说他背后的核心对象XMLHttpRequest,而说到XMLHttpRequest我觉得,从它的readyState状态说起是最好的切入点。

个人觉得,只要弄清楚了readyState的这几个状态,其实ajax的原理也就算弄清楚了。为了更方便您理解,笔者特意画了一张状态图。

您只需要看懂这张图ajax原理,您就算通关了;并且很难忘记。

  • 首先let xhr = new XMLHttpRequest();,新建一个XMLHttpRequest对象。此时xhr对象的readyState=0,表示请求未初始化

  • 您需要调用xhr.open(method,url,async),告诉xhr请求的方式,URL,同步or异步,让其初始化。如果执行完了这句,xhr.readyState=1,表示连接已经建立好了

  • 但是,如果您想发出请求,您就需要调用xhr.send()方法,如果是POST请求,您需要设置send()的参数,send(data)。调用过xhr.send()后,xhr.readyState就变成了2,请求已接收状态,或者说我们已经发出了请求。

  • 后面的几个状态,就不需要我们通过代码去改变他了。我们的请求会通过网络,到达指定服务器,服务器响应后,再通过网络返回给我们。这个状态,我们也无法通过代码去改变。但是我们可以通过监听函数onreadystatechange去获取请求传输的进度。

  • 当我们受到第一个字节开始,xhr.readyState=3

  • 在接收完全部响应数据后,请求完成,此时xhr.readyState=4

插一句

ajax原理,就是0、1、2、3、4。,记住了么?

简单封装一下

function ajax(option){
new promise((resolve, reject) =>{
let xhr = new XMLHttpRequest();
xhr.open(option.method,option.url,option.async);
if(option.method === 'POST'){
xhr.send(option.data);
}else{
xhr.send();
}
xhr.onreadystatechange=function()
{
if (xhr.readyState === 4)
{
if(xhr.status === 200){
resolve(this.responseText);
}else{
reject();
}
}
}
});
}

调用

ajax({
url:'xxxx',
method:'POST',
async: false,
})
.then(data=>{
//....
})

一张图搞懂Ajax原理的更多相关文章

  1. 一张图搞懂Spring bean的完整生命周期

    一张图搞懂Spring bean的生命周期,从Spring容器启动到容器销毁bean的全过程,包括下面一系列的流程,了解这些流程对我们想在其中任何一个环节怎么操作bean的生成及修饰是非常有帮助的. ...

  2. 硬核!八张图搞懂 Flink 端到端精准一次处理语义 Exactly-once(深入原理,建议收藏)

    Flink 在 Flink 中需要端到端精准一次处理的位置有三个: Source 端:数据从上一阶段进入到 Flink 时,需要保证消息精准一次消费. Flink 内部端:这个我们已经了解,利用 Ch ...

  3. 一张图搞懂容器所有操作 - 每天5分钟玩转 Docker 容器技术(26)

    前面我们已经讨论了容器的各种操作,对容器的生命周期有了大致的理解,下面这张状态机很好地总结了容器各种状态之间是如何转换的. 如果掌握了前面的知识,要看懂这张图应该不难.不过有两点还是需要补充一下: 可 ...

  4. 三张图搞懂JavaScript的原型对象与原型链

    对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与__proto__混淆,二来它们之间的各种指向实在有些复杂,其实市面上已经有非常多的文章在尝试说清楚,有一张 ...

  5. 三张图搞懂JavaScript的原型对象与原型链 / js继承,各种继承的优缺点(原型链继承,组合继承,寄生组合继承)

    摘自:https://www.cnblogs.com/shuiyi/p/5305435.html 对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与__pro ...

  6. 一张图搞懂 Javascript 中的原型链、prototype、__proto__的关系 转载加自己的总结

    1. JavaScript内置对象 所谓的内置对象 指的是:JavaScript本身就自己有的对象 可以直接拿来就用.例如Array String 等等.JavaScript一共有12内置对象    ...

  7. 一张图搞懂javascript原型链

    js高级里面原型链对于新手来说并不友好,总的来说就是 任何函数都有自己的原型对象(prototype),任何实例对象都__proto__指向构造函数的原型 先来个最简单的原型三角关系 var fn = ...

  8. 几张图搞懂 NodeJS 的流

    假设我们现在要盖一座房子,我们买了一些砖块,厂家正在送货.现在我们有两个选择,一是等所有砖块都到了以后再开始动工:二是到一批砖块就开始动工,砖块到多少我们就用多少. 这两种方式哪种效率更高呢?显然是第 ...

  9. 026、一张图搞懂docker(2019-01-21 周一)

    参考https://www.cnblogs.com/CloudMan6/p/6961665.html    

随机推荐

  1. 通过WSL使用rsync同步本文件

    1.安装WLS 主要参考Windows10上使用Linux子系统(WSL)这篇文章进行安装,不要通过lxrun /install /y去安装,这种方法安装貌似没有wsl命令. 先把win 10 版本升 ...

  2. c++第三次作业:类的友元

    C++第三次作业:类的友元 1.友元的关系提供了不同类或对象的成员函数之间.类的成员函数与一般函数之间进行数据共享的机制.通俗的说友元关系就是一个类主动声明其他函数是他的朋友,可以使其获得特殊访问权利 ...

  3. windows 环境下基于Python 的GDAL 安装

    最近由于需要利用pytho处理地理空间数据,但是python本身并没有访问和处理地理空间数据的包,只能借助于GDAL(Geospatial Data Abstraction Library)来进行访问 ...

  4. Sereja and Brackets CodeForces - 380C (树状数组+离线)

    Sereja and Brackets 题目链接: CodeForces - 380C Sereja has a bracket sequence s1, s2, ..., *s**n, or, in ...

  5. 使用curl出现,curl: /usr/local/lib/libssl.so.1.1: version `OPENSSL_1_1_1' not found (required by /usr/lib/x86_64-linux-gnu/libcurl.so.4)

    主要原因是curl找不到openssl的路径,所以只要将openssl的路径添加到相应的变量中就可以了. 参考连接https://blog.csdn.net/RookieWutongshu/artic ...

  6. CentOS5、CentOS6启动流程

    这三篇文章讲的都很好,可以看一下 http://os.51cto.com/art/201407/446819.htm http://www.mamicode.com/info-detail-11656 ...

  7. JavaScript16进制颜色值和rgb的转换

    //十六进制颜色值域RGB格式颜色值之间的相互转换//十六进制颜色值的正则表达式 var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/; /*RGB颜色转换为1 ...

  8. redis主从配置及其java的调用(转)

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/gsying1474/article/de ...

  9. 【原】GitHub使用教程

    GitHub使用教程 1 注册 GitHub 账户 要想使用github第一步当然是注册github账号了(www.github.com). 2 安装客户端 msysgit github是服务端,要想 ...

  10. CodeForces 792C - Divide by Three [ 分类讨论 ]

    删除最少的数位和前缀0,使得剩下的数能被3整除 等价于各数位数字之和能被3整除. 当前数位和可能是 0, 1, 2(mod 3) 0: 直接处理 1: 删除一个a[i]%3 == 1 或者 两个a[i ...