2014-05-19

JavaScript 載入資源時的 Sync 和 Async 作法

1. 同步執行 JavaScript (Sync)
在現有的 <script> 之後加入另一個 <script> 標籤 (嚴格講起來, 不算真的 sync)
var s = document.createElement("script");
s.type = 'text/javascript';
s.src = "js-url.js";
document.write(s.outerHTML);


2. 非同步執行 JavaScript (Async)
在 <head> 裡加入 <script> 標籤
var s = document.createElement("script");
s.type = 'text/javascript';
s.src = "js-url.js";
document.getElementsByTagName("head")[0].appendChild(s);


3. 使用 XMLHttpRequest 同步取得 JSON (Sync)
var jsonFile = 'test.json';
var req = new XMLHttpRequest();
req.open("GET", jsonFile, false); // "false": synchronous
req.send();
console.log(req.responseText);


4. 使用 jQuery 同步取得 JSON (Sync)
$.ajax({
    url: appInfoUrl,
    async: false,  // synchronous
    datatype: "json",
    success: function(res){
        if(typeof(res)==='string') {
            res = $.parseJSON( res );
        }
    }
});


5. 使用 XMLHttpRequest 在載入文字檔資源前, 先判斷檔案是否存在
var jsonFile = 'test.json';
var req = new XMLHttpRequest();
req.open("GET", jsonFile, false); // "false": synchronous
req.send();
if(req.status === 404){
 console.log('檔案不存在');
} else {
 
}


FB 留言