阳光博文 你的空间 知识的容器

详解Jquery和AngularJs中jsonp解决跨域问题

众所周知,jsonp可以解决跨域问题,下面是我在查阅资料和实际项目使用后的一些总结。

  • Jquery中jsonp的使用
myUrl = "http://localhost:8090/api/test";
$.ajax({
  type:"GET",
  url:myUrl,
  dataType:"jsonp",
  jsonp:"callback",
  jsonpCallback:"jsonpCallback",
  success:function(data){
    alert(data.msg);
  }
});
function jsonpCallback(data){
     alert(data);
}
1.jsonp只能使用get请求,解决同源问题,返回javascript代码,因为请求javascript文件是没有同源问题的。
2.当请求数据类型为jsonp时,会将callback=jsonpCallback加在url上,http://localhost:8090/api/test?callback=jsonpCallback
3.前台javascript中定义jsonpCallback函数,此函数必须定义在window下,也就是全局的函数,否则找不到。
4.后台获取请求的callback参数值jsonpCallback,返回字符串"jsonpCallback(result)",result为返回结果。
5.请求返回的是script tag,首先会调用jsonpCallback函数,不管是否找到该函数,都会调用success函数。
6.如果没有定义jsonp和jsonpCallback,jsonp默认为"callback",jsonpCallback会是Jquery自动生成的函数名。
  • angularJS中jsonp的使用
myUrl = "http://localhost:8090/api/test?callback=JSON_CALLBACK";
$http.jsonp(myUrl).success(
     function(data){
          alert(data);
     }     
);
1.angularJS中使用$http.jsonp函数
2.指定callback和回调函数名,函数名为JSON_CALLBACK时,会调用success回调函数,JSON_CALLBACK必须全为大写。
3.也可以指定其它回调函数,但必须是定义在window下的全局函数。
4.url中必须加上callback
5.当callback为JSON_CALLBACK时,只会调用success,即使window中有JSON_CALLBACK函数,也不会调用该函数。
  • jersey对jsonp的支持
    @GET
    @Path("test")
    @Produces("application/javascript")
    public JSONWithPadding sendTransToPlugin(@QueryParam("callback") String callback) {
        PluginEvent pluginEvent = new PluginEvent("aaa","","");
        pluginEvent.setAppendDescription("");
        pluginEvent.setErrorDescription("");
        Gson gson = new Gson();
        String json = gson.toJson(pluginEvent);
        JSONWithPadding js = new JSONWithPadding(json,callback);
//        JSONWithPadding js = new JSONWithPadding(new GenericEntity<PluginEvent>(pluginEvent){},callback);
        return js;
    }
 
@GET    
@Path("test")
@Produces(MediaType.APPLICATION_JSON)    
public String callTest(@QueryParam("callback") String callbackFunName) {    
    StringBuilder stringBuilder = new StringBuilder(callbackFunName);    
    stringBuilder.append("(");    
    stringBuilder.append(123);    
    stringBuilder.append(")");    
    return stringBuilder.toString();    
}
  • Servlet中的使用
@Override    
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {                                  
    resp.setContentType("application/json;charset=UTF-8");    
    PrintWriter out = resp.getWriter();   
    String callbackFunName = req.getParameter("callback");    
    StringBuilder stringBuilder = new StringBuilder(callbackFunName);    
    stringBuilder.append("(");    
    stringBuilder.append(123);    
    stringBuilder.append(")");    
    out.println(stringBuilder.toString());    
    out.print(result);    
    out.flush();    
    out.close();    

在线咨询