練習封裝jsonp方法

2021-10-02 08:12:27 字數 1100 閱讀 7355

練習封裝jsonp方法

點我傳送資料1

<

/button>

點我傳送資料2

<

/button>

//=> js**

let button1 = document.

queryselectorall

('button')[

0];let button2 = document.

queryselectorall

('button')[

1];function

jsonp

(options)=$

`;} console.

log(params)

;// 隨機名字(防止window方法名覆蓋)

var fnname =

'myjsonp'

+math.

random()

.tostring()

.replace

('.',''

);// 它不是乙個全域性函式,要把它變成全域性函式

// 掛載到window中

window[fnname]

= options.success;

// 為script標籤新增src屬性

script.src = options.url +

`?callback=$$

`;// script標籤追加到頁面中

document.body.

(script)

;// 為script標籤onload事件

script.

onload

=function()

} button1.

onclick

=function()

, success:

function

(data)})

}// 兩個按鈕的掛載到window的方法不會衝突

button2.

onclick

=function()

})}

jsonp 封裝思想

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

原生封裝Jsonp

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

Jsonp函式的封裝

jsonp 全稱是 json with padding 意味 json 填充,其作用可以模擬 ajax 請求 但不同於ajax 對jsonp 函式的具體封裝如下 1.在jsonp函式中建立script標籤 2.對傳遞物件中的引數物件進行引數拼接 3.對呼叫的函式進行作用域提公升,並且隨機產生乙個名稱...