當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

封装-Jsonp

發布時間：2023/12/14 编程问答 46 豆豆

生活随笔收集整理的這篇文章主要介紹了封装-Jsonp 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

封裝-Jsonp

Jsonp
- jsonp是什么？
- 為什么使用jsonp?
- 原理---jsonp的通俗講解
- - 案例---使用script的src獲取跨域數據
- 封裝Jsonp
- - 案例---獲取qq.com中的城市信息與天氣信息

Jsonp

jsonp是什么？

通過script標簽中的src屬性沒有同源限制的方法進行獲取數據

即通過script標簽來跨域獲取數據，名為JSON with Padding，
或者就叫JSONP。JSONP的原理很簡單，但需要服務器端給予相應配合。
大致來說，JSONP的實現思路就是在客戶端編程時作好使用JSON數據的準備，然后再通過圓括號將這些數據括起來以創建一條有效的JavaScript語句（可能是一次有效的函數調用）。

也就是說，客戶端可以使用一個用于命名jsonp的查詢參數來決定可以獲取的數據。最簡單的情況下，如果jsonp參數為空，則返回的數據就是被括在圓括號中的JSON

為什么使用jsonp?

瀏覽器安全模型規定，XMLHttpRequest、框架（frame）等只能在一個域中通信。
從安全角度考慮，這個規定很合理；
但是，也確實給分布式（面向服務、混搭等等本周提到的概念）Web開發帶來了麻煩。

本地代理：
需要一些硬件設施（沒有服務器的客戶端無法運行），并且帶寬和潛伏時間也要加倍（遠程服務器－代理服務器－客戶端）。
Flash：
遠程主機中需要部署一個crossdomain.xml文件，而且，Flash作為一門專有技術，其前途尚不明朗；換句話說，開發人員很可能要學習一種目標不確定的編程語言。
Script標簽：
無法確切知道內容是否有效，沒有標準的實現方法，又可能被認為是一種“安全風險”。

原理—jsonp的通俗講解

使用script 的src屬性沒有同源限制，跨域名獲取數據的一種方法

案例—使用script的src獲取跨域數據

封裝Jsonp

原理：
使用script 的src屬性沒有同源限制，跨域名獲取數據的一種方法
動態的創建script標簽，使用src屬性來進行跨域獲取數據
其中使用有Promise，異步

// jsonp 利用script的src屬性沒有同源限制，跨域名獲取數據的一種方法 // 后端返回的數據格式是，方法名（數據） // url 最重要 callback名稱 jp 是callback的值 function jsonp(url,option={}) {// 默認回調函數參數名 callbackvar jp = option.jp||"callback"; // 默認回調函數參數值var callback = option.callback||"jp";return new Promise((resolve,reject) => {// 查看url是否有jp 沒有還要加上if(url.indexOf(jp)==-1){url += "&"+jp+"="+callback;}// 如果有獲取這已經加上了callback=值，獲取callback的值var p1 = url.indexOf(option.jp); // 獲取到callback的位置var p2 = url.indexOf("&",p1); // 從p1的位置開始查找符號"&"// 如果查找不到設置的p2位置，p2 == -1 ? p2 = url.lenght;// 就在url的末尾加,callback = url.slice(p1+jp.length+1,p2);// 動態的創建callback方法window[callback]=function(data){ // 刪除document.head.removeChild(script);resolve(data); }// 動態創建script標簽let script = document.createElement("script");// 將需要獲取的數據的地址賦值給script 中的src屬性，跳過瀏覽器的同源策略script.src = url;// 將script標簽追加到head中document.head.append(script); // script加載失敗script.onerror = function(e){// 動態刪除scriptdocument.head.removeChild(script); reject(e)}}) }

案例—獲取qq.com中的城市信息與天氣信息

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><p id="city" ></p><img src="" id="img" alt=""><p id="weather"></p></body><script type="text/javascript">// jsonp 利用script的src屬性沒有同源限制，跨域名獲取數據的一種方法// 后端返回的數據格式是，方法名（數據）// url 最重要 callback名稱 jp 是callback的值function jsonp(url,option={}) {// 默認回調函數參數名 callbackvar jp = option.jp||"callback"; // 默認回調函數參數值var callback = option.callback||"jp";return new Promise((resolve,reject) => {// 查看url是否有jp 沒有還要加上if(url.indexOf(jp)==-1){url += "&"+jp+"="+callback;}// 如果有獲取這已經加上了callback=值，獲取callback的值var p1 = url.indexOf(jp); // 獲取到callback的位置var p2 = url.indexOf("&",p1); // 從p1的位置開始查找符號"&"// 如果查找不到設置的p2位置，p2 == -1 ? p2 = url.lenght : '';// 就在url的末尾加,callback = url.slice(p1+jp.length+1,p2);// 動態的創建callback方法window[callback]=function(data){ // 刪除document.head.removeChild(script);resolve(data); }// 動態創建script標簽let script = document.createElement("script");// 將需要獲取的數據的地址賦值給script 中的src屬性，跳過瀏覽器的同源策略script.src = url;// 將script標簽追加到head中document.head.append(script); // script加載失敗script.onerror = function(e){// 動態刪除scriptdocument.head.removeChild(script); reject(e)}})}var url1 = "https://apis.map.qq.com/ws/location/v1/ip?key=CAABZ-AVSAQ-RDR5L-GTBDJ-HLA4O-A5FDB&output=jsonp";var url2 = "https://wis.qq.com/weather/common?weather_type=observe|forecast_24h|air&source=pc&callback=jp";// 獲取地址jsonp(url1).then(res=>{url2 = url2+`&province=${res.result.ad_info.province}&city=${res.result.ad_info.city}`;city.innerHTML=res.result.ad_info.city;return jsonp(url2); //獲取天氣}).then(res=>{weather.innerHTML=res.data.observe.degree+"℃";// 動態的天氣圖片img.src="https://mat1.gtimg.com/pingjs/ext2020/qqindex2018/dist/img/weather/"+res.data.observe.weather_code+".svg";})</script> </html>

總結

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

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

jsonp

上一篇： x58和x79服务器性能,X58接班人:
下一篇：电脑无线网卡连接的无线信号不好的，经常丢