在介紹jsonp之前灼卢，先來聊一聊瀏覽器的同源策略绍哎。
關(guān)于同源策略的由來
1995年，同源策略被引入到瀏覽器中鞋真，其目的是為了保護用戶的數(shù)據(jù)安全崇堰。
同源策略主要做了以下幾點的限制：
（1） 非同源站點上的Cookie、LocalStorage 和 IndexDB 無法讀取涩咖。
（2） 非同源站點上面的DOM節(jié)點 無法獲得海诲。
（3） AJAX 請求不能發(fā)送給非同源站點。
試想一下檩互，如果沒有這些限制特幔，你在瀏覽網(wǎng)站的時候，你的cookie可以被別人隨意讀取闸昨，別人可以直接用你的身份去登陸網(wǎng)站蚯斯，肆意的發(fā)揮；你頁面的dom結(jié)構(gòu)還可以被別人控制饵较，肆意修改拍嵌，就問你一句：怕不怕？
反正
我怕循诉！
但是横辆，任何事情都有兩面性，瀏覽器禁止頁面腳本跨域請求提高了安全性的同時茄猫，也帶來一些不方便狈蚤。
很多時候我們確實需要跨站去請求一些資源，那瀏覽器同源策略的限制是不是有限苛刻了划纽？
其實細心的小伙伴們已經(jīng)發(fā)現(xiàn)脆侮，瀏覽器在為我們關(guān)閉一扇門的同時，給我們打開了一扇窗勇劣，帶有src屬性的img標簽靖避，你隨便在src里面寫上任意一個網(wǎng)站的圖片地址，就可以獲取這個圖片的數(shù)據(jù)芭毙，說明它是不受同源策略限制的筋蓖。script標簽也是一樣，又比如link標簽退敦，我們的css可以引入外部站點的css文件粘咖，獲取對方站點的css文件數(shù)據(jù)。
接下來,我們要介紹的jsonp就是利用script標簽的src不受跨越限制特性來實現(xiàn)的。
jsonp的實現(xiàn)原理
寫js的時候扇售，我們會在script標簽里面引入我們需要的js文件，有自己網(wǎng)站上的妨退，也有別的網(wǎng)站上的讽坏，不管哪個網(wǎng)站上的js文件锭魔，只要引入了，都可以去運行路呜，絲毫不受同源策略的影響迷捧。
利用這個特性，我們就開始寫我們的代碼了：
先從一段簡單的代碼開始：
（1）在http://a.com下新建http://a.com/test.html文件胀葱，代碼如下：
（2）在b.com下面新建文件http://b.com/test.js文件漠秋，代碼如下：
（3）訪問http://a.com/index.html文件，頁面上會彈出“111”
此時此刻抵屿，我們的這個小例子就已經(jīng)實現(xiàn)了跨域訪問數(shù)據(jù)了庆锦，這是很多人會想，http://b.com/test.php下面的數(shù)據(jù)我如何拿到呢轧葛？光彈出有什么用搂抒？我需要操作這個返回結(jié)果呀？
別急尿扯，我們繼續(xù)往下看：
（1）現(xiàn)在我們修改http://b.com/test.js文件求晶，代碼如下：
（2）修改http://a.com/test.html文件，代碼如下：
（3）訪問http://a.com/test.html姜胖，輸出如下：
看誉帅，現(xiàn)在http://b.com/test.js里面的數(shù)據(jù)我們拿到了淀散，跨域操作就是這么簡單右莱，3步就完成了。
不過善于思考的朋友又會問档插，你這樣復(fù)制的方式慢蜓，屬于全局變量的操作方式，這種方式不好郭膛。
#新手朋友們可能不知道為啥全局變量不好晨抡，這里稍稍解釋下，例如你引入了a.js文件则剃，a.js文件里面寫了var a='面面包';又引入了b.js文件耘柱，但是b.js文件里面寫了var a='屎';然后當你運行alert(a)的時候居然彈出了“屎”，你點了一份面包棍现，別人送你一坨屎调煎，你覺得這樣好嗎？所以說全局變量是個很討厭的東西己肮。
那么士袄，不用賦值的方式悲关，我們?nèi)绾伟褦?shù)據(jù)獲取到呢？
（1）現(xiàn)在我們修改http://b.com/test.js文件娄柳，代碼如下：
（2）修改http://a.com/test.html文件寓辱，代碼如下：
（3）訪問http://a.com/test.html，輸出如下：
現(xiàn)在不用擔(dān)心全局污染了赤拒，我們通過函數(shù)調(diào)用的方式獲取到了我們想要的數(shù)據(jù)秫筏。
不過又有朋友要問了，你這樣頁面一訪問就加載數(shù)據(jù)挎挖，如果我希望手動觸發(fā)事件之后才去獲取數(shù)據(jù)呢跳昼？
好，咱繼續(xù)往下看：
（1）現(xiàn)在我們修改http://b.com/test.js文件肋乍，代碼如下：
（2）修改http://a.com/test.html文件鹅颊，代碼如下：
（3）訪問http://a.com/test.html，點擊一下按鈕”點擊“墓造，效果如下：
通過動態(tài)生成script標簽的方式堪伍，我們實現(xiàn)了手動獲取數(shù)據(jù)的方式。
以上就是今天要介紹的jsonp的原理和實現(xiàn)方式觅闽，接下來帝雇，我會介紹jquery下jsonp的寫法以及通過jsonp跨域?qū)崿F(xiàn)sso單點登陸。
