json和json跨域

先编写json.php:

<?php
echo json_encode(array(’foo’ => ‘bar’));
?>

再编写json.htm:

<script src=” http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js“></script>
<script>
$.getJSON(’/json.php’, function(data){
alert(data.foo);
});
</script>

把两个文件放到根目录下,运行http://localhost/json.htm,就能看到效果了。

上面的例子没有什么难度,下面尝试一下在跨域情况下的效果,

编写C:/WINDOWS/system32/drivers/etc/hosts文件,加入如下映射:

127.0.0.1 www.foobar.com

修改json.htm的内容:

<script src=” http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js“></script>
<script>
$.getJSON(’http://
www.foobar.com/json.php’, function(data){
alert(data.foo);
});
</script>

此时,重启浏览器后再浏览http://localhost/json.htm,程序不会运行,会出现Permission denied错误。

这是因为由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。

如果想规避跨域问题,可以通过使用html的script标记来进行跨域请求,并在响应中返回要执行的script代码。此技术的一种实际应用方式 被称为JSONP,Remote JSON - JSONP 一文对其原理做了介绍。

先修改json.htm的内容:

<script src=” http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js“></script>
<script>
$.getJSON(’http://
www.foobar.com/json.php?callback=? ‘, function(data){
alert(data.foo);
});
</script>

再修改json.php的内容:

<?php
echo $_GET['callback'], ‘(’, json_encode(array(’foo’ => ‘bar’)), ‘)’ ;
?>

此时,如果再浏览json.htm,就会发现即便是跨域,程序也能正常运行。

有了callback=?后,JQuery就会知道你要进行一次JSONP请求,它会自动生成一个回调函数的名字,然后替换callback=?中 的问号。callback并不是必须的命名规则,而只是客户端和服务端之间的一种约定,比如说在FlickrAPI 里,使用的就不是callback,而是jsoncallback。不管使用什么命名,最 后不过是生成一种function_name(json_data)的调用形式而已。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值