JSONP跨域方式(跨域解决方案jsonp)

JSONP跨域方式(跨域解决方案jsonp)

浏览次数:
信息来源: 用户投稿
更新日期: 2026-02-05 08:54:13
文章简介

Jsonp的调用本质上是利用的src的越过跨域的方式调用的, 如上的方式我们在自己的开发过程中应该都有使用过,在自己的网站上,调用其他网站的js脚本或者图片,以上的调用过程其实也是跨域的,但是调用结

2025阿里云双十一服务器活动

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

JSONP跨域方式,跨域解决方案jsonp

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+")");

标签:
PVE防火墙的特点和功能是什么
« 上一篇
返回列表
下一篇 »

如本文对您有帮助,就请抽根烟吧!