JSONP跨域方式

Jsonp的调用方式说明

Jsonp的调用本质上是利用的src的越过跨域的方式调用的，

如上的方式我们在自己的开发过程中应该都有使用过，在自己的网站上，调用其他网站的js脚本或者图片，以上的调用过程其实也是跨域的，但是调用结果是完全没有问题的；

Jsonp就是利用如上的方式完成调用的，

使用如上的方式在页面初始化的时候，可以调用百度云的api，并且传递了三个参数

Name:1

Value:2

callback=callBackFunction

百度云的后端可以接收到如上三个参数，这样就完成了跨域；

当然，前端需要编写callbackFunction;

Function callbackFunction(json){

//处理逻辑

}

那ajax是如何实现的呢？

$.ajax({

type: “post”,

data: {“username”:’user’,”password”:’123123′},

dataType: “jsonp”,

jsonp: “callback”,//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)

jsonpCallback:”flightHandler”,//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写”?”，jQuery会自动为你处理数据

success: function(data){

error:function(e){

}

});

})

参数说明：

①DataType:”jsonp”,当dataType指定为jsonp的时候，系统会自动创建类似于如下标签

②Jsonp:”callback”, 传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名，如果不指定，则默认传递callback

③jsonpCallback:“flightHandler”, 自定义的jsonp回调函数名称，如果不指定ajax会自动生成一个函数名称（类似于jquery_5648946541684656789()的方法名）然后ajax会自动创建一个这样的function方法；

自动生成一个

Function flightHandler(json){

//success方法中的逻辑

}

没有指定jsonpCallback的时候，创建一个如下的方法

Function jquery_5648946541684656789 (json){

//success方法中的逻辑

}

④其余参数和普通的ajax的参数是一致的；

所以，使用jsonp的时候，是可以不用传递如下两个参数的；

Jsonp:”callback”；

jsonpCallback:“flightHandler”；

最终<script src=””/>中的src就会拼接成

以上就是ajax使用jsonp解决跨域的原理
后端操作

@RequestMapping(“/name123123”)

public String exchangeJson3(HttpServletRequest request, HttpServletResponse response) throws IOException {

response.setContentType(“text/plain”);

response.setHeader(“Pragma”, “No-cache”);

response.setHeader(“Cache-Control”, “no-cache”);

response.setDateHeader(“Expires”, 0);

Map<String,String> map = new HashMap<String,String>();

map.put(“result”, “content”);

PrintWriter out = response.getWriter();

String jsonString=JSONObject.toJSONString(map);

String jsonpCallback = request.getParameter(“callback”);//客户端请求参数

out.println(jsonpCallback+”(“+jsonString+”)”);//返回jsonp格式数据

out.flush();

out.close();

return null;

}

如上标红的两行是关键

request.getParameter(“callback”);获取方法名称；Callback 是Jsonp:”callback”中指定的名称，

若指定为Jsonp:”funciton”，则后端获取方式改为request.getParameter(“funciton “);

out.println(jsonpCallback+”(“+jsonString+”)”);//返回jsonp格式数据，如上是拼接一个方法名，然后将放回的json串，以参数的形式放入到方法中，返回给前端，然后就能执行前端由ajax自动生成的jsonpCallback方法

调用总结

使用jsonp确实可以完成跨域的请求，只要指明datatype=”jsonp”,请求就可以发送到后端，这时候可以在后端将数据存储到redis或者数据库等进行处理
如果想要拿到后端的返回结果，则后端必须使用out.println(jsonpCallback+”(“+jsonString+”)”);

猜你喜欢

评论0