1. 程式人生 > >JSON跨域請求

JSON跨域請求

安全 註意 ref 回調 target 完全 通過 人員 參考

輕松搞定JSONP跨域請求

一、同源策略

要理解跨域,先要了解一下“同源策略”。所謂同源是指,域名,協議,端口相同。所謂“同源策略“,簡單的說就是基於安全考慮,當前域不能訪問其他域的東西。

一些常見的是否同源示例可參照下表:

技術分享圖片

在同源策略下,在某個服務器下的頁面是無法獲取到該服務器以外的數據的。例如我們在自己的網站通過ajax去獲取豆瓣上https://developers.douban.com/wiki/?title=api_v2提供的接口數據。這裏我們以搜索圖書為例,參數鏈接為:https://api.douban.com/v2/book/search?q=javascript&count=1,該鏈接中數據為JSON格式,如下:

技術分享圖片

我通過如下代碼去訪問該數據:

技術分享圖片

上述程序運行時會報錯:

技術分享圖片

<img>的src(獲取圖片),<link>的href(獲取css), <script>的src(獲取javascript) 這三個都不符合同源策略,它們可以跨域獲取數據。這裏要介紹的JSONP就是利用<script>的src來實現跨域獲取數據的。

二、JSONP

JSONP 是 JSON with padding(填充式 JSON 或參數式 JSON)的簡寫。

JSONP實現跨域請求的原理簡單的說,就是動態創建<script>標簽,然後利用<script>

的src 不受同源策略約束來跨域獲取數據。

JSONP 由兩部分組成回調函數數據。回調函數是當響應到來時應該在頁面中調用的函數。回調函數的名字一般是在請求中指定的。而數據就是傳入回調函數中的 JSON 數據。

動態創建<script>標簽,設置其src,回調函數在src中設置:

技術分享圖片

在頁面中,返回的JSON作為參數傳入回調函數中,我們通過回調函數來來操作數據。

技術分享圖片

了解了JSONP的基本使用方法,我們在實現上面通過ajax調用豆瓣接口的需求,實現代碼如下:

技術分享圖片

在控制臺,我們可以查看到返回的response數據格式為JSON對象格式的,具體需要取出哪些參數,可以根據自己的需要:

技術分享圖片

JSONP目前還是比較流行的跨域方式,雖然JSONP使用起來方便,但是也存在一些問題:
首先, JSONP 是從其他域中加載代碼執行。如果其他域不安全,很可能會在響應中夾帶一些惡意代碼,而此時除了完全放棄 JSONP 調用之外,沒有辦法追究。因此在使用不是你自己運維的 Web 服務時,一定得保證它安全可靠。

其次,要確定 JSONP 請求是否失敗並不容易。雖然 HTML5 給<script>元素新增了一個 onerror事件處理程序,但目前還沒有得到任何瀏覽器支持。為此,開發人員不得不使用計時器檢測指定時間內是否接收到了響應。

二、jQuery封裝JSONP

對於經常用jQuery的開發者來說,能註意到jQuery封裝的$.ajax中有一個dataType屬性,如果將該屬性設置成dataType:"jsonp",就能實現JSONP跨域了。需要了解的一點是,雖然jQuery將JSONP封裝在$.ajax中,但是其本質與$.ajax不一樣。

通過jQuery的$.ajax實現跨域的代碼參考如下

技術分享圖片

最後的結果與JavaScript通過動態添加<script>標簽得到的結果是一樣的。

技術分享圖片

通過$.getJSON()

利用getJSON來實現,只要在地址中加上callback=?參數即可,參考代碼如下:

技術分享圖片

這樣也能實現跨域的功能。

技術分享圖片

JSON跨域請求