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

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

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

一、异步AJAX

<script>
    let xhr=new XMLHttpRequest();
    xhr.open('GET', 'json/news.json',true);//异步
    xhr.onreadystatechange=()=>{//监听的是ajax状态“改变事件”：设置监听之前有一状态，当后续的状态和设置之前的状态不相同，才会触发这个事件
        if (xhr.readyState===2 ){
            console.log(1);
        }
        if (xhr.readyState===4 ){
            console.log(2);
        }
    };
    xhr.send();//发送ajax请求：这个执行才证明ajax任务开始
    console.log(3);
</script>

控制台结果：3 1 2

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

<script>
    let xhr=new XMLHttpRequest();
    xhr.open('GET', 'json/news.json',true);//异步
    
    xhr.send();//发送ajax请求：这个执行才证明ajax任务开始
    
    //send()执行，有返回结果前，ajax的状态还是1（1是open的状态），下面的事件监听不会被触发
    
    xhr.onreadystatechange=()=>{//监听的是ajax状态“改变事件”：设置监听之前有一状态，当后续的状态和设置之前的状态不相同，才会触发这个事件
        if (xhr.readyState===2 ){
            console.log(1);
        }
        if (xhr.readyState===4 ){
            console.log(2);
        }
    };
    console.log(3);
</script>

结果：3 1 2

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

二、同步AJAX

<script>
    let xhr=new XMLHttpRequest();
    xhr.open('GET', 'json/news.json',false);//同步
    xhr.onreadystatechange=()=>{//监听前的状态是1
        if (xhr.readyState===2 ){
            console.log(1);
        }
        if (xhr.readyState===4 ){
            console.log(2);
        }
    };
    xhr.send();//任务开始（同步：只要当前ajax请求这件事没有完成，什么都不能做）
    console.log(3);
</script>

结果：2 3

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

<script>
    let xhr=new XMLHttpRequest();
    xhr.open('GET', 'json/news.json',false);//同步
    
    xhr.send();//任务开始（同步：只要当前ajax请求这件事没有完成（状态为4），什么都不能做）
    
    xhr.onreadystatechange=()=>{//监听前的状态是4
        if (xhr.readyState===2 ){
            console.log(1);
        }
        if (xhr.readyState===4 ){
            console.log(2);
        }
    };
    console.log(3);
</script>

结果：3

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