一、什么是JSONP?

百度百科：JSONP(JSON with Padding)是JSON的 一種“使用模式”，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問(wèn)的問(wèn)題。由于同源策略，一般來(lái)說(shuō)位于 server1.example.com 的網(wǎng)頁(yè)無(wú)法與不是 server1.example.com的服務(wù)器溝通，而 HTML 的<script> 元素是一個(gè)例外。利用 <script> 元素的這個(gè)開放策略，網(wǎng)頁(yè)可以得到從其他來(lái)源動(dòng)態(tài)產(chǎn)生的 JSON 資料，而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料并不是 JSON，而是任意的JavaScript，用 JavaScript 直譯器執(zhí)行而不是用 JSON 解析器解析。

二、JSONP的實(shí)現(xiàn)思路很簡(jiǎn)單

1、前端創(chuàng)建script標(biāo)記，設(shè)置src，添加到head中（當(dāng)然也可以往body中添加）。

2, 后臺(tái)返回一個(gè)js變量jsonp，這個(gè)jsonp就是請(qǐng)求后的JSON數(shù)據(jù)。

3, 回調(diào)完成后刪除script標(biāo)記（還有一些清理工作如避免部分瀏覽器內(nèi)存泄露等）。

三、簡(jiǎn)單代碼例子

服務(wù)器端：

<?php $obj=array('chicken'=>2,'duck'=>3);//$ob是待傳遞對(duì)象 $callback=$_GET['callback'];//獲取傳入的函數(shù)名 if(!$callback){$callback='jsoncallback';//如果沒傳入就使用的默認(rèn)函數(shù)名 } //輸出一段JS格式的代碼，調(diào)用用傳入的函數(shù)名，參數(shù)為需要傳遞的$obj對(duì)象 echo "alert('我是小偷，哈哈');".$callback.'('.json_encode($obj).');'; ?>

客戶端：

<div> 雞<span id="chicken"></span>只 <br/> 鴨<span id="duck"></span>只 </div> <script type="text/javascript"> //回調(diào)函數(shù)定義 function mycallback(obj){//輸出傳遞過(guò)來(lái)的對(duì)象 document.getElementById('chicken').innerHTML=obj.chicken;document.getElementById('duck').innerHTML=obj.duck; };window.onload=function(){//創(chuàng)建SCRIPT標(biāo)簽var script=document.createElement("script");//設(shè)置URL script.src="http://127.0.0.1:8081//langtao/steal.php?callback=alert('我是強(qiáng)盜');mycallback";//把標(biāo)簽放入文檔中以便生效 document.body.appendChild(script);document.body.removeChild(script); }; </script><!--<script> $.ajax({ dataType:'jsonp', data:'id=1', jsonp:'callback', url:'http://127.0.0.1:8081//langtao/steal.php', success:function(obj){document.getElementById('chicken').innerHTML=obj.chicken;document.getElementById('duck').innerHTML=obj.duck; }, }); </script>--><!--<script> $.getJSON("http://127.0.0.1:8081//langtao/steal.php?callback=?",function(obj){document.getElementById('chicken').innerHTML=obj.chicken;document.getElementById('duck').innerHTML=obj.duck;} ); </script>-->

?

四、安全問(wèn)題

JSONP雖然易于實(shí)現(xiàn)，但是也會(huì)存在一些安全隱患，如果第三方的腳本隨意地執(zhí)行，那么它就可以篡改頁(yè)面內(nèi)容，截獲敏感數(shù)據(jù)。但是在受信任的雙方傳遞數(shù)據(jù)，JSONP是非常合適的選擇。

轉(zhuǎn)載于:https://www.cnblogs.com/aaron-shu/p/4170304.html

總結(jié)

以上是生活随笔為你收集整理的跨域（三）——JSONP的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。