一、JSONP是一种较为规范和通用的解决ajax跨域访问限制的方式

二、ajax跨域访问限制：基于安全的原因，浏览器采用同源策略，其阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档；所谓同源要求域名和端口全部一致，例如 1.example.com 和2.example.com 就非同源，example.com:80 和 example.com:8080 亦非同源。

三、jsonp的原理：带有src属性标签的跨域资源获取能力，在jsonp中通常使用标签，因为标签获取的跨域资源可以使用回调函数直接处理

jsonp的实现：

前端代码:

function callback(data){

console.log(data);

}

后台代码

if(isset($_GET["callback"])){

$server_name = $_SERVER["SERVER_NAME"];

$path = $_SERVER["PHP_SELF"];

$query_string = $_SERVER["QUERY_STRING"];

if($query_string!=""&&$query_string!=null){

$query_paras = explode("&",$query_string);

$query_array = array();

$query_length = count($query_paras);

for($i=0;$i

$paras = explode("=",$query_paras[$i]);

$query_array[$paras[0]]=$paras[1];

}

$data = array("server_name"=>$server_name,"path"=>$path,"query_paras"=>$query_array);

}else{

$data = array("server_name"=>$server_name,"path"=>$path);

}

$callback = $_GET["callback"];

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

后台服务器将需要返回的json数据进行封装，然后并不直接返回json，而是返回一句js代码，

echo $callback . "(" . json_encode($data) . ")";这句代码将返回的json数据调用回调函数直接进行处理

四、zepto实现jsonp

function getData(){

$.ajax({

type: 'GET',url: '//www.homeworksong.sinaapp.com/getUrlInfo.PHP?callback=?',timeout: 300,context: $('tbody'),data: { name: 'Zepto',type:"JSONP" },success: function(data){

console.log(data);

},error: function(xhr,type){

alert('Ajax error!')

}

});

}五、kissy实现jsonp

require(["io","node","util"],function(IO,$,Util){

IO.jsonp("http://www.homeworksong.sinaapp.com/getUrlInfo.PHP",{type:"JSONP",name:"Kissy" },function(data){

console.log(data);

});

});

});

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。