Ajax的同步和异步

一、基础知识

JS是单线程的，所以有时我们需要使用异步编程

JS中四种异步编程：

定时器、事件绑定、回调函数、Ajax中可以使用异步编程

一、Ajax同步和异步的概念

Ajax的同步：当Ajax任务开始的时候(xhr.send)，一直需要到readyState===4的时候任务才结束，此时才可以处理其它的事情

Ajax异步：当Ajax任务开始的时候(xhr.send)，不需要等到readyState===4，仍可以继续做其它任务，下面通过以下几个例子了解Ajax的同步和异步

var xhr = new XMLHttpRequest;
xhr.open("get","data.txt",true);
xhr.onreadystatechange = function(){
    /*
        答案：输出2,3,4
        解析：当new一个XMLHttpRequest时，xhr的readyState已经变成了0；当执行xhr.open时readyState变成了1；现在是异步编程，所以在readyState没有变成4之前都可以执行onreadystatechange方法，之后当readyState变为2、3、4时都会触发onreadystatechange方法，所以输出2,3,4
        
    */
    console.log(xhr.readyState)
};
xhr.send(null);

var xhr = new XMLHttpRequest;
xhr.onreadystatechange = function(){
    /*
        答案：输出1,2,3,4
        
    */
    console.log(xhr.readyState)
};
xhr.open("get","data.txt",true);
xhr.send(null);

var xhr = new XMLHttpRequest;
xhr.open("get","data.txt",false);
xhr.onreadystatechange = function(){
    /*
        答案：输出4
        
    */
    console.log(xhr.readyState)
};
xhr.send(null);

var xhr = new XMLHttpRequest;
xhr.open("get","data.txt",false);
xhr.send(null);
xhr.onreadystatechange = function(){
    /*
        答案：没有任何输出
        
    */
    console.log(xhr.readyState)
};

xhr.timeout = 1000;//可以设置超时时间