jsonp

使用场景:
域A调用域B,跨域访问时使用,正常的ajax不可以跨域使用。

项目中场景:
不同域名的购物车实现—两个不同域商城调用第三个域公用接口,把所有购物车信息保存到此公用域的Cookie。
而不同域网站调用第三个域公用接口,这属于跨域访问,所以用到jsonp。

jsonp跨域响应时记得把这个响应头加进去 P3P: CP="CURa ADMa DEVa PSAo PSDo OUR BUS UNI PUR INT DEM STA PRE COM NAV OTC NOI DSP COR"

前端js:
    // 使用jsonp发送文本对象(ajax)
function sendJsonp(controller){

if($("#message").val()==""){
$("#message").css("border","1px solid red");
return;
}else{
$("#message").css("border","1px solid gray");
}
$.ajax({
type: 'GET',
url:'<%=basePath%>cookieShare/'+controller,
data:{"message":$("#message").val()},
async: false,
//headers: {"P3P":"CP=\"CURa ADMa DEVa PSAo PSDo OUR BUS UNI PUR INT DEM STA PRE COM NAV OTC NOI DSP COR\""},
beforeSend: function(request) {
request.setRequestHeader("P3P", "CP=\"CURa ADMa DEVa PSAo PSDo OUR BUS UNI PUR INT DEM STA PRE COM NAV OTC NOI DSP COR\"");
},
dataType: "jsonp",
//jsonp: "callback", //传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
//jsonpCallback:"flightHandler", //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
jsonp: "callbackparam", //服务端用于接收callback调用的function名的 参数
jsonpCallback: "success_jsonpCallback", //callback的function名称,服务端会把名称和data一起传递回来
success:function(data){

$("#status").html("<font color=red>"+ data.number +"</font>");
},
error:function(data){

$("#status").html("<font color=red>ERROR:"+data["status"]+","+data["statusText"]+"</font>");
setTimeout(clear,5000);
}
});
}

// 使用jsonp接收文本对象
function findJsonp(controller){

$.ajax({
type: 'GET',
url:'<%=basePath%>cookieShare/'+controller,
//data:{"message":$("#message").val()},
async: false,
dataType: "jsonp",
//jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
//jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数
jsonpCallback: "success_jsonpCallback", //callback的function名称,服务端会把名称和data一起传递回来
success:function(data){

$("#status").html("<font color=red>" + data.name + ":" + data.value +"</font>");
},
error:function(data){

$("#status").html("<font color=red>ERROR:"+data["status"]+","+data["statusText"]+"</font>");
setTimeout(clear,5000);
}
});
}

// 使用jsonp发送文本对象(findJsonp)
function sendGetJSON(controller){

if($("#message").val()==""){
$("#message").css("border","1px solid red");
return;
}else{
$("#message").css("border","1px solid gray");
}
var message = $("#message").val();
$.getJSON('<%=basePath%>cookieShare/' + controller + '?message=' + message + '&jsoncallback=?', function(data){
$("#status").html("<font color=red>"+ data.number +"</font>");
});
/* $.getJSON('cookieShare/sendGetJSON.json?type=1&jsoncallback=?', function(status){
alert("123");
}); */
}


后端java:
    /**
* 发送jsonp
* @param message
* @return String
*/
@RequestMapping(value = "sendJsonp.json", method = RequestMethod.GET)
public void sendJsonp(String message, HttpSession session, HttpServletRequest request, HttpServletResponse response){

response.setHeader("P3P", "CP=\"CURa ADMa DEVa PSAo PSDo OUR BUS UNI PUR INT DEM STA PRE COM NAV OTC NOI DSP COR\"");

Map map = new HashMap<>();
if ("0".equals(message)){
CookieUtils.setCookie(response, "number", message, 0);
map.put("number", "删除cookie,key=number");
}else{
CookieUtils.setCookie(response, "number", message, -1);
map.put("number", "使用默认cookie,key=number,value="+ message);
}

response.setContentType("text/plain");
String callbackFunName = request.getParameter("callbackparam");//得到js函数名称
try {
response.getWriter().write(callbackFunName + "(" + JSON.toJSONString(map) + ")");
//response.getWriter().write(callbackFunName + "([ { name:\"John\"}])"); //返回jsonp数据
} catch (IOException e) {
e.printStackTrace();
}
}

/**
* 查询jsonp
* @param message
* @return String
*/
@RequestMapping(value = "findJsonp.json", method = RequestMethod.GET)
public void findJsonp(HttpSession session, HttpServletRequest request, HttpServletResponse response){

Cookie cookie = CookieUtils.getCookieByName(request, "number");

response.setContentType("text/plain");
String callbackFunName = request.getParameter("callbackparam");//得到js函数名称
try {
response.getWriter().write(callbackFunName + "(" + JSON.toJSONString(cookie) + ")");

} catch (IOException e) {
e.printStackTrace();
}
}

/**
* 发送jsonp
* @param message
* @return String
*/
@RequestMapping(value = "/sendGetJSON.json")
public void sendGetJSON(HttpServletRequest request,HttpServletResponse response,Model model, String message){

Map map = new HashMap<>();
if ("0".equals(message)){
CookieUtils.setCookie(response, "number", message, 0);
map.put("number", "删除cookie,key=number");
}else{
CookieUtils.setCookie(response, "number", message, -1);
map.put("number", "使用默认cookie,key=number,value="+ message);
}
String contentType = "application/json";
response.setContentType(contentType);

try{
String jsoncallback = request.getParameter("jsoncallback");
String json = jsoncallback + "(" + JSON.toJSONString(map) + ");";
PrintWriter out = response.getWriter();
out.print(json);
out.flush();
out.close();
}catch (IOException e){

}
}


jsonp是通过动态添加脚本来实现跨域的。不能修改请求头。除非用xhr2.0
http://stackoverflow.com/questions/3350778/modify-http-headers-for-a-jsonp-request
响应时服务器端设置。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值