jsonp的实现原理
由于浏览器同源策略的限制,非同源下的请求,都会产生跨域问题,jsonp即是为了解决这个问题出现的一种简便解决方案。
同源策略即:同一协议,同一域名,同一端口号。当其中一个不满足时,我们的请求即会发生跨域问题。
但是,细心的朋友可能会发现盗链这一现象就是在请求不属于自己的图片等资源,比如说你直接盗链百度的图片,你的应用肯定和百度的应用跨域了,那为什么可以加载到百度的图片呢?答案是不管是我们的script标签的src还是img标签的src,或者说link标签的href他们没有被通源策略所限制。
jsonp就是通过请求伪造的静态资源(实际是跨域的后台请求),将后台放回数据返回页面的。
jsonp的实现
后端返回
package test;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/demo")
public class jsonpServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public jsonpServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 这是前端ajax中jsonp指定的参数名,得到的是jsonpCallback指定的参数值,这个值表示前端返回成功的回调方法名
String callback = (String)request.getParameter("callback");
String jsonData = "{\"id\":\"3\", \"name\":\"zhangsan\", \"telephone\":\"13612345678\"}";//为了演示效果,json数据是写死的
String retStr = callback + "(" + jsonData + ")";
response.getWriter().append(retStr);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
前端请求
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试页面</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<input type="button" value="点我测试本地" οnclick="rds()" />
<script>
function rds(){
var url="http://localhost:8080/demo";
$.ajax({
url: url,
type:'get',
dataType:'jsonp',
async: false,
jsonp:'callback',
jsonpCallback:"cb",
data:"",
// 当回调方法是放在ajax中匿名定义时,jsonp,jsonpCallback可以不指定,系统会默认生成
success:function(rs) {
console.log("返回值:"+rs);
}
});
}
// 当回调方法在ajax外定义时,jsonp,jsonpCallback必须指定,且方法名必须为jsonpCallback值
//function cb(r){
// console.log("返回值:"+r);
//}
</script>
</body>
</html>
使用MappingJacksonValue实现jsonp跨域
前端如上,后端如下
package com.bjsxt.controller;
import org.springframework.http.converter.json.MappingJacksonValue;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.test.pojo.People;
@Controller
public class DemoController {
@RequestMapping("demo")
@ResponseBody
public MappingJacksonValue demo(String callback){
People p = new People();
p.setId(1);
p.setName("张三");
// 把构造方法参数转换为json字符串并当作最终返回值函数的参数
MappingJacksonValue mjv = new MappingJacksonValue(p);
// 最终返回结果中函数名
mjv.setJsonpFunction(callback);
return mjv;
}
}
来源:CSDN
作者:Ye_GuoLin
链接:https://blog.csdn.net/Ye_GuoLin/article/details/104053667