jQuery JSONP跨域

标签: jquery jsonp | 发表时间:2014-01-10 15:27 | 作者:chenhn_
出处:http://www.iteye.com

基于Jquery的Ajax跨域访问

单点登录服务器(sso服务器)

令牌认证服务器(令牌服务器)

 

登录网页项目的时候,由于使用了单点登录,所以页面会跳转到sso服务器,进行统一登录,

现在需要在该界面增加令牌的认证,但是SSO服务器和令牌服务器部署在不同的服务器,且暂时没有要合并的可能,所以在SSO登录的时候必须要对令牌进行验证,就必须涉及到了跨域访问的问题。

最开始不了解跨域的概念,以为在局域网中就没有跨域,毕竟对外的域名都是统一的,所以直接使用

js代码 at  SSO服务器

$.ajax({
  url : http://192.168.123.10:8080/authority/identyfying.htm,
  type :"POST",
  data : {"name":name,"code":code},
  success :function(data){
    alert(data);
}
});
action代码 at 令牌服务器端

<%
Stringresult=request.getAttribute("result")==null?“”:request.getAttribute("result").toString();
String json="{result:"+result+"}";
response.getWriter().write(json);
%>
结果发现SSO服务器访问URL后的返回值的空值,但是本地实测返回肯定是有值的,猜测是防火墙问题,网段问题等等,最后终于在别人的提醒下,发现是因为跨域了。

查询了Jquery的相关API,修改如下

js代码 at  SSO服务器

$.ajax({
     url:urls,
    type: "GET",
    dataType: "jsonp",
    jsonp: "jsonpCallback",
    crossDomain : true,
    data: {“name”:name,“code”:code},
    success: function (data){
     var result = data.results;
     var msg = result?"成功":"失败,请重新输入6位令牌数字";
     $("#verify").html("动态口令验证"+msg);
    },
       error: function(xhr){
        alert("请求出错(请检查相关度网络状况.)");
    }
   });


action代码 at 令牌服务器端
<%
Stringresult=request.getAttribute("result")==null?“”:request.getAttribute("result").toString();
String callback = request.getParameter("jsonpCallback")+"({\"results\":"+results+"})";       
response.getWriter().write(callback);
%>
飘红的两处命名必须相同。

最终结果OK,可以验证了。



已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [jquery jsonp] 推荐:

jQuery JSONP跨域

- - Web前端 - ITeye博客
基于Jquery的Ajax跨域访问. 单点登录服务器(sso服务器). 登录网页项目的时候,由于使用了单点登录,所以页面会跳转到sso服务器,进行统一登录,. 现在需要在该界面增加令牌的认证,但是SSO服务器和令牌服务器部署在不同的服务器,且暂时没有要合并的可能,所以在SSO登录的时候必须要对令牌进行验证,就必须涉及到了跨域访问的问题.

jQuery中利用JSONP解决AJAX跨域问题

- - 蓝飞技术博客
跨域的解决方案有多种,其中最常见的是使用同一服务器下的代理来获取远端数据,再通过ajax进行读取,而在这期间经过了两次请求过程,使得获取数据的效率大大降低,这篇文章蓝飞就为大家介绍一下解决跨域问题的一种比较通用的方案——JSONP. 简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即“同源策略”.

【原创】说说JSON和JSONP,也许你会豁然开朗,含jQuery用例

- - 博客园_首页
由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socket通讯和本地数据库功能,又或者通过HTML5的WebSocket也可以实现与服务器的通讯和服务端推功能,但这两种方式都有其局限性,前者需要PhoneGap支持,后者要求用户设备必须支持WebSocket,因此都不能算是ST2的原生解决方案,原生的只有AJAX.

jsonp详解

- - 博客园_首页
json相信大家都用的多,jsonp我就一直没有机会用到,但也经常看到,只知道是“用来跨域的”,一直不知道具体是个什么东西. 下面一步步来搞清楚jsonp是个什么玩意. 首先基于安全的原因,浏览器是存在 同源策略这个机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. 看起来不知道什么意思,实践一下就知道了.

跨域 jsonp

- - 互联网 - ITeye博客
跨域有好多种方式,会根据当前的业务逻辑选择对应方式. 这里介绍了jsonp的方法的实现过程. 模拟两个不同的域(下面用a.com 和b.com 来讲解). a.com站点下面创建一个client.html . b.com站点下面创建一个server.php. a.com站点通过js跨域请求b.com站点,我们利用script标签不受域访问限制特点进行请求(img标签同样有此特点),最主要的特点就是能执行请求返回来的js脚本.

说说jsonp

- - Web前端 - ITeye博客
jsonp充其量只能说是一种“方法”. 它可以让页面从其他域中获取资料. 首先要知道的是同源策略,在javascript中使用http请求(ajax)是会受到同源策略的限制的. A网站的页面是不能在javascript中访问B网站的资源的. 但是,对于这种希望A网站访问B网站的资源的需求怎么办呢. html 中虽然说javascript是不能跨域的,但是有许多标签,比如,