JSONP詳解

時間 2019-11-17

標籤 jsonp 詳解欄目 JSON 简体版

原文原文鏈接

什麼是JSONP?

JSONP(JSON with Padding)是JSON的一種「使用模式」，可用於解決主流瀏覽器的跨域數據訪問的問題。因爲同源策略，通常來講位於 server1.example.com 的網頁沒法與不是 server1.example.com的服務器溝通，而 HTML 的<script> 元素是一個例外。利用 <script> 元素的這個開放策略，網頁能夠獲得從其餘來源動態產生的 JSON 資料，而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料並非 JSON，而是任意的JavaScript，用 JavaScript 直譯器執行而不是用 JSON 解析器解析。javascript

JSON(JavaScript Object Notation)和JSONP(JSON with Padding)雖然只有一個字母的差異，但其實他們根本不是一回事兒：JSON是一種數據交換格式，而JSONP是一種依靠開發人員的聰明才智創造出的一種非官方跨域數據交互協議。咱們拿最近比較火的諜戰片來打個比方，JSON是地下黨們用來書寫和交換情報的「暗號」，而JSONP則是把用暗號書寫的情報傳遞給本身同志時使用的接頭方式。看到沒？一個是描述信息的格式，一個是信息傳遞雙方約定的方法。php

先說說JSONP是怎麼產生的：html

一、一個衆所周知的問題，Ajax直接請求普通文件存在跨域無權限訪問的問題，甭管你是靜態頁面、動態網頁、web服務、WCF，只要是跨域請求，一概不許；java

　　二、不過咱們又發現，Web頁面上調用js文件時則不受是否跨域的影響（不只如此，咱們還發現凡是擁有」src」這個屬性的標籤都擁有跨域的能力，好比<script>、<img>、<iframe>）；web

　　三、因而能夠判斷，當前階段若是想經過純web端（ActiveX控件、服務端代理、屬於將來的HTML5之Websocket等方式不算）跨域訪問數據就只有一種可能，那就是在遠程服務器上設法把數據裝進js格式的文件裏，供客戶端調用和進一步處理；ajax

　　四、恰巧咱們已經知道有一種叫作JSON的純字符數據格式能夠簡潔的描述複雜數據，更妙的是JSON還被js原生支持，因此在客戶端幾乎能夠爲所欲爲的處理這種格式的數據；json

　　五、這樣子解決方案就呼之欲出了，web客戶端經過與調用腳本如出一轍的方式，來調用跨域服務器上動態生成的js格式文件（通常以JSON爲後綴），顯而易見，服務器之因此要動態生成JSON文件，目的就在於把客戶端須要的數據裝入進去。跨域

　　六、客戶端在對JSON文件調用成功以後，也就得到了本身所需的數據，剩下的就是按照本身需求進行處理和展示了，這種獲取遠程數據的方式看起來很是像AJAX，但其實並不同。瀏覽器

　　七、爲了便於客戶端使用數據，逐漸造成了一種非正式傳輸協議，人們把它稱做JSONP，該協議的一個要點就是容許用戶傳遞一個callback參數給服務端，而後服務端返回數據時會將這個callback參數做爲函數名來包裹住JSON數據，這樣客戶端就能夠隨意定製本身的函數來自動處理返回數據了。安全

　　若是對於callback參數如何使用還有些模糊的話，咱們後面會有具體的實例來說解。

　　JSONP的客戶端具體實現：

　　無論jQuery也好，ExtJs也罷，又或者是其餘支持jsonp的框架，他們幕後所作的工做都是同樣的，下面我來按部就班的說明一下jsonp在客戶端的實現：

　　一、咱們知道，哪怕跨域js文件中的代碼（固然指符合web腳本安全策略的），web頁面也是能夠無條件執行的。

　　遠程服務器remoteserver.com根目錄下有個remote.js文件代碼以下：

 
         alert( 
         '我是遠程文件' 
         );

　　本地服務器localserver.com下有個jsonp.html頁面代碼以下：

<!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" src="http://remoteserver.com/remote.js"></script>
</head>
<body>
 
</body>
</html>

毫無疑問，頁面將會彈出一個提示窗體，顯示跨域調用成功。

　　二、如今咱們在jsonp.html頁面定義一個函數，而後在遠程remote.js中傳入數據進行調用。

　　jsonp.html頁面代碼以下：

 
         <!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" 
         > 
        
         var  
         localHandler = function(data){ 
        
         alert( 
         '我是本地函數，能夠被跨域的remote.js文件調用，遠程js帶來的數據是：'  
         + data.result); 
        
         }; 
        
         </script> 
        
         <script type= 
         "text/javascript"  
         src= 
         "http://remoteserver.com/remote.js" 
         ></script> 
        
         </head> 
        
         <body> 
        
         </body> 
        
         </html>

　　remote.js文件代碼以下：

 
         localHandler({ 
         "result" 
         : 
         "我是遠程js帶來的數據" 
         });

運行以後查看結果，頁面成功彈出提示窗口，顯示本地函數被跨域的遠程js調用成功，而且還接收到了遠程js帶來的數據。很欣喜，跨域遠程獲取數據的目的基本實現了，可是又一個問題出現了，我怎麼讓遠程js知道它應該調用的本地函數叫什麼名字呢？畢竟是jsonp的服務者都要面對不少服務對象，而這些服務對象各自的本地函數都不相同啊？咱們接着往下看。

　　三、聰明的開發者很容易想到，只要服務端提供的js腳本是動態生成的就好了唄，這樣調用者能夠經過url鏈傳遞一個參數過去，形式像這樣?callback=functionName,告訴服務端「我想要一段調用functionName函數的js代碼，請你返回給我」，以PHP爲例，服務器就能夠按照客戶端的需求來生成形如_GET['callback'](服務端要提供的JSON數據)的響應了。

jsonp.php代碼以下:

 
         <?php 
        
         header( 
         'Content-type: application/json' 
         ); 
        
         //獲取回調函數名 
        
         $jsoncallback  
         = htmlspecialchars( 
         $_REQUEST  
         [ 
         'jsoncallback' 
         ]); 
        
         //json數據 
        
         $json_data  
         =  
         '["customername1","customername2"]' 
         ; 
        
         //輸出jsonp格式的數據 
        
         echo  
         $jsoncallback  
         .  
         "("  
         .  
         $json_data  
         .  
         ")" 
         ; 
        
         ?>

　客戶端代碼以下:

 
         <! 
         DOCTYPE  
         html> 
        
         < 
         html 
         > 
        
         < 
         head 
         > 
        
         < 
         meta  
         charset="utf-8"> 
        
         < 
         title 
         >JSONP 實例</ 
         title 
         > 
        
         </ 
         head 
         > 
        
         < 
         body 
         > 
        
         < 
         div  
         id="divCustomers"></ 
         div 
         > 
        
         < 
         script  
         type="text/javascript"> 
        
         function callbackFunction(result, methodName) 
        
         { 
        
         var html = '< 
         ul 
         >'; 
        
         for(var i = 0; i <  
         result.length 
         ; i++) 
        
         { 
        
         html += '<li>' + result[i] + '</ 
         li 
         >'; 
        
         } 
        
         html += '</ 
         ul 
         >'; 
        
         document.getElementById('divCustomers').innerHTML = html; 
        
         } 
        
         </ 
         script 
         > 
        
         < 
         script  
         type="text/javascript" src="http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></ 
         script 
         > 
        
         </ 
         body 
         > 
        
         </ 
         html 
         >

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。