本文整理在,我的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=>{
//....
})
一张图搞懂Spring bean的完整生命周期
一张图搞懂Spring bean的生命周期,从Spring容器启动到容器销毁bean的全过程,包括下面一系列的流程,了解这些流程对我们想在其中任何一个环节怎么操作bean的生成及修饰是非常有帮助的. ...
硬核!八张图搞懂 Flink 端到端精准一次处理语义 Exactly-once(深入原理,建议收藏)
Flink 在 Flink 中需要端到端精准一次处理的位置有三个: Source 端:数据从上一阶段进入到 Flink 时,需要保证消息精准一次消费. Flink 内部端:这个我们已经了解,利用 Ch ...
一张图搞懂容器所有操作 - 每天5分钟玩转 Docker 容器技术(26)
前面我们已经讨论了容器的各种操作,对容器的生命周期有了大致的理解,下面这张状态机很好地总结了容器各种状态之间是如何转换的. 如果掌握了前面的知识,要看懂这张图应该不难.不过有两点还是需要补充一下: 可 ...
三张图搞懂JavaScript的原型对象与原型链
对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与__proto__混淆,二来它们之间的各种指向实在有些复杂,其实市面上已经有非常多的文章在尝试说清楚,有一张 ...
三张图搞懂JavaScript的原型对象与原型链 / js继承,各种继承的优缺点(原型链继承,组合继承,寄生组合继承)
摘自:https://www.cnblogs.com/shuiyi/p/5305435.html 对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与__pro ...
一张图搞懂 Javascript 中的原型链、prototype、__proto__的关系 转载加自己的总结
1. JavaScript内置对象 所谓的内置对象 指的是:JavaScript本身就自己有的对象 可以直接拿来就用.例如Array String 等等.JavaScript一共有12内置对象 ...
一张图搞懂javascript原型链
js高级里面原型链对于新手来说并不友好,总的来说就是 任何函数都有自己的原型对象(prototype),任何实例对象都__proto__指向构造函数的原型 先来个最简单的原型三角关系 var fn = ...
026、一张图搞懂docker(2019-01-21 周一)
参考https://www.cnblogs.com/CloudMan6/p/6961665.html
一张图搞懂Ubuntu安装时姓名、计算机名、用户名
安装Ubuntu时会要求填写如下图的信息: 感谢:苏守坤 注意:上面的博客讲述了各自的具体含义,本篇博客只是说明这些名称在系统安装后会出现的位置.
随机推荐
Linux 创建修改删除用户和组
200 ? "200px" : this.width)!important;} --> 介绍 在日常的维护过程中创建用户操作用的相对会多一些,但是在这个过程中涉及到的知识点就 ...
CodeForces 444C 分块
题目链接:http://codeforces.com/problemset/problem/444/C 题意:给定一个长度为n的序列a[].起初a[i]=i,然后还有一个色度的序列b[],起初b[i] ...
IOS开发-UIScrollView陷阱之----删除所有子view, 滚动条(indicator) 消失
使用UIScrollView经常会执行清空视图的操作,我们普遍的做法是: for (UIView *subview in self.scrollView.subviews) { [subview re ...
ios 存储学习笔记
一.主要路径: Library/Caches/此文件用于存储那些需要及可延迟或重创建的临时数据.且这些内容不会被IOS 系统备份,特别地,当设备磁盘空间不足且应用不在运行状态时,IOS 系统可能会移除 ...
查询制定行数的数据(2)对了,mysql不能用top关键字
采用嵌套查询的方式,倒序之后前10条 倒序之后前9条 采用嵌套查询的方式,倒序之后前10条 排正序之后从第一条开始弄十条数据 排正序之后从第一条开始弄九条数据 排正序之后从第十条开始弄十条数据 排正序 ...
VISUAL STUDIO 2005连接MYSQL数据库
// mysql.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include #include &l ...
Hadoop学习历程(一、编译)
近期对Hadoop很感兴趣,下面是在CentOS系统上进行编译的分享 系统情况如下: 1. CentOS 6.2 64位 2. hadoop-2.2.0 3. jdk 1.6.0_31 ...
FFMPEG在windows平台编译的详细过程,包括环境安装
下面开始: 由于FFMpeg是基于Linux开发的开源项目,源代码和Windows下最常见的Visual Studio提供的C/C++编译器不兼容,因此它不能使用MSVC++编译.要想使用FFMpeg ...
服务器 Disk full
General error: 1021 Disk full (/tmp/#sql_24a3_0.MAI); waiting for someone to free some space... (err ...
Chrome RenderText分析(1)
先从一些基础的类开始 1.Range // A Range contains two integer values that represent a numeric range, like the ...