AJAX的同步异步编程
AJAX同步异步编程是针对于当主线程遇到 xhr.send()
方法时,是否将其放到任务队列中去,且其异步特点是:浏览器开了一个新的线程帮我们去服务器获取数据。这也正是体现了AJAX的工作模式,其实大体上和事件循环机制是相同的,不同的是,到底是交给JS来做,还是交给浏览器来开一个新的线程来做,AJAX的功能工作模式下,请求数据方面就是交给了xhr.send()
方法,而监听状态码的改变是交给了JS来做,所以在请求数据过程中引起的状态码的改变就是可以引起监听事件的触发,可以在异步模式下很好得体会到这么一点。
AJAX 异步编程
xhr.open() 方法中第三个参数设置为 true
来对比如下两种情况
发现控制台的打印结果是一致的
---控制台打印---
2
3
4
分析
其实这两种方式是没有区别的,当主线程遇到异步任务时,就会将其放到 Event Queue 等待事件队列中去,此时 xhr.open()
中的方法第三个参数为true,也即是AJAX异步模式,浏览器会为其开一个新的线程,去服务端获取数据,此时AJAX的状态也就在不断变化1 -> 2
,2 -> 3
,3 -> 4
,进而监听者xhr.onreadyStatechange()
每当监听到状态改变,都会拿到主栈中执行一次
AJAX 同步编程
---控制台---
4
主线程向下执行代码,首先会将 xhr.onreadyStateChange()
方法放到等待事件队列中去,然后继续向下执行,由于AJAX开启的是同步模式,因此AJAX任务就交给主线程去执行,只有当状态码为 4
时,任务才结束,才会开始执行其它的事情,此时也即是执行任务队列中的监听状态码改变事件,该事件目前所监听到的状态码改变是由 1 -> 4
,因此就回到主栈中执行一次。因此使用AJAX同步编程,不能够在状态码为2的时候获取到响应头的信息,但是状态码为4的时候也是可以获取到头和主体信息。
---控制台---
没有打印
由于是AJAX同步模式,因此当执行 xhr.send()
方法后,只有当AJAX状态码为4时,主线程才会继续处理下面的代码,也就是在这个监听事件绑定之前AJAX的状态码就已经为4
了,状态变化已经到头了,已经不会再变化了,所以此时再绑定这个监听状态码的事件是毫无意义的了,因为它监听不到变化了,所以也就没有打印结果。
谢谢款待
小记整理于 2023
/ 8
/ 30