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