javascript - jquery jsonp原理:js標籤動態生成位置問題
迷茫
迷茫 2017-05-19 10:33:18
0
4
875

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放在已經宣告的函數之前呼叫也會執行?

迷茫
迷茫

业精于勤,荒于嬉;行成于思,毁于随。

全部回覆(4)
左手右手慢动作
//同源策略下有两个文件: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放的位置在哪裡並不會影響最後的結果。

世界只因有你

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

Peter_Zhu

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

曾经蜡笔没有小新

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

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板