A. JSONP原理

1.利用script元素的屬性scr引入文件不受同源策略的影響，來(lái)作為ajax的傳輸機(jī)制。 2.HTTP請(qǐng)求所得到的響應(yīng)數(shù)據(jù)是經(jīng)過(guò)JSON編碼的合法的JS代碼，響應(yīng)內(nèi)容必須用JS函數(shù)名和圓括號(hào)包裹起來(lái)的。（如：aa({"name":"kiwi"})） 3.定義處理跨域獲取數(shù)據(jù)的函數(shù)（如：function callback(data){}），來(lái)監(jiān)控<script>的src屬性是否完成數(shù)據(jù)的獲取。 4.用src獲取數(shù)據(jù)的時(shí)候添加一個(gè)參數(shù)?cd(或&cd) 5.服務(wù)端會(huì)根據(jù)參數(shù)cb的值返回對(duì)應(yīng)的內(nèi)容 （即，callback函數(shù)的參數(shù)格式的字符串） 復(fù)制代碼

B. 使用

//動(dòng)態(tài)創(chuàng)建script標(biāo)簽，并添加src屬性值。 var oScript = document.createElement('script'); oScript.src = './index.txt?cb=callback'; //callback為查詢參數(shù)的值(實(shí)際，支持JSONP的服務(wù)不需要強(qiáng)制指定客戶端必須實(shí)現(xiàn)的回調(diào)函數(shù)名稱)//將script標(biāo)簽插入到body里面 document.body.appendChild(oScript); //清理工作：移除script元素 document.body.removeChild(oScript);function aa(data){console.log(data); } function bb(data){console.log(data.age); } 復(fù)制代碼

index.txt文檔內(nèi)容

aa({"name":"kiwi"}); bb({"age":"27"}) 復(fù)制代碼

最終返回值

//{name:"kiwi"} //27 復(fù)制代碼

D. 實(shí)戰(zhàn)應(yīng)用--百度搜索聯(lián)想詞

免費(fèi)接口 JSON API：https://www.bejson.com/knownjson/webInterface/

var oInput = document.getElementsByTagName('input')[0],oUl = document.getElementsByTagName('ul')[0]; //當(dāng)輸入發(fā)生變化時(shí)，數(shù)據(jù)返回會(huì)實(shí)時(shí)變化。 oInput.oninput = function(){var value = this.value;//創(chuàng)建<script>標(biāo)簽var oScript = document.createElement('script');oScript.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + value + '&cb=callback';//這里的wd是回調(diào)函數(shù)document.body.appendChild(oScript);document.body.removeChild(oScript); } //{q:"value", p:false, s:Array[10]} //q 是輸入的關(guān)鍵字；s 是返回的相關(guān)數(shù)組 function callback(data){var s = data.s,str = '';if(s.length > 0){s.forEach(function(ele,index){str += '<li><a href="https://www.baidu.com/s?wd=' + ele +'">' + ele + '</a></li>';oUl.innerHTML = str;oUl.style.display = 'block';})}else{oUl.style.display = 'none';} } 復(fù)制代碼

總結(jié)

以上是生活随笔為你收集整理的跨域JSONP的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。