A. JSONP原理

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

B. 使用

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

index.txt文檔內容

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

最終返回值

//{name:"kiwi"} //27 復制代碼

D. 實戰應用--百度搜索聯想詞

免費接口 JSON API：https://www.bejson.com/knownjson/webInterface/

var oInput = document.getElementsByTagName('input')[0],oUl = document.getElementsByTagName('ul')[0]; //當輸入發生變化時，數據返回會實時變化。 oInput.oninput = function(){var value = this.value;//創建<script>標簽var oScript = document.createElement('script');oScript.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + value + '&cb=callback';//這里的wd是回調函數document.body.appendChild(oScript);document.body.removeChild(oScript); } //{q:"value", p:false, s:Array[10]} //q 是輸入的關鍵字；s 是返回的相關數組 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';} } 復制代碼

總結

以上是生活随笔為你收集整理的跨域JSONP的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。