2. 程式人生 > >說說JSONP

說說JSONP

阿新 • • 發佈：2018-12-13
除了 遠程服務器 try .html 還需 怎麽 .com 老師 url

原文地址：http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jQuery.html

一、前言：

說到AJAX就會不可避免的面臨兩個問題，第一個是AJAX以何種格式來交換數據？第二個是跨域的需求如何解決？這兩個問題目前都有不同的解決方案，比如數據可以用自定義字符串、XML、JSON等等來描述，跨域可以通過服務器端代理（如用nginx）、JSONP、添加允許跨域的響應頭（即跨域資源共享CORS）這三種方式來解決。其中JSONP就是本文將要講述的內容。
JSON和JSONP雖然只有一個字母的差別，但其實他們根本不是一回事兒：JSON是一種數據交換格式，而JSONP是一種依靠開發人員的聰明才智創造出的一種非官方跨域數據交互協議。我們拿最近比較火的諜戰片來打個比方，JSON是地下黨們用來書寫和交換情報的“暗號”，而JSONP則是把用暗號書寫的情報傳遞給自己同誌時使用的接頭方式。看到沒？一個是描述信息的格式，一個是信息傳遞雙方約定的方法。
既然隨便聊聊，那我們就不再采用教條的方式來講述，而是把關註重心放在幫助開發人員理解是否應當選擇使用以及如何使用上。

二、什麽是JSON？

前面簡單說了一下，JSON是一種基於文本的數據交換方式，或者叫做數據描述格式，你是否該選用他首先肯定要關註它所擁有的優點。
JSON的優點：
1、基於純文本，跨平臺傳遞極其簡單；
2、Javascript原生支持，後臺語言幾乎全部支持；
3、輕量級數據格式，占用字符數量極少，特別適合互聯網傳遞；
4、可讀性較強，雖然比不上XML那麽一目了然，但在合理的依次縮進之後還是很容易識別的；
5、容易編寫和解析，當然前提是你要知道數據結構；
JSON的缺點當然也有，但在作者看來實在是無關緊要的東西，所以不再單獨說明。

JSON的格式或者叫規則：
JSON能夠以非常簡單的方式來描述數據結構，XML能做的它都能做，因此在跨平臺方面兩者完全不分伯仲。
1、JSON只有兩種數據類型描述符，大括號{}和方括號[]，其余英文冒號:是映射符，英文逗號,是分隔符，英文雙引號”“是定義符。
2、大括號{}用來描述一組“不同類型的無序鍵值對集合”（每個鍵值對可以理解為OOP的屬性描述），方括號[]用來描述一組“相同類型的有序數據集合”（可對應OOP的數組）。
3、上述兩種集合中若有多個子項，則通過英文逗號,進行分隔。
4、鍵值對以英文冒號:進行分隔，並且建議鍵名都加上英文雙引號”“，以便於不同語言的解析。
5、JSON內部常用數據類型無非就是字符串、數字、布爾、日期、null 這麽幾個，字符串必須用雙引號引起來，其余的都不用，日期類型比較特殊，這裏就不展開講述了，只是建議如果客戶端沒有按日期排序功能需求的話，那麽把日期時間直接作為字符串傳遞就好，可以省去很多麻煩。

JSON實例：

// 描述一個人
var person = {
    "Name": "Bob",
    "Age": 32,
    "Company": "IBM",
    "Engineer": true
}
// 獲取這個人的信息
var personAge = person.Age;
// 描述幾個人
var members = [
    {
        "Name": "Bob",
        "Age": 32,
        "Company": "IBM",
        "Engineer": true
    },
    {
        "Name": "John"
 
,
        "Age": 20,
        "Company": "Oracle",
        "Engineer": false
    },
    {
        "Name": "Henry",
        "Age": 45,
        "Company": "Microsoft",
        "Engineer": false
    }
]
// 讀取其中John的公司名稱
var johnsCompany = members[1].Company;
// 描述一次會議
var conference = {
    "Conference": "Future Marketing",
    "Date": "2012-6-1",
    "Address": "Beijing",
    "Members": 
    [
        {
            "Name": "Bob",
            "Age": 32,
            "Company": "IBM",
            "Engineer": true
        },
        {
            "Name": "John",
            "Age": 20,
            "Company": "Oracle",
            "Engineer": false
        },
        {
            "Name": "Henry",
            "Age": 45,
            "Company": "Microsoft",
            "Engineer": false
        }
    ]
}
// 讀取參會者Henry是否工程師
var henryIsAnEngineer = conference.Members[2].Engineer;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61

關於JSON，就說這麽多，更多細節請在開發過程中查閱資料深入學習。

三、什麽是JSONP？

先說說JSONP是怎麽產生的：
其實網上關於JSONP的講解有很多，但卻千篇一律，而且雲裏霧裏，對於很多剛接觸的人來講理解起來有些困難，小可不才，試著用自己的方式來闡釋一下這個問題，看看是否有幫助。
1、一個眾所周知的問題，Ajax直接請求普通文件存在跨域無權限訪問的問題，甭管你是靜態頁面、動態網頁、web服務、WCF，只要是跨域請求，一律不準；
2、不過我們又發現，Web頁面上調用js文件時則不受是否跨域的影響（不僅如此，我們還發現凡是擁有”src”這個屬性的標簽都擁有跨域的能力，比如script、img、iframe）；
3、於是可以判斷，當前階段如果想通過純web端（ActiveX控件、服務端代理、屬於未來的HTML5之Websocket等方式不算）跨域訪問數據就只有一種可能，那就是在遠程服務器上設法把數據裝進js格式的文件裏，供客戶端調用和進一步處理；
4、恰巧我們已經知道有一種叫做JSON的純字符數據格式可以簡潔的描述復雜數據，更妙的是JSON還被js原生支持，所以在客戶端幾乎可以隨心所欲的處理這種格式的數據；
5、這樣子解決方案就呼之欲出了，web客戶端通過與調用腳本一模一樣的方式，來調用跨域服務器上動態生成的js格式文件（一般以JSON為後綴），顯而易見，服務器之所以要動態生成JSON文件，目的就在於把客戶端需要的數據裝入進去。
6、客戶端在對JSON文件調用成功之後，也就獲得了自己所需的數據，剩下的就是按照自己需求進行處理和展現了，這種獲取遠程數據的方式看起來非常像AJAX，但其實並不一樣。
7、為了便於客戶端使用數據，逐漸形成了一種非正式傳輸協議，人們把它稱作JSONP，該協議的一個要點就是允許用戶傳遞一個callback參數給服務端，然後服務端返回數據時會將這個callback參數作為函數名來包裹住JSON數據，這樣客戶端就可以隨意定制自己的函數來自動處理返回數據了。
如果對於callback參數如何使用還有些模糊的話，我們後面會有具體的實例來講解。

JSONP的客戶端具體實現：
不管jQuery也好，extjs也罷，又或者是其他支持jsonp的框架，他們幕後所做的工作都是一樣的，下面我來循序漸進的說明一下jsonp在客戶端的實現：
1、我們知道，哪怕跨域js文件中的代碼（當然指符合web腳本安全策略的），web頁面也是可以無條件執行的。
遠程服務器remoteserver.com根目錄下有個remote.js文件代碼如下：

alert(‘我是遠程文件‘);
  • 1

本地服務器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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

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

2、現在我們在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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

remote.js文件代碼如下：

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

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

3、聰明的開發者很容易想到，只要服務端提供的js腳本是動態生成的就行了唄，這樣調用者可以傳一個參數過去告訴服務端“我想要一段調用XXX函數的js代碼，請你返回給我”，於是服務器就可以按照客戶端的需求來生成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 flightHandler = function(data){
        alert(‘你查詢的航班結果是：票價 ‘ + data.price + ‘ 元，‘ + ‘余票 ‘ + data.tickets + ‘ 張。‘);
    };
    // 提供jsonp服務的url地址（不管是什麽類型的地址，最終生成的返回值都是一段javascript代碼）
    var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
    // 創建script標簽，設置其屬性
    var script = document.createElement(‘script‘);
    script.setAttribute(‘src‘, url);
    // 把script標簽加入head，此時調用開始
    document.getElementsByTagName(‘head‘)[0].appendChild(script); 
    </script>
</head>
<body>

</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

這次的代碼變化比較大，不再直接把遠程js文件寫死，而是編碼實現動態查詢，而這也正是jsonp客戶端實現的核心部分，本例中的重點也就在於如何完成jsonp調用的全過程。
我們看到調用的url中傳遞了一個code參數，告訴服務器我要查的是CA1998次航班的信息，而callback參數則告訴服務器，我的本地回調函數叫做flightHandler，所以請把查詢結果傳入這個函數中進行調用。
OK，服務器很聰明，這個叫做flightResult.aspx的頁面生成了一段這樣的代碼提供給jsonp.html（服務端的實現這裏就不演示了，與你選用的語言無關，說到底就是拼接字符串）：

flightHandler({
    "code": "CA1998",
    "price": 1780,
    "tickets": 5
});
  • 1
  • 2
  • 3
  • 4
  • 5

我們看到，傳遞給flightHandler函數的是一個json，它描述了航班的基本信息。運行一下頁面，成功彈出提示窗口，jsonp的執行全過程順利完成！

4、到這裏為止的話，相信你已經能夠理解jsonp的客戶端實現原理了吧？剩下的就是如何把代碼封裝一下，以便於與用戶界面交互，從而實現多次和重復調用。
什麽？你用的是jQuery，想知道jQuery如何實現jsonp調用？好吧，那我就好人做到底，再給你一段jQuery使用jsonp的代碼（我們依然沿用上面那個航班信息查詢的例子，假定返回jsonp結果不變）：

<!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>Untitled Page</title>
      <script type="text/javascript" src=jquery.min.js"></script>
      <script type="text/javascript">
     jQuery(document).ready(function(){ 
        $.ajax({
             type: "get",
             async: false,
             url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
             dataType: "jsonp",
             jsonp: "callback",//傳遞給請求處理程序或頁面的，用以獲得jsonp回調函數名的參數名(一般默認為:callback)
             jsonpCallback:"flightHandler",//自定義的jsonp回調函數名稱，默認為jQuery自動生成的隨機函數名，也可以寫"?"，jQuery會自動為你處理數據
             success: function(json){
                 alert(‘您查詢到航班信息：票價： ‘ + json.price + ‘ 元，余票： ‘ + json.tickets + ‘ 張。‘);
             },
             error: function(){
                 alert(‘fail‘);
             }
         });
     });
     </script>
     </head>
  <body>
  </body>
 </html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

是不是有點奇怪？為什麽我這次沒有寫flightHandler這個函數呢？而且竟然也運行成功了！哈哈，這就是jQuery的功勞了，jquery在處理jsonp類型的ajax時（還是忍不住吐槽，雖然jquery也把jsonp歸入了ajax，但其實它們真的不是一回事兒），自動幫你生成回調函數並把數據取出來供success屬性方法來調用，是不是很爽呀？

ajax與jsonp的異同的補充說明：
1、ajax和jsonp這兩種技術在調用方式上“看起來”很像，目的也一樣，都是請求一個url，然後把服務器返回的數據進行處理，因此jquery和ext等框架都把jsonp作為ajax的一種形式進行了封裝；
2、但ajax和jsonp其實本質上是不同的東西。ajax的核心是通過XmlHttpRequest獲取非本頁內容，而jsonp的核心則是動態添加script標簽來調用服務器提供的js腳本。
3、所以說，其實ajax與jsonp的區別不在於是否跨域，ajax通過服務端代理一樣可以實現跨域，jsonp本身也不排斥同域的數據的獲取。
4、還有就是，jsonp是一種方式或者說非強制性協議，如同ajax一樣，它也不一定非要用json格式來傳遞數據，如果你願意，字符串都行，只不過這樣不利於用jsonp提供公開服務。
總而言之，jsonp不是ajax的一個特例，哪怕jquery等巨頭把jsonp封裝進了ajax，也不能改變著一點！

四、後端返回JSONP數據

通過上述描述可以知道，若想實現JSONP，除了前端部分之外，還需要後端的配合，後端需返回符合JSONP要求的數據。
比如java可以這樣寫：

Map<String,String> map = new HashMap<String,String>();   
map.put("result", "content");  
String resultJSON = JSONObject.toJSONString(map);
try {       
PrintWriter out = response.getWriter();       
String jsonpCallback = request.getParameter("jsonpCallback");//回調函數
out.println(jsonpCallback+"("+resultJSON+")");//返回jsonp格式數據 ，要用callback包裝下
out.flush();  
out.close();  
} catch (Exception e) {
e.printStackTrace();
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

再分享一下我老師大神的人工智能教程吧。零基礎！通俗易懂！風趣幽默！希望你也加入到我們人工智能的隊伍中來！http://www.captainbed.net

說說JSONP

相關推薦

跨域問題解決方式(HttpClient安全跨域 &amp; jsonp跨域)

str 輕量 mov fontsize 使用 col utf8 des conn 1 錯誤場景 今天要把項目部署到外網的時候,出現了這種問題, 我把兩個項目放到自己本機的

JSONP詳解

tran padding 告訴 cati 你是 傳遞 控件 來源 交互 什麽是JSONP? JSONP(JSON with Padding)是JSON的一種“使用模式”，可用於解決主流瀏覽器的跨域數據訪問的問題。由於同源策略，一般來說位於 server1.example.c

flask+jsonp跨域前後臺交互（接口初體驗）

script keys 返回 == 方法 png 前後臺 true run 1 # -*- coding: utf-8 -*- 2 from flask import Flask, jsonify 3 import psutil, time,json 4 5

JSONP實現Ajax跨域

images cnblogs log 方式 clas 一個 nbsp submit har 同源策略，它是由Netscape提出的一個著名的安全策略。 現在所有支持JavaScript 的瀏覽器都會使用這個策略。 所謂同源是指，域名，協議，端口相同。 當一個瀏覽器的兩個ta

json和jsonp

窗口 itl element 服務器 本地服務 設置 定義 鍵值 png json：一種數據交換的格式。 jsonp：一種依靠開發人員的聰明才智創造出的一種非官方跨域數據交互協議。 形象點說，以諜戰片來打個比方，JSON是地下黨們用來書寫和交換情報的“暗號”，而JSONP則

Jsonp

post class state 發送請求 pca 定義 json -- get 在需要訪問不同域的接口的數據的時候，一般有兩種方式: 第一種:使用requests模塊,在業務邏輯中直接訪問別的域的接口，獲取數據,然後將返回的數據顯示到前端頁面上; 這個

跨域問題相關知識詳解（原生js和jquery兩種方法實現jsonp跨域）

syn con 加載 developer 兩種方法 ray exe 編寫 分組 1、同源策略 同源策略（Same origin policy），它是由Netscape提出的一個著名的安全策略。同源策略是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽

AJAX 跨域請求 - JSONP獲取JSON數據

tel -name 跨域訪問 服務器 utf pen domain nbsp XML 1、什麽是JSONP？ 　　JSONP(JSON with Padding)是一個非官方的協議，它允許在服務器端集成Script tags返回至客戶端，通過javascript callb

JQuery+ajax+jsonp 跨域訪問

url .text java jquery rip getjson round show ajax <html> <head> <meta http-equiv="Content-Type" content="text/html; c

原生封裝Jsonp

callback tag dom 方便 三方 r script 清除 原生 跨域 大家好!我們又見面了,昨天我們講了一下jQuery的表單驗證插件,今天我們來說一下Jsonp. 我們平常做的頁面大部分的數據其實都是從後臺獲取過來的,最常用的方法就是Ajax,但是Ajax不能

封裝jsonp

pan 目的 lba onload back ack osc 創建 瀏覽器 jsonp的原理： 　　　　就是利用<script>標簽沒有跨域的“漏洞”來達到與第三方通訊的目的，當需要通訊時，本站腳本創建一個script標簽，地址指向第三方API 　　地址並提供一

JSONP - 從理論到實踐

func scrip 新聞 用戶 image setattr str 發生 data 同源策略 ajax之所以需要“跨域”，罪魁禍首就是瀏覽器的同源策略。即，一個頁面的ajax只能獲取這個頁面相同源或者相同域的數據。 如何叫“同源”或者“同域”呢？——協議、域名、端口號都必

利用jsonp實現跨域請求

get p地址 doc ajax請求 -s tar 原理 安全策略 都是 　　同源策略，它是由Netscape提出的一個著名的安全策略。現在所有支持JavaScript 的瀏覽器都會使用這個策略。所謂同源是指，域名，協議，端口相同。當一個瀏覽器的兩個tab頁中分別打開來 百

jQuery 使用 JSONP

true stat llb innerhtml lib head blog nbsp htm <script type="text/javascript"> function callbackFunction(result, methodName) {

基於promise和script標簽的jsonp

ons true brush pro highlight dex class head res function Jsonp(url){ var url=url.indexOf(‘?‘)>-1?url+"&callback=callback":url+

jsonp 動態創建script

baidu 哪裏 fun rtb window 動態創建 chan read complete function loadScript(url, func) { var head = document.head || document.getElementByTagNa

JSON/JSONP淺談

sre 字符串 json字符串 數組 var 輕量 name times 例如 一、什麽是JSON? JSON 即 JavaScript Object Notation 的縮寫,簡而言之就是JS對象的表示方法,是一種輕量級的數據交換格式。 JSON 是存

jsonp的原理和實現

pty 方法 www 三方庫 .get 設定 部分 nbsp blog 什麽是JSONP？ javascript高級程序設計中是這樣介紹jsonp的: jsonp是JSON with padding(填充式JSON或參數式JSON )的簡寫，是應用JSON的一種新方法，在

node實現jsonp跨域

text con 跨域 require test eof file jsonp跨域 data 1. 搭建node server //引入模塊 var http=require("http"); var fs=require("fs");var url = require

Vue中使用jsonp進行跨域請求

集成 ret return axios 微信公眾 接口 erro jsonp export Vue-resouse中可以通過this.$http.jsonp的方式直接使用jsonp進行跨域請求。官方在推薦使用axios之後，axios並沒有集成jsonp。但在axios的g