AJAX中的同步与异步编程运行机制

AJAX（Asynchronous Javascript And XML）：异步的JS和XML

前言：Ajax 是一种创建交互式网页的开发技术，在无需重新加载整个网页的情况下，能够对网页进行“局部更新”。以前传统的网页开发，因为没有AJAX技术，如果需要更新内容，必须重载整个页面，那将造成很大资源开销，影响用户体验。现代的web开发，AJAX已经是每个前端开发工程师必须掌握的技能。而在AJAX的使用中，存在异步AJAX和同步AJAX两种使用方式，这篇文章就是比较两种使用方式的运行机制，帮助同学们更好的掌握AJAX这项技能。让我们开始吧~

一、异步AJAX

控制台结果：3 1 2

原因：因为ajax此时是异步编程，只有等主任务队列执行完console.log(3)，才会到等待任务队列中执行ajax任务。ajax任务一执行，ajax状态发生变化，此时才触发监听事件的方法执行：ajax状态从1变到2，控制台输出1；从3变到4，控制台输出2。

结果：3 1 2

原因：
send()标志着ajax任务的开始，但此时ajax是异步编程，ajax任务会被放到等待任务队列中去。
接下来是绑定事件的方法，绑定事件也是异步编程，绑定的方法也被放到了等待任务队列中。
主任务队列中的console.log(3)先执行，控制台先输出3，主任务队列执行完毕，线程空闲。
接着，ajax任务执行，状态变为2时，变为4时，分别触发了监听事件的方法执行，控制台输出1，2

二、同步AJAX

结果：2 3

原因：当ajax任务开始，由于是同步编程，主任务队列在状态没有变成4（任务结束）之前一直被这件事占用着，其他事情都做不了。虽然当服务器把响应头返回的时候，状态变为2，触发了事件onreadystatechange，但是由于主任务队列没有完成，被占着呢，绑定的方法也无法执行...所以只有状态为4的时候执行一次事件监听的方法，输出2。
ajax请求这件事完成了，接下来执行console.log(3)，控制台输出3。

结果：3

原因：绑事件监听方法之前，ajax同步编程已经完成，状态是4，接下来绑定方法，此时的状态是4，后续没有发生状态的改变，所以绑定的方法没有机会执行，无任何输出。
执行到最后console.log(3)，控制台输出3。
所以最终的结果是3。

 

首发地址：https://zhuanlan.zhihu.com/p/64454935