详解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();    

}