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

你可能感兴趣的:(AJAX中的同步与异步编程运行机制)