代码编织梦想

    消息队列主线程循环机制保证了页面有条不紊地运行。
    异步回调是指回调函数在主函数之外执行,一般有两种方式:
    第一种是把异步函数做成一个任务,添加到信息队列尾部
    第二种是把异步函数添加到微任务队列中,这样就可以在当前任务的末尾处执行微任务了。

XMLHttpRequest 运作机制


 function GetWebData(URL){
    /**
     * 1:新建XMLHttpRequest请求对象
     */
    let xhr = new XMLHttpRequest()

    /**
     * 2:注册相关事件回调处理函数 
     */
    xhr.onreadystatechange = function () {
        switch(xhr.readyState){
          case 0: //请求未初始化
            console.log("请求未初始化")
            break;
          case 1://OPENED
            console.log("OPENED")
            break;
          case 2://HEADERS_RECEIVED
            console.log("HEADERS_RECEIVED")
            break;
          case 3://LOADING  
            console.log("LOADING")
            break;
          case 4://DONE
            if(this.status == 200||this.status == 304){
                console.log(this.responseText);
                }
            console.log("DONE")
            break;
        }
    }

    xhr.ontimeout = function(e) { console.log('ontimeout') }
    xhr.onerror = function(e) { console.log('onerror') }

    /**
     * 3:打开请求
     */
    xhr.open('Get', URL, true);//创建一个Get请求,采用异步


    /**
     * 4:配置参数
     */
    xhr.timeout = 3000 //设置xhr请求的超时时间
    xhr.responseType = "text" //设置响应返回的数据格式
    xhr.setRequestHeader("X_TEST","time.geekbang")

    /**
     * 5:发送请求
     */
    xhr.send();
}

第一步:创建 XMLHttpRequest 对象。

第二步:为 xhr 对象注册回调函数。

    因为网络请求比较耗时,所以要注册回调函数,这样后台任务执行完成之后就会通过调用回调函数来告诉其执行结果.XMLHttpRequest 的回调函数主要有下面几种:
    ontimeout,用来监控超时请求,如果后台请求超时了,该函数会被调用;
    onerror,用来监控出错信息,如果后台请求出错了,该函数会被调用;
    onreadystatechange,用来监控后台请求过程中的状态,比如可以监控到 HTTP 头加载完成的消息、HTTP 响应体消息以及数据加载完成的消息等。

第三步:配置基础的请求信息。

第四步:发起请求。

    一切准备就绪之后,就可以调用xhr.send来发起网络请求了。渲染进程会将请求发送给网络进程,然后网络进程负责资源的下载,等网络进程接收到数据之后,就会利用 IPC 来通知渲染进程;渲染进程接收到消息之后,会将 xhr 的回调函数封装成任务并添加到消息队列中,等主线程循环系统执行到该任务的时候,就会根据相关的状态来调用对应的回调函数。
    如果网络请求出错了,就会执行 xhr.onerror;如果超时了,就会执行 xhr.ontimeout;如果是正常的数据接收,就会执行 onreadystatechange 来反馈相应的状态。

    在跨域的时候,其实跨域的请求是发送出去了,服务器也接收到了并响应了,而是在返回的时候被浏览器“拦截在门外”。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接: https://blog.csdn.net/lovermeiy/article/details/111053499

前端工程师必备的实用网站大全:配色、插件、框架等七大类-爱代码爱编程

一、配色类网站: Color Hunt:http://colorhunt.co 这个网站给我们提供了很多的配色方案,我们直接使用就OK了。使用方法也很简单,鼠标移动到对应的颜色上,我们就可以看到颜色的十六进制码,复制这个颜色到工具里就可以使用了。 Fresh Backgroud Gradients:https://webgradients.com

egg项目开发前的一些步骤-爱代码爱编程

1.封装api返回格式扩展 当我们对前端的请求返回的格式的时候,经过一个统一的格式返回,会比较省时省力。我们在app的目录下创建extend的目录。然后书写我们的context.js,这样我们的ctx对象就会被我们再次的封装。 // app/extend/context.js module.exports = { // 成功提示 api

如何实现setTimeout-爱代码爱编程

    setTimeout就是一个定时器,用来指定某个函数在多少毫秒之后执行。它会返回一个整数,表示定时器的编号,同时你还可以通过该编号来取消这个定时器。     要执行一段异步任务,需要先将任务添加到消息队列中。不过通过定时器设置回调函数有点特别,它们需要在指定的时间间隔内被调用,但消息队列中的任务是按照顺序执行的,所以为了保证回调函数能在指定时间内执

前端与移动开发----JS高级----构造函数,原型,继承-爱代码爱编程

JS高级02 回顾 面向过程编程: 就是把代码一步步写出来逐行执行, 没有任何的复用和封装性 面向对象编程: 是对象在调用各种功能方法, 封装类进行复用 类(模板)/属性/方法: class 类名 { constructor (形参1, 形参2){ this.属性名 = 形参1; this.属性名 = 形参

React-blog 搭建属于自己的博客-爱代码爱编程

写在前面: 用烦了wordpress,hexo和其他各种各样的博客框架,是时候该从桎梏中跳出,写一个自己的博客了! 我的博客 www.panyunyi.cn 博客的github地址 https://github.com/panyunyi97/react-blog 欢迎 star & pr 在试图搭建一个完全属于自己且自主可控

1-5 SQL注入基础(一)-爱代码爱编程

文章目录 SQL注入原理与利用SQL注入是什么SQL注入危害SQL注入函数length()left()substr() & mid() & ord()if()regexp---正则表达式likeSQL注入分类基于注入点位置GET注入POST注入Cookie注入基于变量数据类型字符型注入数字型注入基于获取数据方式正常回显错误回显盲注S

如何实现setTimeout-爱代码爱编程

    setTimeout就是一个定时器,用来指定某个函数在多少毫秒之后执行。它会返回一个整数,表示定时器的编号,同时你还可以通过该编号来取消这个定时器。     要执行一段异步任务,需要先将任务添加到消息队列中。不过通过定时器设置回调函数有点特别,它们需要在指定的时间间隔内被调用,但消息队列中的任务是按照顺序执行的,所以为了保证回调函数能在指定时间内执

2013上半年,Google Chrome正式版最新版本,又增加什么小功能!-爱代码爱编程

目录 2013年1月23日 Google Chrome正式版最新版本为 V24.0.1312.56 ,新增内容:   2013年2月8日 Google Chrome正式版稳定版为 V24.0.1312.57,测试版Beta:25.0.1364.58 2013年02月22日 Chrome 浏览器 25.0.1364.97 2013年3月27日

Centos7安 装python3+Selenium+chrome+chromedriver-爱代码爱编程

查看当前python版本[root@iZwz99sau950q2nhb3pn0aZ ~]# python Python 2.7.5 (default, Aug 7 2019, 00:51:29) [GCC 4.8.5 20150623 (Red Hat 4.8.5-39)] on linux2 Type “help”, “copyright”, “cred

给浏览器升个级,5款必备浏览器插件推荐-爱代码爱编程

今天带来5款正经的浏览器必备插件吧,有了他们提升浏览器使用体验提高操作效率将不在话下! PS:这几款插件适应于基于Chromium内核的浏览器,如:Chrom、Edge、360极速、搜狗等。 目录 1.AdGuard 广告过滤 2.CrxMouse 鼠标手势 3.OneTab 标签页合并 4.SuperCopy 解除复制限制 5.搜图助手

2013年下半年,Google Chrome正式版最新版本,又增加了什么小功能!-爱代码爱编程

目录 2013年7月10日         Chrome 28新版特性: 2013年8月20日         Chrome 29正式版(Chrome 29.0.1547.57)发布: 2013年10月16日         Chrome 30正式版(30.0.1599.101)发布: 2013年12月5日          正式版(3

Chome和Edge通过组策略配置IE模式和总是允许Flash(官方方案)-爱代码爱编程

文章目录 前言一、准备二、配置1.安装浏览器2.导入政策模板3.配置组策略配置IE模式方法1:直接添加方法2:使用xml文件(推荐)配置Flash三、政策模板参考四、参考资料 前言 记录一下官方的解决方案。 一、准备 支持组策略的 Windows 版本(需要专业版及以上) 下载企业版Chrome(包含 LBS支持插件、Chrome 政策