摘要:跨域服務(wù)器文件代碼本地得到航班信息查詢結(jié)果后的回調(diào)函數(shù)你查詢的航班結(jié)果是票價(jià)元,余票張。三那么服務(wù)器到底做了什么呢說(shuō)到底,就是拼接字符串。數(shù)據(jù)接收函數(shù)名稱輸出四與的區(qū)別是什么和本質(zhì)上是不同的東西。
一、JSONP的誕生
首先,因?yàn)?strong>ajax無(wú)法跨域,然后開(kāi)發(fā)者就有所思考
其次,開(kāi)發(fā)者發(fā)現(xiàn), 標(biāo)簽的src屬性是可以跨域的
把跨域服務(wù)器寫(xiě)成 調(diào)用本地的函數(shù) ,回調(diào)數(shù)據(jù)回來(lái)不就好了?
json剛好被js支持(object)
調(diào)用跨域服務(wù)器上動(dòng)態(tài)生成的js格式文件(不管是什么類型的地址,最終生成的返回值都是一段js代碼)
這種獲取遠(yuǎn)程數(shù)據(jù)的方式看起來(lái)非常像ajax,但其實(shí)并不一樣
便于客戶端使用數(shù)據(jù),逐漸形成了一種非正式傳輸協(xié)議,人們把它稱作JSONP。
傳遞一個(gè)callback參數(shù)給跨域服務(wù)端,然后跨域服務(wù)端返回?cái)?shù)據(jù)時(shí)會(huì)將這個(gè)callback參數(shù)作為函數(shù)名來(lái)包裹住json數(shù)據(jù)即可。
二、老板,來(lái)一斤栗子。
【栗子一】
跨域服務(wù)器
文件:remote.js
代碼:
alert("我是遠(yuǎn)程文件");
本地
這邊做的就是直接引入一個(gè)js,頁(yè)面將會(huì)彈出一個(gè)提示窗體,顯示 我是遠(yuǎn)程文件。
【栗子二】
跨域服務(wù)器
文件:remote.js
代碼:
localHandler({"result":"我是遠(yuǎn)程js帶來(lái)的數(shù)據(jù)"});
本地
這邊做的是
1、本地定義一個(gè)函數(shù)
2、引入一個(gè)js
3、被引入的js里面,調(diào)用這個(gè)函數(shù)頁(yè)面將會(huì)彈出一個(gè)提示窗體。顯示本地函數(shù)被跨域的遠(yuǎn)程js調(diào)用成功,并且還接收到了 我是遠(yuǎn)程js帶來(lái)的數(shù)據(jù)。
新問(wèn)題出現(xiàn)了:讓遠(yuǎn)程js知道它應(yīng)該調(diào)用的本地函數(shù)叫什么名字呢?畢竟是jsonp的服務(wù)者都要面對(duì)很多服務(wù)對(duì)象,而這些服務(wù)對(duì)象各自的本地函數(shù)都不相同啊?
【栗子三】
跨域服務(wù)端提供的js腳本動(dòng)態(tài)生成,這樣調(diào)用者可以傳一個(gè)參數(shù)過(guò)去告訴跨域服務(wù)端“我想要一段調(diào)用XXX函數(shù)的js代碼,請(qǐng)你返回給我”,于是跨域服務(wù)器就可以按照客戶端的需求來(lái)生成js腳本并響應(yīng)了。
跨域服務(wù)器
文件:flightResult.php
代碼:
flightHandler({ "code":"CA1998", "price": 1780, "tickets": 5 });
本地
這次我們做的是
1、動(dòng)態(tài)創(chuàng)建腳本
2、url中傳遞了一個(gè)code參數(shù),服務(wù)器去做查詢CA1998次航班的信息,callback參數(shù)告訴服務(wù)器,我的本地回調(diào)函數(shù)叫做flightHandler
3、跨域服務(wù)端調(diào)用這個(gè)函數(shù)flightHandler 頁(yè)面將會(huì)彈出一個(gè)提示窗體。把票價(jià)、余票以及張數(shù)給傳遞回來(lái)了。
三、那么服務(wù)器到底做了什么呢? 說(shuō)到底,就是拼接字符串。
// 數(shù)據(jù) $data = [ "name":"anonymous66", "age":"18", "like":"jianshu" ]; // 接收callback函數(shù)名稱 $callback = $_GET["callback"]; // 輸出 echo $callback . "(" . json_encode($data) . ")";
四、與AJAX的區(qū)別是什么?
ajax和jsonp本質(zhì)上是不同的東西。
ajax的核心是通過(guò)XmlHttpRequest獲取非本頁(yè)內(nèi)容
jsonp的核心則是動(dòng)態(tài)添加標(biāo)簽來(lái)調(diào)用服務(wù)器提供的js腳本。
五、結(jié)語(yǔ)
本篇文章是對(duì)JSONP的原理掃盲,一般很多開(kāi)發(fā)者會(huì)使用卻不知道原理,這在學(xué)習(xí)和成長(zhǎng)的路上不算好事。so,知道jsonp原理,你又可以加50塊工資了。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/86682.html
摘要:是什么說(shuō)實(shí)話,我學(xué)了這么久,其實(shí)也沒(méi)有好好了解這個(gè)東西,當(dāng)然平常自己在前端方面也涉獵較淺。是什么是的一種使用模式,可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問(wèn)的問(wèn)題。有效避免了直接向遠(yuǎn)程服務(wù)器請(qǐng)求數(shù)據(jù) JSONP 是什么 說(shuō)實(shí)話,我學(xué)了這么久,其實(shí)也沒(méi)有好好了解這個(gè)東西,當(dāng)然平常自己在前端方面也涉獵較淺。 1) jsonp 是什么 JSONP(JSON with Padding)是JSON的一...
摘要:是什么說(shuō)實(shí)話,我學(xué)了這么久,其實(shí)也沒(méi)有好好了解這個(gè)東西,當(dāng)然平常自己在前端方面也涉獵較淺。是什么是的一種使用模式,可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問(wèn)的問(wèn)題。有效避免了直接向遠(yuǎn)程服務(wù)器請(qǐng)求數(shù)據(jù) JSONP 是什么 說(shuō)實(shí)話,我學(xué)了這么久,其實(shí)也沒(méi)有好好了解這個(gè)東西,當(dāng)然平常自己在前端方面也涉獵較淺。 1) jsonp 是什么 JSONP(JSON with Padding)是JSON的一...
摘要:因?yàn)橥床呗缘南拗疲覀儾荒茉谂c外部服務(wù)器進(jìn)行通信的時(shí)候使用。這個(gè)是跨域服務(wù)器取數(shù)據(jù)的接口,參數(shù)為回調(diào)函數(shù)的名字,返回的格式為原理首先在客戶端注冊(cè)一個(gè)然后把的名字傳給服務(wù)器。 一、同源策略 同源策略,它是由Netscape提出的一個(gè)著名的安全策略,現(xiàn)在所有的可支持javascript的瀏覽器都會(huì)使用這個(gè)策略。 為什么需要同源策略,這里舉個(gè)例子: 假設(shè)現(xiàn)在沒(méi)有同源策略,會(huì)發(fā)生什么事...
摘要:是一種協(xié)議,為了解決客戶端請(qǐng)求服務(wù)器跨域的問(wèn)題,但是并非是正式的傳輸協(xié)議。結(jié)果明明請(qǐng)求回來(lái)數(shù)據(jù),結(jié)果還是報(bào)錯(cuò)。是一種使用數(shù)據(jù)的方式,返回的不是對(duì)象,是包含對(duì)象的腳本。 1、什么是JSONP 一般來(lái)說(shuō)位于 server1.example.com 的網(wǎng)頁(yè)無(wú)法與不是 server1.example.com的服務(wù)器溝通,而 HTML 的 元素是一個(gè)例外。利用 元素的這個(gè)開(kāi)放策略,網(wǎng)頁(yè)可以得到...
摘要:因?yàn)橛型床呗裕趯?shí)際開(kāi)發(fā)中又常常會(huì)有跨域的需求,早期開(kāi)發(fā)者為了解決跨域問(wèn)題而搞出來(lái)這樣一個(gè)頗為奇怪的東西。安全早期的瀏覽器處于安全層面的考量,制定同源策略,限制了一個(gè)源中加載文本或腳本與來(lái)自其它源中資源的交互方式。 AJAX、JSON、JSONP 在 WEB 開(kāi)發(fā)中,經(jīng)常見(jiàn)到諸如 AJAX、JSON、JSONP 這些名詞。三者看起來(lái)很像,很多同學(xué)尤其是沒(méi)有系統(tǒng)了解過(guò)前端技術(shù)體系的同...
摘要:就這樣被發(fā)明了,利用的屬性不受同源策略的控制,作弊般地巧妙地逃過(guò)了瀏覽器的這一限制。然后,聲明這個(gè)回調(diào)函數(shù)。 這是我在13年初寫(xiě)的文章,當(dāng)時(shí)懵懵懂懂寫(xiě)下了自己對(duì)JSONP的理解。 文章原文 博客 歡迎訂閱 提到JSONP,我當(dāng)時(shí)在網(wǎng)上找了無(wú)數(shù)帖子也沒(méi)有看懂它。那些文章大同小異,都是講到JSONP原理以后就戛然而止,把我們這些初學(xué)者搞得云里霧里。所以,寫(xiě)下這篇文章,希望對(duì)大家有幫助...
閱讀 1152·2021-11-25 09:43
閱讀 1584·2021-10-25 09:47
閱讀 2479·2019-08-30 13:46
閱讀 765·2019-08-29 13:45
閱讀 1293·2019-08-26 13:29
閱讀 3001·2019-08-23 15:30
閱讀 1115·2019-08-23 14:17
閱讀 1336·2019-08-23 13:43