@拭目以待:首發(fā)于ajax的同步與異步
XMLHttpRequest對(duì)象支持開(kāi)啟同步或異步兩種不同的請(qǐng)求:
var xhr = new XMLHttpRequest();
xhr.open(method, url, async, user, password):
async 類型為 Boolean 值, 設(shè)置 true 時(shí)代碼該請(qǐng)求使用異步, 設(shè)置 false 時(shí)代碼該請(qǐng)求使用同步。
一般情況下 async 都是配置為true(異步), 且當(dāng)未進(jìn)行配置時(shí)會(huì)默認(rèn)為true; 因?yàn)槲覀兤綍r(shí)的業(yè)務(wù)場(chǎng)景所需要的正是異步請(qǐng)求。
同步與異步的區(qū)別
同步請(qǐng)求在請(qǐng)求完成前,后續(xù)的程序?qū)⑻幱跁和?zhí)行狀態(tài)。而異步請(qǐng)求,除過(guò)請(qǐng)求事件函數(shù)中的程序在特定條件下執(zhí)行外,請(qǐng)求外的程序會(huì)緊接著執(zhí)行。
部分屬性在同步請(qǐng)求中不可用或受限制,如異步請(qǐng)求可以通過(guò)配置屬性 timeout 來(lái)進(jìn)行超時(shí)設(shè)置, 而同步請(qǐng)求則不能配置,如果在同步請(qǐng)求中配置timeout 會(huì)拋異常(禁止在同步請(qǐng)求中使用屬性 timeout的異常信息)。
這就意味著同步請(qǐng)求會(huì)阻斷之后所有的代碼執(zhí)行,而這并不是大多項(xiàng)目所期望的場(chǎng)景。
通過(guò) onreadystatechange 事件所捕獲的 readyState屬性值在同步請(qǐng)求中只會(huì)存在1(已調(diào)用open方法)與4(請(qǐng)求完成)。
async 參數(shù)如何使用
// 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('代碼執(zhí)行到這里了');
// 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('代碼執(zhí)行到這里了');
需要注意:是否為異步執(zhí)行的效果是從xhr.send(null)之后開(kāi)始區(qū)分的。
如果想了解更多的XMLHttpRequest參數(shù),請(qǐng)查閱XMLHttpRequest參數(shù)詳解
@拭目以待
個(gè)人站點(diǎn):www.lovejavascript.com
表格管理插件:gridmanager.lovejavascript.com && github地址
QQ交流群 (452781895):How To Make Love
微信公眾賬號(hào):loveJavascript