# JSONP跨域方式

> 来源：梦飞idc云平台 | 原文：https://www.mfisp.com/20542.html | 发布：2023-05-16 | 更新：2023-05-16 | 分类：建站教程

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的时候，系统会自动创建类似于如下标签

 

<script src=“” />这样的标签，然后将url及参数拼串，放入src属性中,继而解决跨域

  

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

---
本页由 梦飞idc云平台（https://www.mfisp.com）提供。站点导航见 https://www.mfisp.com/llms.txt