當(dāng)前位置：
首頁(yè) >
前端技术
> javascript
>内容正文
javascript
JSONP简单入门介绍
生活随笔
收集整理的這篇文章主要介紹了
JSONP简单入门介绍
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
一、什么是JSONP？
JSON with padding 是一種數(shù)據(jù)交換的技巧，用于解決主流瀏覽器的跨域數(shù)據(jù)訪問(wèn)的問(wèn)題！二、生產(chǎn)的背景
由于同源策略，一般來(lái)說(shuō)位于A服務(wù)器的網(wǎng)頁(yè)是無(wú)法與其他服務(wù)器上的資源溝通的 而html中的`<script>`是一個(gè)特例，JSONP就是利用`<script>`這個(gè)標(biāo)簽實(shí)例動(dòng)態(tài)地 從其他服務(wù)器獲取資源（一般來(lái)說(shuō)是一些文本內(nèi)容）。三、使用
客戶端JS代碼首先定義一個(gè)回調(diào)函數(shù)，該回調(diào)函數(shù)接收將要被處理的數(shù)據(jù)參數(shù)，參數(shù)個(gè)數(shù)不定。
客戶端HTML代碼嵌入一段<script>引用，src指向服務(wù)器程序的URL，并在URL在給定一個(gè)參數(shù)，它的值就是上面1定義的function名
服務(wù)器端代碼（如PHP）接收到請(qǐng)求，解析參數(shù)取得客戶端中定義的回調(diào)函數(shù)名，并將取得的回調(diào)函數(shù)名當(dāng)作函數(shù)名稱(chēng)與數(shù)據(jù)合并輸出一段 JS調(diào)用函數(shù)的代碼
四、Talk is cheap, Show me the code!
服務(wù)器端程序代碼 jsonp.php （在B機(jī)器）
<?php $func = $_GET['callback']; //這里獲取客戶JS定義的回調(diào)函數(shù)名稱(chēng) $data = 'This is the jsonp data on crossdomain request'; echo "$func('{$data}')"; //這是一段JS代碼客戶端HTML代碼：jsonptest.html（在A機(jī)器上）
<!DOCTYPE html> <html> <head><title>Json test</title> </head> <body> <h1 id="padding-content"></h1> <a href="javascript:;" class="button">json data</a> </body> <script type="text/javascript"> function callbackfunc(data){$("#padding-content").text("callback:"+data); } </script> <script type="text/javascript" src="http://www.B.com/jsonp.php?callback=callbackfunc"></script> </html>打開(kāi)瀏覽器A服務(wù)器上的jsonptest.html 可能看到結(jié)果
callback:This is the jsonp data on crossdomain requestAjax跨域請(qǐng)求：
還是用剛才的服務(wù)器端程序，我們修改一下客戶HTML中的JS代碼，發(fā)起一個(gè)請(qǐng)求
<!DOCTYPE html> <html> <head><title>Json test</title><script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> </head> <body> <h1 id="padding-content"></h1> <a href="javascript:;" class="button">json data</a> </body> <script type="text/javascript"> $(".button").click(function(){$.ajax({url:"http://www.B.com/jsonp.php",dataType:"jsonp",type:"get",jsonpCallback:"testJsonpCallBackFunc",error:function(err, errstr){$("#padding-content").text(errstr);},success:function(resp){$("#padding-content").text(resp);}});}); </script> </html>點(diǎn)擊頁(yè)面的json data，成功在頁(yè)面打印以下內(nèi)容，表示跨域調(diào)用成功
callback:This is the jsonp data on crossdomain request
與50位技術(shù)專(zhuān)家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖總結(jié)
以上是生活随笔為你收集整理的JSONP简单入门介绍的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： iOS MMDrawerControll
- 下一篇： javese 5 中的枚举类及单例模式