2019獨角獸企業重金招聘Python工程師標準>>>

?

Ajax/XDomainRequest 網絡跨域訪問控制

?

jsonp是一種技術手段而不是一種協議，也不是json數據。

?

<script?type="text/javascript"?>var?jsonp_callback?=?function(responseData){console.log(responseData); }; </script>

這是js部分

同樣使用 iframe或者<script>來訪問

<script?type="text/javascript"?src="http://hostname:[port]/path/test.php?callback=jsonp_callback"></script>

php端代碼

<?phpheader('text/html;charset=utf-8');$clientCallback?=?isset($_GET['callback'])?$_GET['callback']:'';$data?=?array('name'=>'zhangsan','gender'=>'male','age' =>20);//注意，一定要輸出到頁面echo?$clientCallback.'('.json_encode($data).')';?>

測試一下

--------------------------------------------------------------------------------------------

以上方法屬于直接訪問的跨域通信，而在一些應用程序中，使用ajax+jsonp的進行跨域通信.

<script?type="text/javascript"?src="/js/jquery-1.4.1.min.js"></script> <script?type="text/javascript">$(document).ready(function(){$.ajax({url:'http://192.168.121.15/test_json.php',dataType:"jsonp",jsonp:"jsonpcallback",success:function(data){console.log(data);},error:function(data){console.log(data);},headers:?{??//這里的headers是非必須的，可以去掉"Access-Control-Allow-Origin":"http://www.example.com","Access-Control-Allow-Headers":"X-Requested-With",'referece':'?//設置足跡?'Connection':'keep-Alive'?//使用http_1.1}});}); </script>

這里的ajax中使用了jsonp通信，需要設置數據類型 dataType=jsonp,jsonp的回調函數名稱 jsonpcallback,注意，在js中不需要實現jsonpcallback,在jquery中會直接將 success:function(data){...}賦值給jsonpcallback,關于實現代碼如下

//模擬一下哦，其中settings是xhr對象的配置參數 var?_callback?=?settings.success;? url?=?'http://192.168.121.15/test_json.php'+'?'+settings.jsonp+'=_callback';

?

趕快試試吧

轉載于:https://my.oschina.net/ososchina/blog/337404

總結

以上是生活随笔為你收集整理的jsonp+ajax实现浏览器跨域通信的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。