ajax的同步與異步

@拭目以待:首發(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ū)別

  1. 同步請(qǐng)求在請(qǐng)求完成前,后續(xù)的程序?qū)⑻幱跁和?zhí)行狀態(tài)。而異步請(qǐng)求,除過(guò)請(qǐng)求事件函數(shù)中的程序在特定條件下執(zhí)行外,請(qǐng)求外的程序會(huì)緊接著執(zhí)行。

  2. 部分屬性在同步請(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

《野生前端工程師》專輯中所有文章均為@拭目以待 原創(chuàng),轉(zhuǎn)載請(qǐng)注明出處。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1.實(shí)現(xiàn)頁(yè)面來(lái)表達(dá)信息2.xMLhttprequest和web服務(wù)器進(jìn)行數(shù)據(jù)交換1.實(shí)例化一個(gè)對(duì)象new xmlH...
    周行知閱讀 270評(píng)論 0 0
  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,534評(píng)論 19 139
  • AJAX 原生js操作ajax 1.創(chuàng)建XMLHttpRequest對(duì)象 var xhr = new XMLHtt...
    碧玉含香閱讀 3,557評(píng)論 0 7
  • 本文詳細(xì)介紹了 XMLHttpRequest 相關(guān)知識(shí),涉及內(nèi)容: AJAX、XMLHTTP、XMLHttpReq...
    semlinker閱讀 13,992評(píng)論 2 18
  • 寫(xiě)在前面 本篇主要內(nèi)容是結(jié)合“XMLHttpRequest Level 1”規(guī)范和w3school網(wǎng)站中針對(duì)XML...
    JSON_NULL閱讀 1,632評(píng)論 3 9

友情鏈接更多精彩內(nèi)容