JSONP跨域

標籤：這一   輕量   hand   方便   拼接   相互   keyword   red   hive   

JSON

JSON就不多說了，JSON是一種輕量級資料格式，因其被JavaScript原生和幾乎所有後台語言支援，所以用起來很方便，對其熱愛，漸漸超過XML。想具體理解請使勁戳JSON.

同源協議

JavaScript是一種在Web開發中經常使用的前端動態指令碼技術，在JavaScript中有一項很重要的安全性限制，被稱為“Same-Origin Policy”（同源策略），對JavaScript能夠訪問的頁面進行了限制，即如果A頁面URL和B頁面的URl是同源的，那就兩個頁面就可以用JavaScript進行相互的訪問，否則就無法訪問。
這裡的同源指的是“同協議，同網域名稱，同連接埠”。
現在幾乎所有的瀏覽器都支援JavaScript，所以同源策略就顯得尤為重要。

JSONP原理

JSONP是"JSON with Padding"的縮寫，代表的是JSON填充的意思，我們常用JSONP來進行跨域GET的HTTP請求。
下面說一些JSONP的產生過程：
1、這時我們會產生跨網域作業的需求，但同源策略限制了我們的自由，但這時就有人發現使用script標籤的src屬性引進資源是不受同源策略的限制的（事實上所有帶有src的標籤都不受同源策略的影響，例如img，iframe等等），通過script引進的js檔案代碼在引進後是立刻執行的。
2、於是人們就想根據script標籤這一漏洞來跨域向伺服器請求資料，然後伺服器設法將資料裝進js檔案中返回，供用戶端處理使用。
3、此時我們又知道JSON這一種被JavaScript原生支援的輕量資料格式，在用戶端我們可以用js方便的處理JSON資料。 4、在經過一段時間的的實踐後,JSONP這個非正式傳輸協議誕生了，該協議允許我們傳遞一個 callback參數給伺服器。 5、具體流程就是：
（1）、用戶端通過script標籤跨域請求資料，並附帶傳遞一個callback參數
（2）、伺服器在接受到資料後動態產生JSON資料，然後用callback參數作為函數名來包裹住JSON資料，然後將之返回。 （3）、用戶端接受到callback作為函數名包裹住JSON資料的js代碼後，會立即執行之。 （4）、所有只要用戶端提前定義好資料處理回呼函數，然後在請求資料時將callback參數賦值為我們定義好的資料處理函數名，等資料返回後，執行的自然是我們事先定義好的資料處理函數，且其參數為我們請求的資料。
P.S.當然用戶端要事先和伺服器端定義好callback介面。

JSONP的代碼實現

隨著進來一大批新技術比如react、redux、webpack、es6等等的衝擊，使用JQuery的原來越少，而且JQuery使用的越多，導致代碼越混亂，所以此處僅僅貼上使用原生js實現的JSONP小Demo
利用百度搜尋的一個介面，從本地跨域請求百度搜尋資料，並簡單處理，將資料列印出即可.
介面：http://suggestion.baidu.com/su?wd= + 搜尋索引鍵 + &cb= + 回呼函數名(注意此處是回呼函數名，是純文字，而不是回呼函數的引用)
我們只要將搜尋的關鍵字和我們定義的資料處理函數名拼接進介面即可 本地A頁面js代碼

function handle(json)

百度伺服器會將請求的json資料用cb函數包裹住,返回，用戶端在接受到後會立刻執行代碼，就相當於將伺服器端資料拿過來 ，然後用我們定義handle函數處理之

參考博文：

1. http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html

2. http://zha-zi.iteye.com/blog/1975116

3. http://www.cnblogs.com/chopper/archive/2012/03/24/2403945.html

JSONP跨域