jsonp 跨域通信的实现
在js中,让 s1.example.com (s1) 可以于 s2.example.com (s2) 通信
js跨域发送消息是没有权限的,也没有办法从其他域名获取返回的数据
如: (在 s1 下)
这是一个典型的客户端ajax请求,并且以get方式发送了一个id=10的参数到服务器
服务器返回的result结构 {type:'error/success'}
这里是无法将数据发送的该服务器的, 也无法从服务器获取返回数据,因为无法和服务器通信
注意:
s1 中的 <script src=" http://s2.example.com/code.js"></script> 是可以获取到src属性指向的文件的数据
通过这点就可以获取到 http://s2.example.com/get_data 中的数据, 但获取到的数据是成为了js代码的一部分, 可以当成js代码执行;
就可以调用我们已经定义好了函数,把参数传递给该函数就相当于获取到了服务器返回的数据, 所以请求只能是get方式, 因为src的是get行为;
<script src=" http://s2.example.com/get_data?id=10"></script>
js跨域发送消息是没有权限的,也没有办法从其他域名获取返回的数据
如: (在 s1 下)
$.ajax({
url:
'http://s2.example.com/get_data',
type:
'get',
data:{id:
10},
dataType:
'json',
success:
function(
result){
alert(result.type);
}
});
服务器返回的result结构 {type:'error/success'}
这里是无法将数据发送的该服务器的, 也无法从服务器获取返回数据,因为无法和服务器通信
注意:
s1 中的 <script src=" http://s2.example.com/code.js"></script> 是可以获取到src属性指向的文件的数据
通过这点就可以获取到 http://s2.example.com/get_data 中的数据, 但获取到的数据是成为了js代码的一部分, 可以当成js代码执行;
就可以调用我们已经定义好了函数,把参数传递给该函数就相当于获取到了服务器返回的数据, 所以请求只能是get方式, 因为src的是get行为;
<script src=" http://s2.example.com/get_data?id=10"></script>
举例:
s1:
<script type="text/javascript">
// 返回值处理函数
function handler(response){
alert(response);
}
// 方式一
$('#XXX').click(function(){
var $script = $('<scr' + 'ipt src=" http://s2.example.com/server?id=10 "></scr' + 'ipt>');
$script.appendTo( $('body') );
});
</script>
s2:php服务器语言: server();
public function server(){
if( isset($_GET['id']) ){
$id = $_GET['id'];
}
echo('handler("您发送的id='. $id .'");');
}
结果:
s1 的页面中会弹出结果:
"您发送的id=10"
利用jsonp更方便:
s1:
<script type="text/javascript">
$('#control_ID').click(function(){
$.ajax({
url:' http://s2.example.com/server?callback= ?', // callback=? 问号部分会被 jsonpCallback 属性值代替
data:{id:10},
type:'GET',
dataType:'jsonp', // dataType = jsonp 返回的数据会被当作js代码的一部分
jsonpCallback:'handler', // jsonpCallback = handler 设置客户端会被执行的函数名称,会被发送到服务器
success:function(response){
alert('success: ' + response); // 这里也可以获取到handler()函数的参数值
}
});
});
function handler(response){
alert(response);
}
</script>
s2:
public function server(){
$id = $_GET['id'];
$callback = $_GET['callbck'];
$arg = '你提交的id=' . $id;
echo($callback . '("'. $arg .'");'); // 不管怎么样,服务器端返回的都是 function_name(arg); 这样的格式
}
s1:
<script type="text/javascript">
// 返回值处理函数
function handler(response){
alert(response);
}
// 方式一
$('#XXX').click(function(){
var $script = $('<scr' + 'ipt src=" http://s2.example.com/server?id=10 "></scr' + 'ipt>');
$script.appendTo( $('body') );
});
</script>
s2:php服务器语言: server();
public function server(){
if( isset($_GET['id']) ){
$id = $_GET['id'];
}
echo('handler("您发送的id='. $id .'");');
}
结果:
s1 的页面中会弹出结果:
"您发送的id=10"
利用jsonp更方便:
s1:
<script type="text/javascript">
$('#control_ID').click(function(){
$.ajax({
url:' http://s2.example.com/server?callback= ?', // callback=? 问号部分会被 jsonpCallback 属性值代替
data:{id:10},
type:'GET',
dataType:'jsonp', // dataType = jsonp 返回的数据会被当作js代码的一部分
jsonpCallback:'handler', // jsonpCallback = handler 设置客户端会被执行的函数名称,会被发送到服务器
success:function(response){
alert('success: ' + response); // 这里也可以获取到handler()函数的参数值
}
});
});
function handler(response){
alert(response);
}
</script>
s2:
public function server(){
$id = $_GET['id'];
$callback = $_GET['callbck'];
$arg = '你提交的id=' . $id;
echo($callback . '("'. $arg .'");'); // 不管怎么样,服务器端返回的都是 function_name(arg); 这样的格式
}