ajax原理简述,一张图搞懂Ajax原理

本文整理在，我的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 ...