[Web]jsonp跨域访问小结

最近做到跨域访问的内容,自己做下小结,以便之后查询。

名词解释:

同源:URL由协议、域名、端口和路径组成,如果两个URL的协议、域名和端口相同,则表示他们同源。

浏览器同源策略:一个域加载的脚本不允许访问其他域(协议、域名、端口任何一个不一样即表示其他域)的文档属性。打个比方说,百度网站上加载的js脚本,不可以访问谷歌网站上的属性。

跨域访问:浏览器同源策略带来了一定的安全性,同时也限制了一些功能的处理。跨域访问即允许一个域访问另外一个域。协议、域名、端口任何一个不同,均为跨域。


背景:

网站A在某些特定处理过后,需要通知网站B做一定的操作,甚至需要返回的数据。


解决方法

跨域方式:

这里只提到ajax的跨域方法

网站A的前端:

<!DOCTYPE html>
<html>
<head>
<title>jsonp test</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.9.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

  $("#btn").click(function(){ 
    $.ajax({ 
      type: "get", 
      async: false, 
      <span style="color:#ff0000;">url: "http://localhost:8080/wx/jsonpAction.action", </span>
      dataType: "jsonp", 
      <span style="color:#ff0000;">jsonp: "callback",
      jsonpCallback: "jsonpCallback",</span>
      success: function(data) { 
        alert("success:" + data.abc); 
      }, 
      error: function(data, e) { 
        alert("failure" + e); 
      } 
    }); 
  });

});

</script>
</head>
<body>
  <p>This is a test.</p>
  <button id="btn">click</button>
</body>
</html>

网站B端
struts.xml(struts2的配置文件中)

<action name="jsonpAction" class="com.wx.WxAction">
  <interceptor-ref name="json">
    <param name="enableSMD">true</param>
  </interceptor-ref>
  <result type="<span style="color:#ff0000;">stream</span>" name="success">
    <param name="inputName">inputStream</param>
  </result>
  <result type="stream" name="error">
    <param name="inputName">inputStream</param>
  </result>
</action>

WxAction.java中
public InputStream getInputStream() throws Exception {
  return new ByteArrayInputStream("<span style="color:#ff0000;">jsonpCallback({'abc':'124'})</span>".getBytes());
}

如上,可以实现ajax跨域访问的问题。

其中,json和jsonp格式上有不同。

json格式:{"abc":"1", "abc2":"2"}

jsonp格式:callback({"abc":"1", "abc2":"2"})

所以,上面WxAction中,以流的方式返回了jsonp格式的内容。

如果WxAction的配置文件中,返回的type为json时,会出现如下错误:

Uncaught SyntaxError: Unexpected token


此外,跨域方式还有很多种,我还尝试过jquery的jsonp方式,写法如下,但是没有成功,有兴趣的可以关注下。

附:

jquery的jsonp方式官网说明:

http://api.jquery.com/jquery.getjson/

$("#btn").click(function(){
  var url='http://localhost:8080/wx/jsonpAction.action?jsonp=?';
  $.getJSON(curl, function(){
    console.log("success");
  })
  .done(function() {
    console.log("second success");
  })
  .fail(function() {
    console.log("error");
  })
  .always(function() {
    console.log("complete");
  });
});



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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值