JSONP跨域原理

1、一個(gè)眾所周知的問(wèn)題艺谆,Ajax直接請(qǐng)求普通文件存在跨域無(wú)權(quán)限訪問(wèn)的問(wèn)題,甭管你是靜態(tài)頁(yè)面拜英、動(dòng)態(tài)網(wǎng)頁(yè)静汤、web服務(wù)、WCF居凶,只要是跨域請(qǐng)求虫给,一律不準(zhǔn);

2侠碧、不過(guò)我們又發(fā)現(xiàn)抹估,Web頁(yè)面上調(diào)用js文件時(shí)則不受是否跨域的影響(不僅如此,我們還發(fā)現(xiàn)凡是擁有"src"這個(gè)屬性的標(biāo)簽都擁有跨域的能力弄兜,比如<script>药蜻、<img>、<iframe>)替饿;

3语泽、于是可以判斷,當(dāng)前階段如果想通過(guò)純web端(ActiveX控件视卢、服務(wù)端代理踱卵、屬于未來(lái)的HTML5之Websocket等方式不算)跨域訪問(wèn)數(shù)據(jù)就只有一種可能,那就是在遠(yuǎn)程服務(wù)器上設(shè)法把數(shù)據(jù)裝進(jìn)js格式的文件里据过,供客戶端調(diào)用和進(jìn)一步處理惋砂;

4、恰巧我們已經(jīng)知道有一種叫做JSON的純字符數(shù)據(jù)格式可以簡(jiǎn)潔的描述復(fù)雜數(shù)據(jù)绳锅,更妙的是JSON還被js原生支持西饵,所以在客戶端幾乎可以隨心所欲的處理這種格式的數(shù)據(jù);

5鳞芙、這樣子解決方案就呼之欲出了罗标,web客戶端通過(guò)與調(diào)用腳本一模一樣的方式庸队,來(lái)調(diào)用跨域服務(wù)器上動(dòng)態(tài)生成的js格式文件(一般以JSON為后綴),顯而易見(jiàn)闯割,服務(wù)器之所以要?jiǎng)討B(tài)生成JSON文件彻消,目的就在于把客戶端需要的數(shù)據(jù)裝入進(jìn)去。

6宙拉、客戶端在對(duì)JSON文件調(diào)用成功之后宾尚,也就獲得了自己所需的數(shù)據(jù),剩下的就是按照自己需求進(jìn)行處理和展現(xiàn)了谢澈,這種獲取遠(yuǎn)程數(shù)據(jù)的方式看起來(lái)非常像AJAX煌贴,但其實(shí)并不一樣。

7锥忿、為了便于客戶端使用數(shù)據(jù)牛郑,逐漸形成了一種非正式傳輸協(xié)議,人們把它稱作JSONP敬鬓,該協(xié)議的一個(gè)要點(diǎn)就是允許用戶傳遞一個(gè)callback參數(shù)給服務(wù)端淹朋,然后服務(wù)端返回?cái)?shù)據(jù)時(shí)會(huì)將這個(gè)callback參數(shù)作為函數(shù)名來(lái)包裹住JSON數(shù)據(jù),這樣客戶端就可以隨意定制自己的函數(shù)來(lái)自動(dòng)處理返回?cái)?shù)據(jù)了钉答。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
    // 得到航班信息查詢結(jié)果后的回調(diào)函數(shù)
    var flightHandler = function(data){
        alert('你查詢的航班結(jié)果是:票價(jià) ' + data.price + ' 元础芍,' + '余票 ' + data.tickets + ' 張。');
    };
    // 提供jsonp服務(wù)的url地址(不管是什么類型的地址数尿,最終生成的返回值都是一段javascript代碼)
    var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
    // 創(chuàng)建script標(biāo)簽仑性,設(shè)置其屬性
    var script = document.createElement('script');
    script.setAttribute('src', url);
    // 把script標(biāo)簽加入head,此時(shí)調(diào)用開(kāi)始
    document.getElementsByTagName('head')[0].appendChild(script); 
    </script>
</head>
<body>

</body>
</html>

但是要注意JSONP只支持GET請(qǐng)求右蹦,不支持POST請(qǐng)求诊杆。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市何陆,隨后出現(xiàn)的幾起案子刽辙,更是在濱河造成了極大的恐慌,老刑警劉巖甲献,帶你破解...
    沈念sama閱讀 222,729評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件宰缤,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡晃洒,警方通過(guò)查閱死者的電腦和手機(jī)慨灭,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)球及,“玉大人氧骤,你說(shuō)我怎么就攤上這事〕砸” “怎么了筹陵?”我有些...
    開(kāi)封第一講書人閱讀 169,461評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵刽锤,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我朦佩,道長(zhǎng)并思,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書人閱讀 60,135評(píng)論 1 300
  • 正文 為了忘掉前任语稠,我火速辦了婚禮宋彼,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘仙畦。我一直安慰自己输涕,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布慨畸。 她就那樣靜靜地躺著莱坎,像睡著了一般。 火紅的嫁衣襯著肌膚如雪寸士。 梳的紋絲不亂的頭發(fā)上檐什,一...
    開(kāi)封第一講書人閱讀 52,736評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音碉京,去河邊找鬼厢汹。 笑死螟深,一個(gè)胖子當(dāng)著我的面吹牛谐宙,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播界弧,決...
    沈念sama閱讀 41,179評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼插爹,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼特姐!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書人閱讀 40,124評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤淋肾,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后合搅,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體殊霞,經(jīng)...
    沈念sama閱讀 46,657評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評(píng)論 3 342
  • 正文 我和宋清朗相戀三年帅掘,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了委煤。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,872評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡修档,死狀恐怖碧绞,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情吱窝,我是刑警寧澤讥邻,帶...
    沈念sama閱讀 36,533評(píng)論 5 351
  • 正文 年R本政府宣布迫靖,位于F島的核電站,受9級(jí)特大地震影響兴使,放射性物質(zhì)發(fā)生泄漏系宜。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評(píng)論 3 336
  • 文/蒙蒙 一鲫惶、第九天 我趴在偏房一處隱蔽的房頂上張望蜈首。 院中可真熱鬧,春花似錦欠母、人聲如沸欢策。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 32,700評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)踩寇。三九已至,卻和暖如春六水,著一層夾襖步出監(jiān)牢的瞬間俺孙,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 33,819評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工掷贾, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留睛榄,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,304評(píng)論 3 379
  • 正文 我出身青樓想帅,卻偏偏與公主長(zhǎng)得像场靴,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子港准,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評(píng)論 2 361

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

  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理旨剥,服務(wù)發(fā)現(xiàn),斷路器浅缸,智...
    卡卡羅2017閱讀 134,716評(píng)論 18 139
  • 利用 頁(yè)面上 script 標(biāo)簽可以跨域轨帜,并且其 src 指定的js腳本到達(dá)瀏覽器會(huì)執(zhí)行的特性,我們可以進(jìn)行跨域取...
    tobAlier閱讀 2,479評(píng)論 3 1
  • 首先json是一種基于文本的數(shù)據(jù)交換方式/或者叫做數(shù)據(jù)描述格式 當(dāng)一個(gè)網(wǎng)頁(yè)在請(qǐng)求文件的時(shí)候不受跨域的影響凡是擁有s...
    儒生閱讀 154評(píng)論 0 0
  • 0. 前言 說(shuō)到AJAX就會(huì)不可避免的面臨兩個(gè)問(wèn)題衩椒。 AJAX以何種格式來(lái)交換數(shù)據(jù)蚌父? 第二個(gè)是跨域的需求如何解決?...
    公子七閱讀 23,612評(píng)論 7 67
  • 說(shuō)下我個(gè)人的兩段跳槽經(jīng)歷吧毛萌;工作崗位是網(wǎng)站開(kāi)發(fā)工程師苟弛,4年多來(lái),換過(guò)兩家公司朝聋。 “進(jìn)入社會(huì) - 沒(méi)人在把你當(dāng)小孩”...