1.jsonp
json相信大家都用的多，jsonp我就一直沒(méi)有機(jī)會(huì)用到，但也經(jīng)?？吹剑恢朗恰坝脕?lái)跨域的”，一直不知道具體是個(gè)什么東西。今天總算搞明白了。下面一步步來(lái)搞清楚jsonp是個(gè)什么玩意。
同源策略
首先基于安全的原因，瀏覽器是存在同源策略這個(gè)機(jī)制的，同源策略阻止從一個(gè)源加載的文檔或腳本獲取或設(shè)置另一個(gè)源加載的文檔的屬性?？雌饋?lái)不知道什么意思，實(shí)踐一下就知道了。
1.隨便建兩個(gè)網(wǎng)頁(yè)
一個(gè)端口是2698，一個(gè)2701，按照定義它們是不同源的。
2.用jQuery發(fā)起不同源的請(qǐng)求
在2698端口的網(wǎng)頁(yè)上添加一個(gè)按鈕，Click事件隨便發(fā)起兩個(gè)向端口為2701域的請(qǐng)求。
$("#getOtherDomainThings").click(function() {? ? $.get("http://localhost:2701/Scripts/jquery-1.4.4.min.js",function(data) {? ? ? ? console.log(data)? ? })? ? $.get("http://localhost:2701/home/index",function(data) {? ? ? ? console.log(data)? ? })})
根據(jù)同源策略，很明顯會(huì)悲劇了。瀏覽器會(huì)阻止，根本不會(huì)發(fā)起這個(gè)請(qǐng)求。（not allowed by Access-Control-Allow-Origin）
OK，原來(lái)jsonp是要解決這個(gè)問(wèn)題的。
script標(biāo)簽的跨域能力
不知道大家知不知道CDN這個(gè)東西，例如微軟的CDN，使用它，我們的網(wǎng)頁(yè)可以不提供jQuery，由微軟的網(wǎng)站幫我們提供：
回到我們的2698端口的網(wǎng)頁(yè)，上面我們?cè)贑lick事件里有一個(gè)對(duì)2701端口域的jQuery文件的請(qǐng)求，這次使用script標(biāo)簽來(lái)請(qǐng)求。
當(dāng)然，200，OK了
同樣是端口2698的網(wǎng)頁(yè)發(fā)起對(duì)2701域的請(qǐng)求，放在script里設(shè)置scr屬性的OK了，另一個(gè)方式就悲劇。利用script的跨域能力，這就是jsonp的基礎(chǔ)。
利用script獲取不同源的json
既然它叫jsonp，很明顯目的還是json，而且是跨域獲取。根據(jù)上面的分析，很容易想到：利用js構(gòu)造一個(gè)script標(biāo)簽，把json的url賦給script的scr屬性，把這個(gè)script插入到dom里，讓瀏覽器去獲取。實(shí)踐：
functionCreateScript(src) {? ? $("").attr("src", src).appendTo("body")}
添加一個(gè)按鈕事件來(lái)測(cè)試一下：
$("#getOtherDomainJson").click(function() {? ? $.get('http://localhost:2701/home/somejson',function(data) {? ? ? ? console.log(data)? ? })})
首先，第一個(gè)瀏覽器，http://localhost:2701/home/somejson這個(gè)Url的確是存在一個(gè)json的，而且在 2698網(wǎng)頁(yè)上用script標(biāo)簽來(lái)請(qǐng)求這個(gè)2701這個(gè)Url也是200OK的，但是最下面報(bào)js語(yǔ)法錯(cuò)誤了。原來(lái)用script標(biāo)簽加載完后，會(huì)立即 把響應(yīng)當(dāng)js去執(zhí)行，很明顯{"Email":"zhww@outlook.com","Remark":"我來(lái)自遙遠(yuǎn)的東方"}不是合法的js語(yǔ)句。
利用script獲取異域的jsonp
顯然，把上面的json放到一個(gè)回調(diào)方法里是最簡(jiǎn)單的方法。例如，變成這樣：
如果存在jsonpcallback這個(gè)方法，那么jsonpcallback({"Email":"zhww@outlook.com","Remark":"我來(lái)自遙遠(yuǎn)的東方"})就是合法的js語(yǔ)句。
由于服務(wù)器不知道客戶端的回調(diào)是什么，不可能hard code成jsonpcallback，所以就帶一個(gè)QueryString讓客戶端告訴服務(wù)端，回調(diào)方法是什么，當(dāng)然，QueryString的key要遵從服務(wù)端的約定，上面的是”callback“。
添加回調(diào)函數(shù)：
functionjsonpcallback(json) {? ? console.log(json)}
把前面的方法稍微改改參數(shù)：
$("#getJsonpByHand").click(function() {? ? CreateScript("http://localhost:2701/home/somejsonp?callback=jsonpcallback")})
200OK，服務(wù)器返回jsonpcallback({"Email":"zhww@outlook.com","Remark":"我來(lái)自遙遠(yuǎn)的 東方"})，我們也寫了jsonpcallback方法，當(dāng)然會(huì)執(zhí)行。OK順利獲得了json。沒(méi)錯(cuò)，到這里就是jsonp的全部。
利用jQuery獲取jsonp
上面的方式中，又要插入script標(biāo)簽，又要定義一個(gè)回調(diào)，略顯麻煩，利用jQuery可以直接得到想要的json數(shù)據(jù)，同樣是上面的jsonp：
$("#getJsonpByJquery").click(function() {? ? $.ajax({? ? ? ? url:'http://localhost:2701/home/somejsonp',? ? ? ? dataType:"jsonp",? ? ? ? jsonp:"callback",? ? ? ? success:function(data) {? ? ? ? ? ? console.log(data)? ? ? ? }? ? })})
得到的結(jié)果跟上面類似。
總結(jié)
一句話就是利用script標(biāo)簽繞過(guò)同源策略，獲得一個(gè)類似這樣的數(shù)據(jù)，jsonpcallback是頁(yè)面存在的回調(diào)方法，參數(shù)就是想得到的json。
jsonpcallback({"Email":"zhww@outlook.com","Remark":"我來(lái)自遙遠(yuǎn)的東方"})
2. 添加HTTP首部解決
CORS能做什么：
正常使用AJAX會(huì)需要正?？紤]跨域問(wèn)題，所以偉大的程序員們又折騰出了一系列跨域問(wèn)題的解決方案，如JSONP、flash、ifame、xhr2等等。
本文介紹的CORS就是一套AJAX跨域問(wèn)題的解決方案。
CORS的原理：
CORS定義一種跨域訪問(wèn)的機(jī)制，可以讓AJAX實(shí)現(xiàn)跨域訪問(wèn)。CORS 允許一個(gè)域上的網(wǎng)絡(luò)應(yīng)用向另一個(gè)域提交跨域 AJAX 請(qǐng)求。實(shí)現(xiàn)此功能非常簡(jiǎn)單，只需由服務(wù)器發(fā)送一個(gè)響應(yīng)標(biāo)頭即可。
CORS瀏覽器支持情況如下圖：
喜聞樂(lè)見(jiàn)、普大喜奔的支持情況，尤其是在移動(dòng)終端上，除了opera Mini；
PC上的現(xiàn)代瀏覽器都能友好的支持，除了IE9-，不過(guò)前端工程師對(duì)這種情況早應(yīng)該習(xí)慣了...
CORS啟航
假設(shè)我們頁(yè)面或者應(yīng)用已在http://www.test1.com上了，而我們打算從http://www.test2.com請(qǐng)求提取數(shù)據(jù)。一般情況下，如果我們直接使用 AJAX 來(lái)請(qǐng)求將會(huì)失敗，瀏覽器也會(huì)返回“源不匹配”的錯(cuò)誤，"跨域"也就以此由來(lái)。
利用 CORS，http://www.test2.com只需添加一個(gè)標(biāo)頭，就可以允許來(lái)自http://www.test1.com的請(qǐng)求，下圖是我在PHP中的 hander() 設(shè)置，“*”號(hào)表示允許任何域向我們的服務(wù)端提交請(qǐng)求：
也可以設(shè)置指定的域名，如域名http://www.test2.com，那么就允許來(lái)自這個(gè)域名的請(qǐng)求：
當(dāng)前我設(shè)置的header為“*”，任意一個(gè)請(qǐng)求過(guò)來(lái)之后服務(wù)端我們都可以進(jìn)行處理&響應(yīng)，那么在調(diào)試工具中可以看到其頭信息設(shè)置，其中見(jiàn)紅框中有一項(xiàng)信息是“Access-Control-Allow-Origin：*”，表示我們已經(jīng)啟用CORS，如下圖。
PS：由于demo都在我廠的兩臺(tái)測(cè)試機(jī)間完成，外網(wǎng)也不能訪問(wèn)，所以在這就不提供demo了，見(jiàn)諒
簡(jiǎn)單的一個(gè)header設(shè)置，一個(gè)支持跨域&POST請(qǐng)求的server就完成了:)
當(dāng)然，如果沒(méi)有開(kāi)啟CORS必定失敗的啦，如下圖：
