jsonp跨域請求

 

在web2.0的時代，ajax的盛行給web帶來了翻天覆地的變化，容許在不干擾 Web 應用程序的顯示和行爲的狀況下在後臺進行數據檢索。使用 XMLHttpRequest 函數獲取數據，它是一種 API，容許客戶端 JavaScript 經過 HTTP 鏈接到遠程服務器。不過，因爲受到瀏覽器的限制，該方法不容許跨域通訊。若是嘗試從不一樣的域請求數據，會出現安全錯誤。

在工做中，咱們常常會碰到跨域的問題，同源策略阻止從一個域上加載的腳本獲取或操做另外一個域上的文檔屬性。也就是說，受到請求的 URL 的域必須與當前 Web 頁面的域相同。實現跨域的方式有不少，如：使用iframe隱藏，JSONP等。

如今主流的都是使用JSONP去實現跨域，什麼是JSONP？簡單的來講就是JSON-Padding。

對不少新手來講JSONP並非很理解，簡單的說明下：

因爲script的連接是能夠跨域獲取的，如：

<script src=「http://jsonp.js」> </script>

 

而jsonp.js裏面有一段JS代碼，瀏覽器會執行裏面的代碼。想到這個，前端頁面咱們能夠寫一個函數，如：

function jsonp(data){ alert(data.name); } 

data爲json格式的數據，而後再遠程的jsonp.js裏面，有一段代碼爲jsonp({「name」:」Demon」,」age」:」23」})，瀏覽器會根據這段代碼執行函數，從而彈出」Demon」。

 

如何使用JSONP，使用JSONP，咱們必須帶一 個參數傳給程序員，在後面加一個callback=？的參數，「？」爲前端頁面JS函數的名稱，若是不是使用JQ庫的，這個須要根據前端工做人員來定義。 若是使用JQ庫，那麼這裏比較方便了，JQ庫會直接把返回過來的」？」進行解析，如圖所示：

 

紅色圈圈部分就是JQ自動解析成的函數名，而後執行。JQ實現JSONP方法很簡單，代碼以下：

 
   
   $.ajax({ type:"GET", url:"http://xxx.php?action=add&callback=?", dataType:"json", success: function(msg){ console.log(msg.status); }

 或者：

 
   
   $.ajax({ type:"GET", url:"http://xxx.php?action=add", dataType:"jsonp", success: function(msg){ console.log(msg.status); }

這裏注意下，若是url中帶了」callback=？」，那麼dataType只要寫json就能夠，若是dataType爲jsonp，那麼url的連接能夠不帶」callback=？」，JQ會自動在連接中加上」callback=？」

程序接口如何實現：

注意的是這裏程序須要配合，程序返回數據的時候，必須帶上url中callback的參數，好比PHP中返回要寫成 echo $_GET[‘callback’] . ’(’ . josn_encode($josnData) . ’)’;

JSONP雖然強大，可是也有一些缺陷：

第一，也是最重要的一點，沒有關於 JSONP 調用的錯誤處理。若是動態腳本插入有效，就執行調用；若是無效，就靜默失敗。失敗是沒有任何提示的。例如，不能從服務器捕捉到 404 錯誤，也不能取消或從新開始請求。在安全方面，若是不是信任的網站提供的接口，頗有可能會受到惡意的攻擊。等等。