摘要:跨域服務器文件代碼本地得到航班信息查詢結果后的回調函數你查詢的航班結果是票價元,余票張。三那么服務器到底做了什么呢說到底,就是拼接字符串。數據接收函數名稱輸出四與的區別是什么和本質上是不同的東西。
一、JSONP的誕生
首先,因為ajax無法跨域,然后開發者就有所思考
其次,開發者發現, 標簽的src屬性是可以跨域的
把跨域服務器寫成 調用本地的函數 ,回調數據回來不就好了?
json剛好被js支持(object)
調用跨域服務器上動態生成的js格式文件(不管是什么類型的地址,最終生成的返回值都是一段js代碼)
這種獲取遠程數據的方式看起來非常像ajax,但其實并不一樣
便于客戶端使用數據,逐漸形成了一種非正式傳輸協議,人們把它稱作JSONP。
傳遞一個callback參數給跨域服務端,然后跨域服務端返回數據時會將這個callback參數作為函數名來包裹住json數據即可。
二、老板,來一斤栗子。
【栗子一】
跨域服務器
文件:remote.js
代碼:
alert("我是遠程文件");
本地
這邊做的就是直接引入一個js,頁面將會彈出一個提示窗體,顯示 我是遠程文件。
【栗子二】
跨域服務器
文件:remote.js
代碼:
localHandler({"result":"我是遠程js帶來的數據"});
本地
這邊做的是
1、本地定義一個函數
2、引入一個js
3、被引入的js里面,調用這個函數頁面將會彈出一個提示窗體。顯示本地函數被跨域的遠程js調用成功,并且還接收到了 我是遠程js帶來的數據。
新問題出現了:讓遠程js知道它應該調用的本地函數叫什么名字呢?畢竟是jsonp的服務者都要面對很多服務對象,而這些服務對象各自的本地函數都不相同?。?/p>
【栗子三】
跨域服務端提供的js腳本動態生成,這樣調用者可以傳一個參數過去告訴跨域服務端“我想要一段調用XXX函數的js代碼,請你返回給我”,于是跨域服務器就可以按照客戶端的需求來生成js腳本并響應了。
跨域服務器
文件:flightResult.php
代碼:
flightHandler({ "code":"CA1998", "price": 1780, "tickets": 5 });
本地
這次我們做的是
1、動態創建腳本
2、url中傳遞了一個code參數,服務器去做查詢CA1998次航班的信息,callback參數告訴服務器,我的本地回調函數叫做flightHandler
3、跨域服務端調用這個函數flightHandler 頁面將會彈出一個提示窗體。把票價、余票以及張數給傳遞回來了。
三、那么服務器到底做了什么呢? 說到底,就是拼接字符串。
// 數據 $data = [ "name":"anonymous66", "age":"18", "like":"jianshu" ]; // 接收callback函數名稱 $callback = $_GET["callback"]; // 輸出 echo $callback . "(" . json_encode($data) . ")";
四、與AJAX的區別是什么?
ajax和jsonp本質上是不同的東西。
ajax的核心是通過XmlHttpRequest獲取非本頁內容
jsonp的核心則是動態添加標簽來調用服務器提供的js腳本。
五、結語
本篇文章是對JSONP的原理掃盲,一般很多開發者會使用卻不知道原理,這在學習和成長的路上不算好事。so,知道jsonp原理,你又可以加50塊工資了。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/86682.html
摘要:因為同源策略的限制,我們不能在與外部服務器進行通信的時候使用。這個是跨域服務器取數據的接口,參數為回調函數的名字,返回的格式為原理首先在客戶端注冊一個然后把的名字傳給服務器。 一、同源策略 同源策略,它是由Netscape提出的一個著名的安全策略,現在所有的可支持javascript的瀏覽器都會使用這個策略。 為什么需要同源策略,這里舉個例子: 假設現在沒有同源策略,會發生什么事...
摘要:是一種協議,為了解決客戶端請求服務器跨域的問題,但是并非是正式的傳輸協議。結果明明請求回來數據,結果還是報錯。是一種使用數據的方式,返回的不是對象,是包含對象的腳本。 1、什么是JSONP 一般來說位于 server1.example.com 的網頁無法與不是 server1.example.com的服務器溝通,而 HTML 的 元素是一個例外。利用 元素的這個開放策略,網頁可以得到...
摘要:因為有同源策略,而在實際開發中又常常會有跨域的需求,早期開發者為了解決跨域問題而搞出來這樣一個頗為奇怪的東西。安全早期的瀏覽器處于安全層面的考量,制定同源策略,限制了一個源中加載文本或腳本與來自其它源中資源的交互方式。 AJAX、JSON、JSONP 在 WEB 開發中,經常見到諸如 AJAX、JSON、JSONP 這些名詞。三者看起來很像,很多同學尤其是沒有系統了解過前端技術體系的同...
閱讀 1120·2021-11-25 09:43
閱讀 1569·2021-10-25 09:47
閱讀 2466·2019-08-30 13:46
閱讀 753·2019-08-29 13:45
閱讀 1280·2019-08-26 13:29
閱讀 2990·2019-08-23 15:30
閱讀 1103·2019-08-23 14:17
閱讀 1326·2019-08-23 13:43