一张图搞懂Ajax原理

一张图搞懂Ajax原理调用过xhr.send{ new promise =>{ let xhr = new XMLHttpRequest; if{ xhr.se

欢迎大家来到IT世界,在知识的湖畔探索吧!

原理

说起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原理

插一句

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();
 }
 }
 }
 });
}

欢迎大家来到IT世界,在知识的湖畔探索吧!

调用

欢迎大家来到IT世界,在知识的湖畔探索吧!ajax({
 url:'xxxx',
 method:'POST',
 async: false,
})
.then(data=>{
 //....
})

最后

以下是总结出来最全前端框架视频,包含: javascript/vue/react/angualrde/express/koa/webpack 等学习资料。

一张图搞懂Ajax原理

【领取方式】

关注头条 前端全栈架构丶第一时间获取最新前端资讯学习

手机用户可私信关键词 【前端】即可获取全栈工程师路线和学习资料!

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/36782.html

(0)

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

联系我们YX

mu99908888

在线咨询: 微信交谈

邮件:itzsgw@126.com

工作时间:时刻准备着!

关注微信