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

浏览数：70 / 时间：2015年06月09日

众所周知，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);
}

jsonp只能使用get请求，解决同源问题，返回javascript代码，因为请求javascript文件是没有同源问题的。
当请求数据类型为jsonp时，会将callback=jsonpCallback加在url上，http://localhost:8090/api/testcallback=jsonpCallback
前台javascript中定义jsonpCallback函数，此函数必须定义在window下，也就是全局的函数，否则找不到。
后台获取请求的callback参数值jsonpCallback，返回字符串"jsonpCallback(result)"，result为返回结果。
请求返回的是script tag，首先会调用jsonpCallback函数，不管是否找到该函数，都会调用success函数。
如果没有定义jsonp和jsonpCallback，jsonp默认为"callback",jsonpCallback会是Jquery自动生成的函数名。

angularJS中jsonp的使用

myUrl = "http://localhost:8090/api/testcallback=JSON_CALLBACK";
$http.jsonp(myUrl).success(
　　function(data){
　　　　alert(data);
　　}
);

angularJS中使用$http.jsonp函数
指定callback和回调函数名，函数名为JSON_CALLBACK时，会调用success回调函数，JSON_CALLBACK必须全为大写。
也可以指定其它回调函数，但必须是定义在window下的全局函数。
url中必须加上callback
当callback为JSON_CALLBACK时，只会调用success，即使window中有JSON_CALLBACK函数，也不会调用该函数。

Servlet中的使用

@Override
protectedvoiddoPost(HttpServletRequestreq,HttpServletResponseresp)throwsServletException,IOException{
　　resp.setContentType("application/json;charset=UTF-8");
　　PrintWriterout=resp.getWriter();
　　StringcallbackFunName=req.getParameter("callback");
　　StringBuilderstringBuilder=newStringBuilder(callbackFunName);
　　stringBuilder.append("(");
　　stringBuilder.append(123);
　　stringBuilder.append(")");
　　out.println(stringBuilder.toString());
　　out.print(result);
　　out.flush();
　　out.close();
}

详解Jquery和AngularJs，Servlet中jsonp解决跨域问题(转),古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

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