原生js实现Ajax原理

相信很多小伙伴在面试的时候,大部分都逃不了被问原生js的问题吧,尤其是高频的高频,** 说一下实现原生Ajax的原理**
原生???哦买噶的!
原生js实现Ajax原理_第1张图片
在回答这个问题前,我们需要了解一下什么是ajax,通俗易懂的来说就是在不刷新页面的情况下,能获取到新的数据
ajax的工作原理是什么?废话不多说直接上图
原生js实现Ajax原理_第2张图片

接下来就是放大招的时刻
原生js实现Ajax原理_第3张图片
为了通俗易懂,我就不说文绉绉的话了,我呢就是把手写原生ajax,比作为我们日常在浏览器上访问一个网站,具体呢分为真么几部(这样做呢,对小白比较友好一点)

  1. 在这里插入图片描述也就是安装一个浏览器

  2. 在这里插入图片描述打开浏览器哦后我们需要输入网址

  3. 在这里插入图片描述输入完网址后,按下回车,开始请求

  4. 因为客户端永远不知道服务器端何时才能返回这个响应,所以在这里我们需要触发一个事件
    在这里插入图片描述

  5. readyState他里边有这么几个状态
    0:初始化,XMLHttpRequest对象还没有完成初始化
    1:载入,XMLHttpRequest对象开始发送请求
    2:载入完成,XMLHttpRequest对象的请求发送完成
    3:交互,XMLHttpRequest对象开始读取服务器的响应
    4:完成,XMLHttpRequest对象读取服务器响应结束

原生js实现Ajax原理_第4张图片

  1. 下面就是我用promise封装ajax
    原生js实现Ajax原理_第5张图片

你可能感兴趣的:(原生js实现Ajax原理)