使用script標籤載入遠端資料

script 元素能夠動態載入遠端 JavaScript 指令碼檔案。JavaScript 指令碼檔案不僅僅可以被執行，還可以附加資料。在伺服器端使用 JavaScript 檔案附加資料之後，當在用戶端使用 script 元素載入這些遠端指令碼時，附加在 JavaScript 檔案中的資訊也一同被載入到用戶端，從而實現資料非同步互動的目的。下面範例演示如何動態生成 script 元素，並通過 script 元素實現遠端資料載入。

操作步驟

1) 定義一個非同步請求的封裝函數。

//建立<script>標籤，引數url表示要請求的伺服器端檔案路徑
function request (url) {
    if (! document.script) {  //如果在document物件中不存在script屬性
        document.script = document.createElement("script");  //建立script元素
        document.script.setAttribute("type", "text/javascript");  //設定指令碼型別屬性
        document.script.setAttribute("src", url);  //設定JavaScript檔案的路徑
        document.body.appendChild(document.script);  //把建立的script元素新增到頁面中
    } else {  //如果已經存在script元素
        document.script.setAttribute("src", url);  //則直接設定src屬性
    }
}

2) 完善用戶端提交頁面的結構和指令碼程式碼。上面這個請求函數是整個 script 非同步互動的核心。下面就可以來設計用戶端提交頁面。

<script>
    function callback (info) {  //用戶端回撥函數
        console.log(info);
    }
    function request (url) {  //script非同步請求函數
        console.log(url);
    }
    window.onload = function () {  //頁面初始化處理常式
        var b = document.getElementsByTagName("input")[0];
        b.onclick = function () {  //為頁面按鈕系結非同步請求函數
            request ("server.js");
        } 
    }
</script>
<input name="submit" type="button" id="submit" value="向伺服器發出請求" />

3) 在伺服器端的響應檔案（server.js）中輸入下面的程式碼。

callback("這裡是伺服器端資料資訊");

4) 當預覽用戶端提交頁面時，不會立即發生非同步互動的動作，而是當單擊按鈕時才會觸發非同步請求和響應行為，這正是非同步互動所要的設計效果。