认识ajax同步(sync)与异步(async)区别的小例子

1.了解console.time()与console.timeEnd()

console.time()和console.timeEnd()可以开启一个计时器，可以计算中间代码的执行时间，传入一个字符串参数相当于它的名字。

  		console.time('abc');
        for (var i = 0; i < 100000000; i++) {}
        console.timeEnd('abc');

2.异步与同步

简单理解：
在很多人排队买彩票时，你排着队，然后能走开做其他事情就是异步。
在很多人排队买彩票时，你只能排队，不能走开去做其他事情就是同步。

3.异步与同步小案例

①异步案例：
注意： 01time.php是我本地服务端的一个数据接口

		var xhrAsync = new XMLHttpRequest();
        // open 方法的第三个参数是 async 可以传入一个布尔值，默认为 true异步，false则为同步
        xhrAsync.open('GET', '01time.php', true);
        console.time('async');
        xhrAsync.send();
        console.log(xhrAsync.responseText);
        console.timeEnd('async');

输出结果：

②同步案例：

  		var xhrSync = new XMLHttpRequest();
        xhrSync.open('GET', '01time.php', false);
        console.time('sync');
        xhrSync.send();
        console.log(xhrSync.responseText);
        console.timeEnd('sync');

输出结果：

4.小案例总结

• 同步该种模式已近过时了，控制台发出警告了
• 同步模式 ajax 操作会有楞等的情况(阻塞的情况)发生，也就是先执行完且接收到响应体才继续执行下面
• 同步与异步的ajax区别在于 send 方法会不会出现等待情况，异步不会等待，而同步会等待