AJAX的同步异步编程

简介: 对于同步异步编程,我们一定要要好好理解,没理解前端开发中的同步异步编程思想,那会很难办的!

AJAX的同步异步编程

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

AJAX 异步编程

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

来对比如下两种情况

image.png

image.png

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

---控制台打印---
2
3
4

分析

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

image.png

AJAX 同步编程

image.png

---控制台---
4

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

image.png

---控制台---
没有打印

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


谢谢款待

小记整理于 2023 / 8 / 30

目录
相关文章
|
6月前
|
前端开发 JavaScript
AJAX的同步异步编程
AJAX的同步异步编程
49 0
|
前端开发 JavaScript
ajax方法执行同步的黄色警告:Synchronous XMLHttpRequest on the main thread is deprecated的解决方案
ajax方法执行同步的黄色警告:Synchronous XMLHttpRequest on the main thread is deprecated的解决方案
256 0
|
XML 前端开发 JavaScript
详细解析JavaScript的Ajax之同步和异步的区别
详细解析JavaScript的Ajax之同步异步的区别 博客整理到这里基本上JavaScript的初级知识就整理完了,现在我们来说一下看JavaScript的最后一个知识点——Ajax。 (Asynchronous Javascript And XML) 即异步 JavaScript 和 XML,一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。 1.同步和异步 首先我们先来分析一下JavaScript的中的同步和异步的区别。 同步就是调用某个内容时,调用方得等待这个调用返回结果才能继续往后执行。(期间不可以执行其他的命令)。如图:
详细解析JavaScript的Ajax之同步和异步的区别
|
前端开发 JavaScript API
Ajax 同步与异步
Ajax 同步与异步
170 0
Ajax 同步与异步
|
XML 前端开发 JavaScript
ajax简介(异步与同步)|学习笔记
快速学习ajax简介(异步与同步)
108 0
|
XML 前端开发 JavaScript
ajax简介(异步与同步)|学习笔记
快速学习ajax简介(异步与同步)
|
JSON 前端开发 数据格式
$.ajax同步/异步(async:false/true)解析
  $.ajax 同步/异步(async:false/true)   虽然说ajax用来执行异步请求的比较多,但有时还是存在需要同步执行的情况的。   比如:我需要通过ajax取执行请求以返回一个值,这个值在ajax后面是需要使用到的,这时就不能用异步请求了。这时候就需要使用到async这个属性了。
587 0
|
XML 前端开发 JavaScript
ajax简介(异步与同步)|学习笔记
快速学习ajax简介(异步与同步)
|
前端开发 数据格式 JSON
|
Web App开发 JavaScript 前端开发