一张图搞懂Ajax原理

作者: 88b61f4ab233 | 来源:发表于2019-05-19 15:05 被阅读67次

原理

说起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=>{
    //....
})

最后

为了帮助大家让学习变得轻松、高效,给大家免费分享一大批资料,帮助大家在成为全栈工程师,乃至架构师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习交流圈:866109386.欢迎大家进群交流讨论,学习交流,共同进步。

当真正开始学习的时候难免不知道从哪入手,导致效率低下影响继续学习的信心。

但最重要的是不知道哪些技术需要重点掌握,学习时频繁踩坑,最终浪费大量时间,所以有有效资源还是很有必要的。

最后祝福所有遇到瓶疾且不知道怎么办的前端程序员们,祝福大家在往后的工作与面试中一切顺利。

相关文章

  • 一张图搞懂Ajax原理

    原理 说起ajax,就不得不说他背后的核心对象XMLHttpRequest,而说到XMLHttpRequest我觉...

  • 一张图搞懂所有电机控制原理图设计,触类旁通,零基础!

    一张图搞懂所有电机控制原理图设计,触类旁通,零基础! 一、一张图搞懂所有电机控制原理图设计-自动控制线路的构成 二...

  • 跨域

    Ajax从入门到精通:7.Ajax跨域1 渥瑞达科技 浏览器的同源策略: 【图】3分钟搞懂顶级域名|二级域名|子域...

  • JavaScript面试题(一)

    一、ajax原理是什么?ajax如何实现跨域?原理及过程? Q1:Ajax的工作原理:通过XmlHttpReque...

  • 一张图搞懂JVM

  • 搞懂原生AJAX

    1. 什么是AJAX?它又能做什么? 先来看看这个名称的构成:Asynchronous JavaScript an...

  • js之AJAX复习

    异步交互和同步交互 什么是Ajax? Ajax的工作原理。 Ajax包含的技术: Ajax的缺陷: Ajax的核心...

  • 深入理解ajax

    深入理解Ajax ajax的工作原理: ajax的工作原理相当于在用户和服务器之间加了一个中间层(ajax引擎),...

  • 2018-12-03 ajax原理及实现方式

    Ajax工作原理及实例 1、关于ajax的名字 ajax 的全称是Asynchronous JavaScript ...

  • ajax

    替换 ajax的原理 XMLHttpRequest 是ajax的核心 GET POST ajax状态码 HTTP状...

网友评论

    本文标题:一张图搞懂Ajax原理

    本文链接:https://www.haomeiwen.com/subject/hocqzqtx.html