跨域（三）——JSONP

一、什么是JSONP?

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

二、JSONP的實現思路很簡單

1、前端創建script標記，設置src，添加到head中（當然也可以往body中添加）。

2, 后臺返回一個js變量jsonp，這個jsonp就是請求后的JSON數據。

3, 回調完成后刪除script標記（還有一些清理工作如避免部分瀏覽器內存泄露等）。

三、簡單代碼例子

服務器端：

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

客戶端：

<div>
雞<span id="chicken"></span>只
<br/>
鴨<span id="duck"></span>只
</div>
<script type="text/javascript">
//回調函數定義
function mycallback(obj){//輸出傳遞過來的對象
  document.getElementById('chicken').innerHTML=obj.chicken;document.getElementById('duck').innerHTML=obj.duck;
};window.onload=function(){//創建SCRIPT標簽var script=document.createElement("script");//設置URL
  script.src="http://127.0.0.1:8081//langtao/steal.php?callback=alert('我是強盜');mycallback";//把標簽放入文檔中以便生效
  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>-->

?

四、安全問題

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