欢迎访问 生活随笔!

尊龙游戏旗舰厅官网

当前位置: 尊龙游戏旗舰厅官网 > 前端技术 > javascript >内容正文

javascript

转: ajax跨域之jsonp -尊龙游戏旗舰厅官网

发布时间:2025/1/21 javascript 20 豆豆
尊龙游戏旗舰厅官网 收集整理的这篇文章主要介绍了 转: ajax跨域之jsonp 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

事件背景:

某个站点分为静态产品介绍页面(或由于某原因需要静态化),和一个独立的在线应用程序。静态产品页面属于www.a.com下,而在线应用程序作为一个相对独立的系统存在于app.a.com上。

在www.a.com上需要显示在线应用程序(app.a.com)中用户的登录状态及简单的用户信息。由于需要实时的在静态页面中显示用户登录状态,在线应用程序提供了一个用户接口来输出当前用户的登录信息,静态页面采用ajax方式动态获取。

问题在于www.a.com和app.a.com分属于不同子域,无法通过ajax直接进行通信。~~通信协议 域名 端口号都相同才认为是同源

思路分析:

由于同源策略的限制,xmlhttprequest只允许请求当前源(包含域名、协议、端口)的资源。

如众周知,script标签经常被用来加载不同域下的资源,例如在www.a.com可以使用http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js这个js文件,可以绕过同源策略。~~~script标签可以不受同源策略限制,加载不同域下的资源

同样的,可以通过使用script标签来进行跨域请求,但是怎么获取异域源返回的数据呢?

有这样一种方式:如果请求的这个远程数据本身就是一段可执行的js,那么这些js会被执行(相当于eval)即,若在www.a.com中存在一个showuserstatus()的js函数,它的作用是在www.a.com显示当前用户状态,只要给它传递当前用户的状态数据就可以了。那么利用script标签请求的app.a.com中,输出数据为:showuserstatus(data),那么将会执行www.a.com中的showuserstatus(),用户当前的状态就在静态页面上显示了。

使用json来传递javascript对象是一种最简单的方式了,这样的跨域通讯方式称为jsonp。

尊龙游戏旗舰厅官网的解决方案:

1. 静态页面上的js:

2. 远程php接口:

$get = $_get; $rtdata = array('uid' => 10000,'name' => 'zhangsf','txt' => 'welcome zhangsanfeng', );// 获取传递来的函数名,并拼凑完整的函数执行体 echo $get['callback'] .'('. json_encode($rtdata) .')';

这里输出的格式为:

showuserstatus({"uid":10000,"name":"zhangsf","txt":"welcome zhangsanfeng"})

可以看出,输出的是一个可执行的js函数体。

总结:

需要注意的是:jsonp实际上是一种脚本注入(script injection)方式,存在一定的安全隐患。

jquery的书写方法如下:

var url = 'http://app.a.com/userstatus.php?callback=?';$.getjson(url, function(data){alert(data.txt) });

抓包发现会产生类似于http://app.a.com/userstatus.php?type=json&callback=jsonp1261223089741&_=1261223089747的请求地址,问号被替换为一个带时间戳的回调函数名。

与50位技术专家面对面20年技术见证,附赠技术全景图

总结

以上是尊龙游戏旗舰厅官网为你收集整理的转: ajax跨域之jsonp的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得尊龙游戏旗舰厅官网网站内容还不错,欢迎将尊龙游戏旗舰厅官网推荐给好友。

网站地图