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