JSONP跨域方式说明

目录

Jsonp的调用方式说明

后端操作

调用总结

 

---

Jsonp的调用方式说明

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

<script  src=”http://domin.cdn.com/jquery.min.js” />

<img src=” http://domin.cdn.com/rain.png” />

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

Jsonp就是利用如上的方式完成调用的，如下是模拟方式：

<script src=http://baidu.api.com/v/tongji?name=1&value=2&callBack=callBackFuntion />

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

Name:1

Value:2

callback=callBackFunction

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

当然，前端需要编写callbackFunction;

Function callbackFunction(json){

         //处理逻辑

}

 

 

那ajax是如何实现的呢？

 $.ajax({

             type: "post",

             url: "http://localhost:8080/springjpaStudy/home/inde3",

             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就会拼接成

src= “http://localhost:8080/springjpaStudy/home/inde3?callback= flightHandler&username=user&password=123123”

以上就是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方法

 

调用总结

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