ajax的同步与异步

@拭目以待：首发于ajax的同步与异步

XMLHttpRequest对象支持开启同步或异步两种不同的请求:

var xhr = new XMLHttpRequest();
xhr.open(method, url, async, user, password):

async 类型为 Boolean 值, 设置 true 时代码该请求使用异步， 设置 false 时代码该请求使用同步。
一般情况下 async 都是配置为true(异步)， 且当未进行配置时会默认为true; 因为我们平时的业务场景所需要的正是异步请求。

同步与异步的区别

1. 同步请求在请求完成前，后续的程序将处于暂停执行状态。而异步请求，除过请求事件函数中的程序在特定条件下执行外，请求外的程序会紧接着执行。

2. 部分属性在同步请求中不可用或受限制，如异步请求可以通过配置属性 timeout 来进行超时设置， 而同步请求则不能配置，如果在同步请求中配置timeout 会抛异常(禁止在同步请求中使用属性 timeout的异常信息)。

这就意味着同步请求会阻断之后所有的代码执行，而这并不是大多项目所期望的场景。

通过 onreadystatechange 事件所捕获的 readyState属性值在同步请求中只会存在1(已调用open方法)与4(请求完成)。

async 参数如何使用

// async = true:
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  console.log('readyState=>', xhr.readyState);
};
xhr.open('GET', 'http://www.lovejavascript.com/learnLinkManager/getLearnLinkList', true);
xhr.send(null);
console.log('代码执行到这里了');

// async = false:
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  console.log('readyState=>', xhr.readyState);
};
xhr.open('GET', 'http://www.lovejavascript.com/learnLinkManager/getLearnLinkList', false);
xhr.send(null);
console.log('代码执行到这里了');

需要注意：是否为异步执行的效果是从xhr.send(null)之后开始区分的。

如果想了解更多的XMLHttpRequest参数，请查阅XMLHttpRequest参数详解

@拭目以待

个人站点：www.lovejavascript.com
表格管理插件:gridmanager.lovejavascript.com && github地址
QQ交流群 (452781895)：How To Make Love
微信公众账号：loveJavascript

《野生前端工程师》专辑中所有文章均为@拭目以待 原创，转载请注明出处。