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放在已經宣告的函數之前呼叫也會執行?
如果是直接鏈入的src的話,瀏覽器解析是從上往下解析的,就會先取回b.js裡面的值,a.js的函數還未載入進入頁面,此時是沒有test( )這個函數的,所以會報錯
但是發ajax請求是等頁面完成後再去請求的,即等是先聲明好了一個回調函數再去創建一個script去請求,所以此時的script放的位置在哪裡並不會影響最後的結果。
因為你忽略了非同步的問題,從執行順序來說,當從伺服器發回的script標籤載入完成之後,你本地的callback函數肯定是已經定義完成的,因此能夠的調到對應的方法。
簡單來說就是:
jsonp=定義本地回呼函數=>載入script標籤=>運行所載入script標籤內容。
jsonp 說白了就是個約定:
'我們倆隔太遠了, 夠不著, 你東西要怎麼給我?'
'要不我往你那扔吧, 你能接住麼?'
'可以,我有個籃子(callback), 在你1點鐘方向(callbackName), 你往那扔'
至於籃子存不存在, 位置擺的對不對, 並不影響你們的約定
jsonp引入的js載入位置是在執行jsonp取得js的語句的位置。至於放的位置只是一個形式罷了。