資訊專欄INFORMATION COLUMN
摘要：就這樣被發明了，利用的屬性不受同源策略的控制，作弊般地巧妙地逃過了瀏覽器的這一限制。然后，聲明這個回調函數。
這是我在13年初寫的文章，當時懵懵懂懂寫下了自己對JSONP的理解。
文章原文
博客 歡迎訂閱
提到JSONP，我當時在網上找了無數帖子也沒有看懂它。那些文章大同小異，都是講到JSONP原理以后就戛然而止，把我們這些初學者搞得云里霧里。所以，寫下這篇文章，希望對大家有幫助！
為什么要有JSONP回答這個問題之前，大家先想想什么是AJAX，JSONP就是一種能夠解決AJAX辦不到的事情而存在的一種取數據的技術。什么事情是AJAX辦不到的呢？就是跨域！
跨域：顧名思義，就是當前網頁的地址和我們要取的數據地址不在一個域下。這是因為瀏覽器都有一個“同源策略”— 兩個頁面的域名必須在同域的情況下，才能允許通信。
怎么才算一個域呢？
相同域名，相同端口，相同協議（因為不是這里的重點，大家可以請教Google）
“同源策略”的意義:“同源策略”有效地阻止了一些危險行為，比如你進入www.aaa.com，同時瀏覽器又開了一個www.bbb.com，如果這個www.bbb.com是一個木馬網站，在沒有“同源策略”的情況下，它就可能嵌入一些代碼，來取得你在www.aaa.com的信息（因為這時兩個頁面是可以通信的） 。而正是因為有了“同源策略”，剛才可以通信的情況才不會發生。
“同源策略”帶來的麻煩:上面的例子是我們在不知情的情況下，保護我們的網絡安全的，但如果我們就是要讓www.aaa.com取得www.bbb.com上的數據，行不行呢？答：不行！還是因為”同源策略”！我們想從自己信任的網頁上取得數據都不行，這可怎么辦呢？
JSONP出現在需要跨域通信的歲月里，一些卓越的前端工程師們想到了這個”作弊”的辦法來逃避”同源策略”。”同源策略”雖然很厲害，阻止了一個頁面到另一個頁面的通信，可是src指向的路徑它放過了，提到src，大家是不是想起了
www.bbb.com/abc.js中：
abc({"name":"risker","age":24});
頁面會彈出risker，有感覺了么？
JSONP是這樣工作的：像前面所說的那樣，我們可以取到www.bbb.com/abc.js，里面是一個abc函數，這個函數也會被加載到www.aaa.com。加載完成后，就應該執行abc了，然后我們在www.aaa.com定義abc函數，這個函數里寫一些處理數據的語句。這樣其實就簡單地實現了跨域訪問數據了，這也就是JSONP的原理了。而JSON with Padding的意思，就是abc(json)中的json：
abc({"name":"risker","age":24})。
這個JSON對象被包在abc這個函數中當作參數來被處理，而JSON with Padding這個詞很形象地形容了這個過程。
JSONP的簡單實例在網上能找到的JSON基本只是介紹到這里就完了，但是這讓初學者看不到一個實實在在的例子。所以下面才是這篇文章和其他網上介紹JSON文章不一樣的地方，我帶給大家一個例子！
大家一定對百度的自動搜索框有印象，它就是一個JSONP的實例：
先查看demo
分析一下：
1.分析數據地址回顧上面的例子，我們首先要知道數據的來源地址，就是上面的www.bbb.com/abc.js里的數據。在Chrome中查看Network。然后隨便在搜索框里輸入點什么，比如s，觀察Network里是不是多了東西，點開它，就是我們輸入“s”后傳回的數據了：
這個地址是http://suggestion.baidu.com/su?wd=S&p=3&cb=window.bdsug.sug&from=superpage&t=1365392859833 ， 我們分析一下，wd后面是s，那就可以斷定百度定義wd是搜索的關鍵字，cb是一個回調函數，其他的對我們就不重要了。回調函數是我們取到數據要后執行的函數，相當于我們上面的abc函數。它是可以自己取名的。像http://suggestion.baidu.com/su?wd=S&p=3&cb=succ&from=superpage表示取到數據后執行succ函數：
這樣，我們的數據就包在了succ函數里做一個參數，再次證明了JSON with Padding 的原理。
2.做