一、什么是JSONP?

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

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

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

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

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

三、簡單代碼例子

服務器端：

<?php $obj=array('chicken'=>2,'duck'=>3);//$ob是待傳遞對象 $callback=$_GET['callback'];//獲取傳入的函數(shù)名 if(!$callback){$callback='jsoncallback';//如果沒傳入就使用的默認函數(shù)名 } //輸出一段JS格式的代碼，調(diào)用用傳入的函數(shù)名，參數(shù)為需要傳遞的$obj對象 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){//輸出傳遞過來的對象 document.getElementById('chicken').innerHTML=obj.chicken;document.getElementById('duck').innerHTML=obj.duck; };window.onload=function(){//創(chuàng)建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雖然易于實現(xiàn)，但是也會存在一些安全隱患，如果第三方的腳本隨意地執(zhí)行，那么它就可以篡改頁面內(nèi)容，截獲敏感數(shù)據(jù)。但是在受信任的雙方傳遞數(shù)據(jù)，JSONP是非常合適的選擇。

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

總結(jié)

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

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