国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

帶你實現(xiàn)一個 JSONP 實例

verano / 1777人閱讀

摘要：前提是的方法名與引入的文件方法名一致。簡單描述就是先定義一個方法，然后引入外部調(diào)用這個方法并攜帶數(shù)據(jù)。

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

什么是JSON？

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

其優(yōu)點是：

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

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

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

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

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ù)。

以上就是對于 JSONP 的簡潔描述，希望對你有幫助。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/97751.html

相關(guān)文章

  • javasscript - 收藏集 - 掘金

    摘要：跨域請求詳解從繁至簡前端掘金什么是為什么要用是的一種使用模式，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題。異步編程入門道典型的面試題前端掘金在界中，開發(fā)人員的需求量一直居高不下。 jsonp 跨域請求詳解——從繁至簡 - 前端 - 掘金什么是jsonp？為什么要用jsonp?JSONP(JSON with Padding)是JSON的一種使用模式，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題...

    Rango 評論0 收藏0

  • 一篇文章帶你了解http/https

    摘要：基礎(chǔ)，超文本傳輸協(xié)議。不驗證通信方的身份，通信方的身份有可能遭遇偽裝。無法證明報文的完整性，報文有可能遭篡改。多路復(fù)用，支持單個連接多次請求，即連接共享，即每一個都是是用作連接共享機制的。 走在前端的大道上 本篇將自己讀過的相關(guān) http/https 方法 文章中，對自己有啟發(fā)的章節(jié)片段總結(jié)在這（會對原文進(jìn)行刪改）,會不斷豐富提煉總結(jié)更新。 Web 基礎(chǔ) HTTP（HyperText...

    2bdenny 評論0 收藏0

  • 原生JavaScript實現(xiàn)AJAX、JSONP

    摘要：在這里講解一下用原生如何實現(xiàn)。當(dāng)然，前面也說過，你可以給定固定回調(diào)函數(shù)名最后我已經(jīng)將和請求合并在一起了，下載鏈接原文鏈接原生實現(xiàn)如有問題，歡迎在下方留言 相信大多數(shù)前端開發(fā)者在需要與后端進(jìn)行數(shù)據(jù)交互時，為了方便快捷，都會選擇JQuery中封裝的AJAX方法，但是有些時候，我們只需要JQuery的AJAX請求方法，而其他的功能用到的很少，這顯然是沒必要的。 其實，原生JavaScript...

    xcc3641 評論0 收藏0

  • fetch使用的常見問題及其解決辦法

    首先聲明一下，本文不是要講解fetch的具體用法，不清楚的可以參考MDN fetch教程。 引言 說道fetch就不得不提XMLHttpRequest了，XHR在發(fā)送web請求時需要開發(fā)者配置相關(guān)請求信息和成功后的回調(diào)，盡管開發(fā)者只關(guān)心請求成功后的業(yè)務(wù)處理，但是也要配置其他繁瑣內(nèi)容，導(dǎo)致配置和調(diào)用比較混亂，也不符合關(guān)注分離的原則；fetch的出現(xiàn)正是為了解決XHR存在的這些問題。例如下面代碼： f...

    pubdreamcc 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<