一、JSONP是一種較為規(guī)范和通用的解決ajax跨域訪問(wèn)限制的方式

二,、ajax跨域訪問(wèn)限制：基于安全的原因,，瀏覽器采用同源策略，其阻止從一個(gè)源加載的文檔或腳本獲取或設(shè)置另一個(gè)源加載的文檔,；所謂同源要求域名和端口全部一致,，例如 1.example.com 和2.example.com 就非同源，example.com:80 和 example.com:8080 亦非同源,。

三,、jsonp的原理：帶有src屬性標(biāo)簽的跨域資源獲取能力，在jsonp中通常使用<script>標(biāo)簽,，因?yàn)?lt;script>標(biāo)簽獲取的跨域資源可以使用回調(diào)函數(shù)直接處理

jsonp的實(shí)現(xiàn)：

前端代碼:

[javascript] view plain copy

1. <script>  
2.             function callback(data){  
3.                 console.log(data);  
4.             }  
5.         </script>  
6.         <script type="text/javascript" src="http://www.remote.com/remote.php?callback=callback"></script>  

后臺(tái)代碼 <www.remote.com/remote.php>

[php] view plain copy

1. if(isset($_GET["callback"])){  
2.         $server_name = $_SERVER["SERVER_NAME"];  
3.         $path = $_SERVER["PHP_SELF"];  
4.         $query_string = $_SERVER["QUERY_STRING"];  
5.         if($query_string!=""&&$query_string!=null){  
6.             $query_paras = explode("&", $query_string);  
7.             $query_array = array();  
8.             $query_length = count($query_paras);  
9.             for($i=0;$i<$query_length;$i++){  
10.                 $paras = explode("=", $query_paras[$i]);  
11.                 $query_array[$paras[0]]=$paras[1];  
12.             }  
13.             $data = array("server_name"=>$server_name,"path"=>$path,"query_paras"=>$query_array);  
14.         }else{  
15.             $data = array("server_name"=>$server_name,"path"=>$path);  
16.         }  
17.         $callback = $_GET["callback"];  
18.         echo $callback . "(" . json_encode($data) . ")";  

[php] view plain copy

1. echo $callback . "(" . json_encode($data) . ")";  

四,、zepto實(shí)現(xiàn)jsonp

[javascript] view plain copy

1. function getData(){  
2.                 $.ajax({  
3.                     type: 'GET',  
4.                     url: '//www.homeworksong.sinaapp.com/getUrlInfo.php?callback=?',  
5.                     timeout: 300,  
6.                     context: $('tbody'),  
7.                     data: { name: 'Zepto',type:"JSONP" },  
8.                     success: function(data){  
9.                       console.log(data);  
10.                     },  
11.                     error: function(xhr, type){  
12.                       alert('Ajax error!')  
13.                     }  
14.                   });  
15.             }  

[javascript] view plain copy

1. require(["io","node","util"],function(IO,$,Util){  
2.     IO.jsonp("http://www.homeworksong.sinaapp.com/getUrlInfo.php",{type:"JSONP",name:"Kissy" },function(data){  
3.         console.log(data);  
4.         });  
5.     });  
6. });