jQuery中jsonp函式實現

2022-01-16 10:46:54 字數 693 閱讀 7510

由於瀏覽器中的同源策略,不同的網域名稱,不同的協議,甚至不同的埠都無法請求資料。因此出現了瀏覽器跨域請求資料問題。

jsonp是解決跨域問題的乙個非常流行的方法。

jsonp(json with padding),其實就是被包裹在函式呼叫中的json。

callback();

通過script標籤進行跨域操作,載入的請求js檔案中的內容會執行我們在url中指定的函式,並且,傳入的引數,就是我們請求的資料。

1789

10

最終顯示為:

我們成功獲取不同網域名稱下的資源。並通過自定義的myfun函式將獲得的資料列印出來了。

在使用jsonp過程中,可能因為請求資料的api要求不同,我們需要構建自己的jsonp方法,下面我們簡單介紹一種類似jquery中jsonp的實現。

首先,我們建立乙個以jquery開頭的隨機的函式名,並將其掛載到window物件中。在這個函式中,我們呼叫我們傳入的**函式處理資料。

然後,我們開始處理傳入的url,此時,我們規定傳入的url不帶有callback查詢字串,方便我們根據不同的api要求傳入對應的引數。

最後,我們建立script標籤,並指定其src為前面處理好的url,將其新增到文件中,即可獲取資料。

1
成功請求到資料:

script標籤請求到的內容:

jquery 中jsonp的實現原理

在同源策略下,在某個伺服器下的頁面是無法獲取到該伺服器以外的資料的,即一般的 ajax 是不能進行跨域請求的。但 img iframe script 等標籤是個例外,這些標籤可以通過 src屬性請求到其他伺服器上的資料。利用 script 標籤的開放策略,我們可以實現跨域請求資料,當然這需要伺服器端...

jquery之jsonp相關知識

這裡講的不錯,可以參考 鏈結 我自己的理解 伺服器為了保證資料的安全,同時也為了保證不被攻擊,凡是來伺服器請求的url,網域名稱必須和伺服器一致,否則就是跨域請求 為了解決跨域問題,就出現了jsonp 它用的是技術是script標籤,因為這個貨允許跨域,具體跨域參考網上的cdn 傳遞的資料格式為js...

jQuery中delegate 方法用法例項教程

此方法為匹配元素的子元素新增乙個或多個事件,並規定當這些事件發生時執行的函式。語法結構 如下 selector delegate childofselector,type,data,function 引數列表 引數描述 childofselector 定義要附加事件處理程式的乙個或多個子元素。typ...