Jsonp的调用本质上是利用的src的越过跨域的方式调用的,
如上的方式我们在自己的开发过程中应该都有使用过,在自己的网站上,调用其他网站的js脚本或者图片,以上的调用过程其实也是跨域的,但是调用结果是完全没有问题的;
Jsonp就是利用如上的方式完成调用的,
使用如上的方式在页面初始化的时候,可以调用百度云的api,并且传递了三个参数
callback=callBackFunction
百度云的后端可以接收到如上三个参数,这样就完成了跨域;
当然,前端需要编写callbackFunction;
FunctioncallbackFunction(json){
jsonp:"callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback) jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据 success:function(data){?①DataType:”jsonp”,当dataType指定为jsonp的时候,系统会自动创建类似于如下标签
<scriptsrc=https://www.mfisp.com/“”/>这样的标签,然后将url及参数拼串,放入src属性中,继而解决跨域
②Jsonp:”callback”,传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名,如果不指定,则默认传递callback

FunctionflightHandler(json){
没有指定jsonpCallback的时候,创建一个如下的方法
Functionjquery_5648946541684656789(json){
④其余参数和普通的ajax的参数是一致的;
所以,使用jsonp的时候,是可以不用传递如下两个参数的;
jsonpCallback:“flightHandler”;
最终<scriptsrc=https://www.mfisp.com/””/>中的src就会拼接成
以上就是ajax使用jsonp解决跨域的原理后端操作
@RequestMapping("/name123123")?publicStringexchangeJson3(HttpServletRequestrequest,HttpServletResponseresponse)throwsIOException{???response.setContentType("text/plain");???response.setHeader("Pragma","No-cache");???response.setHeader("Cache-Control","no-cache");???response.setDateHeader("Expires",0);???Map<String,String>map=newHashMap<String,String>();???map.put("result","content");???PrintWriterout=response.getWriter();???StringjsonString=JSONObject.toJSONString(map);???StringjsonpCallback=request.getParameter("callback");//客户端请求参数???out.println(jsonpCallback+"("+jsonString+")");//返回jsonp格式数据???out.flush();???out.close();???returnnull;???}
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+")");
本文来源:虚拟主机--JSONP跨域方式(跨域解决方案jsonp)
本文地址:https://www.idcbaba.com/zhuji/2764.html
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 1919100645@qq.com 举报,一经查实,本站将立刻删除。



