Jsonp函式的封裝

2021-10-03 12:01:57 字數 1125 閱讀 2962

jsonp 全稱是 json with padding 意味 json 填充,其作用可以模擬 ajax 請求(但不同於ajax)。

對jsonp 函式的具體封裝如下:

1. 在jsonp函式中建立script標籤

2. 對傳遞物件中的引數物件進行引數拼接

3. 對呼叫的函式進行作用域提公升,並且隨機產生乙個名稱避免函式的覆蓋

4. 向頁面中新增script標籤

5. 當script標籤產生作用後,刪除該標籤(避免產生**冗餘)

jsonp(,

success:

function

(data)

})

具體的jsonp封裝**如下:

// 封裝乙個jsonp函式

function

jsonp

(obj)

/** * 使用math.random()隨機生成乙個數,並對其進行相應的處理後將其新增到callback引數後,避免每次產生的函式一致;

* 使用window將函式的作用域進行提公升,否則在呼叫jsonp函式的時候函式將無法執行。(為window設定乙個任意屬性賦值為該函式);

* 當script標籤執行的時候將相當於呼叫了window某屬性的函式

*/var funcname =

'func'

+ math.

random()

.tostring()

.replace

('.',''

);window[funcname]

= obj.success;

// 將伺服器位址設定在src中

script.src = obj.url +

'?callback='

+ funcname + param;

// 在頁面中新增script標籤

document.body.

(script)

;// 監聽script標籤的onload事件,當script標籤執行後將其刪除,避免**結構的冗餘

script.

onload

=function()

}

封裝JSONP 函式,方便請求傳送

封裝jsonp的 和封裝ajax的 非常的相似!可以參照食用偶!點選我傳送請求!點選我傳送請求!點選我傳送請求!點選我傳送請求!點選我傳送請求!伺服器端 的優化 接收客戶端傳遞過來的函式名稱 const fnname req.query.callback 將函式名稱對應的函式呼叫 返回給客戶端!co...

jsonp 封裝思想

1.先建立乙個script標籤 生成乙個隨機的唯一的函式名 以cbname作為名字將callback存到window中去 刪除掉當前script標籤 刪除掉window中的cbname對應的函式 複製 2.做引數處理 3.將引數和url位址進行拼合 將cbname通知給後台,讓後台指定的呼叫我們自己...

原生封裝Jsonp

我們平常做的頁面大部分的資料其實都是從後台獲取過來的,最常用的方法就是ajax,但是ajax不能跨域取資料,這時我們就要用到jsonp,那麼什麼是jsonp?jsonp原理 就是利用標籤沒有跨域的 漏洞 來達到與第三方通訊的目的,當需要通訊時,本站指令碼建立乙個元素,位址指向第三方api位址,並提供...