jsonp+ajax實現瀏覽器跨域通訊

 

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';

 

趕快試試吧函數

相關文章
相關標籤/搜索