JSONP解決跨域的那些事

JSONP是什么

JSONP即JSON with Padding捶索。由于同源策略的限制因妇,XmlHttpRequest只允許請(qǐng)求當(dāng)前源(域名、協(xié)議找蜜、端口)的資源饼暑。如果要進(jìn)行跨域請(qǐng)求, 我們可以通過(guò)使用html的script標(biāo)記來(lái)進(jìn)行跨域請(qǐng)求洗做,并在響應(yīng)中返回要執(zhí)行的script代碼弓叛,其中可以直接使用JSON傳遞javascript對(duì)象。 這種跨域的通訊方式稱為JSONP诚纸。

JSONP的優(yōu)點(diǎn):

它不像XMLHttpRequest對(duì)象實(shí)現(xiàn)的Ajax請(qǐng)求那樣受到同源策略的限制撰筷;它的兼容性更好,在更加古老的瀏覽器中都 可以運(yùn)行畦徘,不需要XMLHttpRequest或ActiveX的支持毕籽;并且在請(qǐng)求完畢后可以通過(guò)調(diào)用callback的方式回傳結(jié)果。

JSONP的缺點(diǎn):

它只支持GET請(qǐng)求而不支持POST等其它類型的HTTP請(qǐng)求旧烧;它只支持跨域HTTP請(qǐng)求這種情況影钉,不能解決不同域的兩個(gè)頁(yè)面之間如何進(jìn)行JavaScript調(diào)用的問(wèn)題画髓。

JSONP原理

JSONP的最基本的原理是:動(dòng)態(tài)添加一個(gè)<script>標(biāo)簽掘剪,而script標(biāo)簽的src屬性是沒(méi)有跨域的限制的。這樣說(shuō)來(lái)奈虾,這種跨域方式其實(shí)與ajax XmlHttpRequest協(xié)議無(wú)關(guān)了夺谁。

這樣其實(shí)"jQuery AJAX跨域問(wèn)題"就成了個(gè)偽命題廉赔,jquery $.ajax方法名有誤導(dǎo)人之嫌。

如果設(shè)為dataType: 'jsonp'匾鸥,這個(gè)$.ajax方法就和ajax XmlHttpRequest沒(méi)什么關(guān)系了蜡塌,取而代之的則是JSONP協(xié)議。JSONP是一個(gè)非官方的協(xié)議勿负,它允許在服務(wù)器端集成Script tags返回至客戶端馏艾,通過(guò)javascript callback的形式實(shí)現(xiàn)跨域訪問(wèn)。

JSONP的執(zhí)行過(guò)程

首先在客戶端注冊(cè)一個(gè)callback (如:'jsoncallback'), 然后把callback的名字(如:jsonp1236827957501)傳給服務(wù)器奴愉。注意:服務(wù)端得到callback的數(shù)值后琅摩,要用jsonp1236827957501(......)把將要輸出的json內(nèi)容包括起來(lái),此時(shí)锭硼,服務(wù)器生成 json 數(shù)據(jù)才能被客戶端正確接收房资。

然后以 javascript 語(yǔ)法的方式,生成一個(gè)function檀头, function 名字就是傳遞上來(lái)的參數(shù) 'jsoncallback'的值 jsonp1236827957501 .

最后將 json 數(shù)據(jù)直接以入?yún)⒌姆绞胶湟欤胖玫?function 中,這樣就生成了一段 js 語(yǔ)法的文檔暑始,返回給客戶端搭独。

客戶端瀏覽器,解析script標(biāo)簽蒋荚,并執(zhí)行返回的 javascript 文檔戳稽,此時(shí)javascript文檔數(shù)據(jù),作為參數(shù)期升, 傳入到了客戶端預(yù)先定義好的 callback 函數(shù)(如上例中jquery $.ajax()方法封裝的的success: function (json))里惊奇。

可以說(shuō)jsonp的方式原理上和<script src="http://跨域/...xx.js"></script>是一致的(qq空間就是大量采用這種方式來(lái)實(shí)現(xiàn)跨域數(shù)據(jù)交換的)。JSONP是一種腳本注入(Script Injection)行為播赁,所以有一定的安全隱患颂郎。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市容为,隨后出現(xiàn)的幾起案子乓序,更是在濱河造成了極大的恐慌,老刑警劉巖坎背,帶你破解...
    沈念sama閱讀 216,402評(píng)論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件替劈,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡得滤,警方通過(guò)查閱死者的電腦和手機(jī)陨献,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)懂更,“玉大人眨业,你說(shuō)我怎么就攤上這事急膀。” “怎么了龄捡?”我有些...
    開(kāi)封第一講書(shū)人閱讀 162,483評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵卓嫂,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我聘殖,道長(zhǎng)晨雳,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,165評(píng)論 1 292
  • 正文 為了忘掉前任奸腺,我火速辦了婚禮悍募,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘洋机。我一直安慰自己坠宴,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,176評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布绷旗。 她就那樣靜靜地躺著喜鼓,像睡著了一般。 火紅的嫁衣襯著肌膚如雪衔肢。 梳的紋絲不亂的頭發(fā)上庄岖,一...
    開(kāi)封第一講書(shū)人閱讀 51,146評(píng)論 1 297
  • 那天,我揣著相機(jī)與錄音角骤,去河邊找鬼隅忿。 笑死,一個(gè)胖子當(dāng)著我的面吹牛邦尊,可吹牛的內(nèi)容都是我干的背桐。 我是一名探鬼主播,決...
    沈念sama閱讀 40,032評(píng)論 3 417
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼蝉揍,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼链峭!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起又沾,我...
    開(kāi)封第一講書(shū)人閱讀 38,896評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤弊仪,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后杖刷,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體励饵,經(jīng)...
    沈念sama閱讀 45,311評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,536評(píng)論 2 332
  • 正文 我和宋清朗相戀三年滑燃,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了役听。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,696評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖禾嫉,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情蚊丐,我是刑警寧澤熙参,帶...
    沈念sama閱讀 35,413評(píng)論 5 343
  • 正文 年R本政府宣布,位于F島的核電站麦备,受9級(jí)特大地震影響孽椰,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜凛篙,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,008評(píng)論 3 325
  • 文/蒙蒙 一黍匾、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧呛梆,春花似錦锐涯、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,659評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至滞磺,卻和暖如春升薯,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背击困。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,815評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工涎劈, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人阅茶。 一個(gè)月前我還...
    沈念sama閱讀 47,698評(píng)論 2 368
  • 正文 我出身青樓蛛枚,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親脸哀。 傳聞我的和親對(duì)象是個(gè)殘疾皇子坤候,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,592評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容

  • JavaScript是一種在Web開(kāi)發(fā)中經(jīng)常使用的前端動(dòng)態(tài)腳本技術(shù)。在JavaScript中企蹭,有一個(gè)很重要的...
    西瓜w閱讀 1,759評(píng)論 0 1
  • http://blog.csdn.net/qq_34482827/article/details/51655914...
    cllian119閱讀 1,038評(píng)論 0 0
  • 0. 前言 說(shuō)到AJAX就會(huì)不可避免的面臨兩個(gè)問(wèn)題白筹。 AJAX以何種格式來(lái)交換數(shù)據(jù)? 第二個(gè)是跨域的需求如何解決谅摄?...
    公子七閱讀 23,597評(píng)論 7 67
  • AJAX 原生js操作ajax 1.創(chuàng)建XMLHttpRequest對(duì)象 var xhr = new XMLHtt...
    碧玉含香閱讀 3,195評(píng)論 0 7
  • 今天運(yùn)動(dòng)還是選擇的室內(nèi)徒河。五公里,運(yùn)動(dòng)四十四分鐘左右送漠,出了渾身的汗顽照,感覺(jué)還好,沒(méi)累的感覺(jué)。 不過(guò)今天的攝影筆記我感覺(jué)...
    冰雪嫣然閱讀 106評(píng)論 0 0