前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >AJAX的同步异步编程

AJAX的同步异步编程

作者头像
HelloWorldZ
发布2024-03-20 18:38:22
1190
发布2024-03-20 18:38:22
举报
文章被收录于专栏:前端开发前端开发

AJAX的同步异步编程

AJAX同步异步编程是针对于当主线程遇到 xhr.send() 方法时,是否将其放到任务队列中去,且其异步特点是:浏览器开了一个新的线程帮我们去服务器获取数据。 这也正是体现了AJAX的工作模式,其实大体上和事件循环机制是相同的,不同的是,到底是交给JS来做,还是交给浏览器来开一个新的线程来做,AJAX的功能工作模式下,请求数据方面就是交给了xhr.send()方法,而监听状态码的改变是交给了JS来做,所以在请求数据过程中引起的状态码的改变就是可以引起监听事件的触发,可以在异步模式下很好得体会到这么一点。

AJAX 异步编程

xhr.open() 方法中第三个参数设置为 true

来对比如下两种情况

发现控制台的打印结果是一致的

代码语言:javascript
复制
---控制台打印---
2
3
4

分析

其实这两种方式是没有区别的,当主线程遇到异步任务时,就会将其放到 Event Queue 等待事件队列中去,此时 xhr.open() 中的方法第三个参数为true,也即是AJAX异步模式,浏览器会为其开一个新的线程,去服务端获取数据,此时AJAX的状态也就在不断变化1 -> 22 -> 33 -> 4,进而监听者xhr.onreadyStatechange()每当监听到状态改变,都会拿到主栈中执行一次

AJAX 异步编程
AJAX 异步编程

AJAX 同步编程

代码语言:javascript
复制
---控制台---
4

主线程向下执行代码,首先会将 xhr.onreadyStateChange() 方法放到等待事件队列中去,然后继续向下执行,由于AJAX开启的是同步模式,因此AJAX任务就交给主线程去执行,只有当状态码为 4 时,任务才结束,才会开始执行其它的事情,此时也即是执行任务队列中的监听状态码改变事件,该事件目前所监听到的状态码改变是由 1 -> 4,因此就回到主栈中执行一次。因此使用AJAX同步编程,不能够在状态码为2的时候获取到响应头的信息,但是状态码为4的时候也是可以获取到头和主体信息。

代码语言:javascript
复制
---控制台---
没有打印

由于是AJAX同步模式,因此当执行 xhr.send() 方法后,只有当AJAX状态码为4时,主线程才会继续处理下面的代码,也就是在这个监听事件绑定之前AJAX的状态码就已经为4了,状态变化已经到头了,已经不会再变化了,所以此时再绑定这个监听状态码的事件是毫无意义的了,因为它监听不到变化了,所以也就没有打印结果。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-03-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • AJAX的同步异步编程
    • AJAX 异步编程
      • AJAX 同步编程
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档