Ajax/XDomainRequest 網絡跨域訪問控制javascript
jsonp是一種技術手段而不是一種協議,也不是json數據。php
<script type="text/javascript" > var jsonp_callback = function(responseData){ console.log(responseData); }; </script>
這是js部分html
一樣使用 iframe或者<script>來訪問java
<script type="text/javascript" src="http://hostname:[port]/path/test.php?callback=jsonp_callback"></script>
php端代碼jquery
<?php header('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
--------------------------------------------------------------------------------------------json
以上方法屬於直接訪問的跨域通訊,而在一些應用程序中,使用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';
趕快試試吧函數