javascript - jquery jsonp原理：js標籤動態生成位置問題

Question

jquery jsonp的原理就是藉助script標籤中src屬性來解決前後端資料請求遇到的跨域問題.有一點不明白的是jquery把動態生成的script標籤追加到了head標籤中，也就是文件的頭部；一般我們的回呼函數在body#中，函數先宣告後使用，沒有聲明就直接呼叫為什麼也能取得到後台傳過來的資料呢？

下面是我做的一個測試：

//同源策略下有两个文件:a.html和b.js.
//a.html中的内容为:


//<script type="text/javascript" src="b.js"></script>

function test(val){
    console.log(val)
}

//<script type="text/javascript" src="b.js"></script>


//b.js的内容为：
test(10)

這串程式碼放在已經宣告的test函數下面就會印出數字10，如果放在test函數上面就報錯了

ReferenceError: test is not defined

對比jquery的實作方式我不是太理解為什麼動態產生的js放在已經宣告的函數之前呼叫也會執行？

Answer 1

//同源策略下有两个文件:a.html和b.js.
//a.html中的内容为:


//<script type="text/javascript" src="b.js"></script>

function test(val){
    console.log(val)
}

//<script type="text/javascript" src="b.js"></script>


//b.js的内容为：
test(10)

如果是直接鏈入的src的話，瀏覽器解析是從上往下解析的，就會先取回b.js裡面的值，a.js的函數還未載入進入頁面，此時是沒有test( )這個函數的，所以會報錯

但是發ajax請求是等頁面完成後再去請求的，即等是先聲明好了一個回調函數再去創建一個script去請求，所以此時的script放的位置在哪裡並不會影響最後的結果。

Answer 2

因為你忽略了非同步的問題，從執行順序來說，當從伺服器發回的script標籤載入完成之後，你本地的callback函數肯定是已經定義完成的，因此能夠的調到對應的方法。
簡單來說就是：
jsonp=定義本地回呼函數=>載入script標籤=>運行所載入script標籤內容。

Answer 3

jsonp 說白了就是個約定:
'我們倆隔太遠了, 夠不著, 你東西要怎麼給我?'
'要不我往你那扔吧, 你能接住麼?'
'可以,我有個籃子(callback), 在你1點鐘方向(callbackName), 你往那扔'
至於籃子存不存在, 位置擺的對不對, 並不影響你們的約定

Answer 4

jsonp引入的js載入位置是在執行jsonp取得js的語句的位置。至於放的位置只是一個形式罷了。