jquery 中jsonp的實現原理

2022-07-08 20:36:08 字數 891 閱讀 4571

在同源策略下,在某個伺服器下的頁面是無法獲取到該伺服器以外的資料的,即一般的

ajax

是不能進行跨域請求的。但

img、

iframe

、script

等標籤是個例外,這些標籤可以通過

src屬性請求到其他伺服器上的資料。利用

script

標籤的開放策略,我們可以實現跨域請求資料,當然這需要伺服器端的配合。

jquery

中ajax

的核心是通過

獲取非本頁內容,而

jsonp

的核心則是動態新增

然後後端就會執行

backfunc(

傳遞引數

),把資料通過實參的形式傳送出去。

使用jsonp

模式來請求資料的整個流程:客戶端傳送乙個請求,規定乙個可執行的函式名(這裡就是

jquery

做了封裝的處理,自動幫你生成**函式並把資料取出來供

success

屬性方法來呼叫

,而不是傳遞的乙個**控制代碼),伺服器端接受了這個

backfunc

函式名,然後把資料通過實參的形式傳送出去

(在jquery

原始碼中,

jsonp

的實現方式是動態新增

標籤來呼叫伺服器提供的

js指令碼。

jquery

會在window

物件中載入乙個全域性的函式,當

**插入時函式執行,執行完畢後就

會被移除。同時

jquery

還對非跨域的請求進行了優化,如果這個請求是在同乙個網域名稱下那麼他就會像正常的

ajax

請求一樣工作。)

jQuery中jsonp函式實現

由於瀏覽器中的同源策略,不同的網域名稱,不同的協議,甚至不同的埠都無法請求資料。因此出現了瀏覽器跨域請求資料問題。jsonp是解決跨域問題的乙個非常流行的方法。jsonp json with padding 其實就是被包裹在函式呼叫中的json。callback 通過script標籤進行跨域操作,載...

不使用JQuery實現Jsonp呼叫

function jsonp request url,data,success,timeout catch ex thehead null var init function if url.indexof 0 elseif typeof data object data null var timer...

模擬jsonp的實現

function prescript s if s.crossdomain function prejsonp s,originalsettings,jqxhr return responsecontainer 0 修改處理機制 s.datatypes 0 json 建立乙個全域性函式 overwr...