JSONP原理及應(yīng)用實例詳解

JSONP 被用于跨域獲取數(shù)據(jù)。在講解它之前，先講講它與 JSON 之間的區(qū)別

10多年建站經(jīng)驗，成都網(wǎng)站建設(shè)、網(wǎng)站制作客戶的見證與正確選擇。成都創(chuàng)新互聯(lián)公司提供完善的營銷型網(wǎng)頁建站明細(xì)報價表。后期開發(fā)更加便捷高效，我們致力于追求更美、更快、更規(guī)范。

什么是JSON？

JSON 是一種基于文本的數(shù)據(jù)交換方式，或者叫做數(shù)據(jù)描述格式。

其優(yōu)點是：

1、基于純文本，跨平臺傳遞極其簡單；

2、Javascript 原生支持，后臺語言幾乎全部支持；

3、輕量級數(shù)據(jù)格式，占用字符數(shù)量極少，特別適合互聯(lián)網(wǎng)傳遞；

4、可讀性較強，雖然比不上 XML 那么一目了然，但在合理的依次縮進之后還是很容易識別的；

5、容易編寫和解析，當(dāng)然前提是你要知道數(shù)據(jù)結(jié)構(gòu)；

JSON 的缺點當(dāng)然也有，跨域無法獲取數(shù)據(jù)，而 JSONP 的出現(xiàn)正好彌補了這一缺陷

什么是JSONP？

JSONP 是一種依靠開發(fā)人員的聰明才智創(chuàng)造出的一種非官方跨域數(shù)據(jù)交互協(xié)議，其本質(zhì)就是 js 文件。

JSONP的客戶端具體實現(xiàn)

Web頁面上調(diào)用js文件時不受是否跨域的影響（不僅如此，凡是擁有"src"這個屬性的標(biāo)簽都擁有跨域的能力，比如

// somejsonp.js
localHandler({"result":"我是遠(yuǎn)程js帶來的數(shù)據(jù)"});

3.然后回到 jsonp 文件夾，輸入命令node index.js后，用瀏覽器打開http://localhost:3000即可看到瀏覽器窗口彈出js文件中的result，也就是我們獲取到了js的數(shù)據(jù)。這便是jsonp的基本原理。

動態(tài)獲取 JSONP 的數(shù)據(jù)，就是在頁面中動態(tài)插入一段script標(biāo)簽，scr中包含路徑及參數(shù)，這樣后臺可根據(jù)參數(shù)動態(tài)生成JS文件，涉及后臺實現(xiàn)，這里不做過多闡述。

JSONP 在 JQuery 中的具體實現(xiàn)

jquery 中對于 jsonp 的封裝也是基于以上原理，下面是基于 jquery 的代碼

修改index.html




 
 
 
 Document

jquery 動態(tài)生成script標(biāo)簽，并定義好方法。前提是jsonpCallback的方法名與引入的js文件方法名一致。

重新刷新頁面即可看到彈出框中獲取的 jsonp 中的數(shù)據(jù)。

簡單描述就是——先定義一個方法，然后引入外部JS調(diào)用這個方法并攜帶數(shù)據(jù)。

具體示例

在同源策略下，在某個服務(wù)器下的頁面是無法獲取到該服務(wù)器以外的數(shù)據(jù)的，但img、iframe、script等標(biāo)簽是個例外，這些標(biāo)簽可以通過src屬性請求到其他服務(wù)器上的數(shù)據(jù)。而JSONP就是通過script節(jié)點中的src屬性調(diào)用跨域的請求。當(dāng)我們通過JSONP模式請求跨域資源時，服務(wù)器返回給客戶端一段javascript代碼，這段javascript代碼自動調(diào)用客戶端回調(diào)函數(shù)。

前端



  jsonp

搭建node server

//告訴Node.js引入http模塊給該服務(wù)器應(yīng)用使用
var http = require('http');
//引入url模塊解析url字符串
var url = require('url');
//引入querystring模塊處理query字符串
var querystring = require('querystring');
//創(chuàng)建新的HTTP服務(wù)器
var server = http.createServer();
//通過request事件來響應(yīng)request請求
server.on('request',function(req, res){
  var urlPath = url.parse(req.url).pathname;
  var qs = querystring.parse(req.url.split('?')[1]);
  if(urlPath === '/jsonp' && qs.callback){
    res.writeHead(200,{'Content-Type':'application/json;charset=utf-8'});
    var data = {
      "name": "Monkey"
    };
    data = JSON.stringify(data);
    var callback = qs.callback+'('+data+');';
    res.end(callback);
  }
  else{
    res.writeHead(200, {'Content-Type':'text/html;charset=utf-8'});
    res.end('Hell World\n');
  }
});
//監(jiān)聽8080端口
server.listen('8080');
//用于提示我們服務(wù)器啟動成功
console.log('Server running!');

運行node server之后，在瀏覽器打開上面所寫的html頁面，運行結(jié)果為：

JSONP原理及應(yīng)用實例詳解

以上就是對于 JSONP 的簡潔描述，希望對你有幫助。也希望大家多多支持創(chuàng)新互聯(lián)。

當(dāng)前名稱：JSONP原理及應(yīng)用實例詳解
標(biāo)題網(wǎng)址：http://weahome.cn/article/ijogjs.html

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

JSONP原理及應(yīng)用實例詳解

其他資訊

網(wǎng)站制作

企業(yè)服務(wù)

網(wǎng)站建設(shè)

服務(wù)器托管