`
jafisher
  • 浏览: 55672 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

jsonp跨域及rest接口实现

阅读更多
    jsonp是json的一种模式,专门用来解决前端跨域请求数据的问题。它允许在服务器端生成script tags返回至客户端,通过javascript callback的形式来实现站点访问。
    一般来讲,ajax请求数据是没有权限跨域请求的,只能请求本域名下的接口,再调用其他域名的服务,就是自己前端->自己后台->别人后台的这种模式,还是很不方便的。
自己前端->别人后台就是属于跨域请求了,尽管浏览器不允许页面中的脚本程序跨域读取数据,但却允许HTML引用跨域的资源,所以前端调用js文件是可以跨域的,只要是资源文件都是可以支持跨域的。
    要支持跨域,除了前端脚本要实现jsonp模式请求,服务端还需要对返回数据封装成普遍的js文件格式,前端收到js文件格式的数据时会自动解析到数据,进行处理。而因为js是原生支持json的,所以服务端可以将数据以json格式处理。
    在传输的过程中,前端可以传递一个callback参数,服务端解析到后作为函数名返回给前端,前端再对callback参数进行校验是否一致。
    这种调用方式就是jsonp。

前端实现:
$.ajax({
        url: "//xxx.com/xxx",
        type: "get",
        dataType: "jsonp",
        data: "",
        success: function(s) {
            alert(s);
        }
    })


服务端实现:
1)servlet接口
@RequestMapping(value="/xxx")  
public void doGet(HttpServletRequest request, HttpServletResponse response) {  
    String callback = request.getParameter("callback");  
    response.setContentType("application/x-javascript");  
    response.setCharacterEncoding("UTF-8");  
    
    try {  
      PrintWriter out = response.getWriter();  
      String jsonp = "jsonp data";
      out.write(callback+ "(" + jsonp + ")");   
      out.flush();  
      out.close();  
    } catch (IOException e) {  
      e.printStackTrace();  
    }  
}  

2)rest接口
1.web.xml增加监听
<listener>      
    <listener-class>org.springframework.web.context.request.RequestContextListener</listener-class>  
</listener> 

2.java实现:
HttpServletRequest request = ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()).getRequest();
String callback = request.getParameter("callback");
String jsonp = "jsonp data";
return callback + "(" + jsonp + ")";
0
0
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics