一、背景:
Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力,比如标签script、img、iframe)
二、原理
JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。
三、实现
方法一:
后端:
@RequestMapping("crossDomain")
public void crossDomain(HttpServletRequest request, HttpServletResponse response) throws IOException {
Map<String,String> resultMap = new HashMap<String,String>();
String callback = request.getParameter("callback");
resultMap.put("success", "true");
response.setContentType("text/html;charset=UTF-8");
PrintWriter writer = response.getWriter();
writer.print("var callback=(" + JsonUtil.object2Json(resultMap)+")");
}
输出格式:
前端:
<script src='http://***/crossDomain'></script>
src后的内容就是第三方的接口地址。
<script>
console.log(callback);
</script>
输出:
“callback”只是相当于一个变量名称,前端接收后直接可以读到Object中的内容。
方法二:
后端:
public void crossDomain(HttpServletRequest request, HttpServletResponse response) throws IOException {
Map<String,String> resultMap = new HashMap<String,String>();
String callback = request.getParameter("callback");
resultMap.put("success", "true");
response.setContentType("text/html;charset=UTF-8");
PrintWriter writer = response.getWriter();
writer.print(callback + "(" + JsonUtil.object2Json(resultMap)+")");
}
前端:
$.ajax({
url: 'http://***/crossDomain',
type: 'get',
data: {},
dataType: "jsonp",
jsonp:"callback",
success : function (data) {
alert("success");
},
error : function (data) {
alert("error");console.log(data);
},
});
原理背景参考:
http://www.qdfuns.com/notes/16738/1b6ad6125747d28592a53a960b44c6f4.html