博客

JSONP 原理其实是利用利用<script>标签没有跨域限制的“漏洞”（历史遗迹啊）来达到与第三方通讯的目的。当需要通讯时，本站脚本创建一个<script>元素，地址指向第三方的API网址，形如：

<script src=”http://www.example.net/api?param1=1&param2=2″></script>

并提供一个回调函数来接收数据（函数名可约定，或通过地址参数传递）。

第三方产生的响应为json数据的包装（故称之为jsonp，即json padding），形如：

callback({“name”:”hax”,”gender”:”Male”})

这样浏览器会调用callback函数，并传递解析后json对象作为参数。本站脚本可在callback函数里处理所传入的数据。（解释摘录自知乎，作者：贺师俊）

jquery支持jsonp  在ajax请求时  只需将dataType 修改为 ‘JSONP’ 就可以实现Jsonp跨域请求

$.ajax({
        url: "http://.......",
        type: 'GET',
        dataType: 'JSONP',//标识此为JSONP请求
        jsonp: "jsonpCallback",//服务端用于接收callback调用的function名的参数
        jsonpCallbackString:"callbackFunction",//用于代替jquery自动生成的函数名
        success: function (data) {
        }
    });

其中   jsonp 属性

在一个jsonp请求中重写回调函数的名字。这个值用来替代在”callback=?”这种GET或POST请求中URL参数里的”callback”部分，比如{jsonp:’onJsonPLoad’}会导致将”onJsonPLoad=?”传给服务器。

jsonpCallback

String

为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候，指定这个回调函数名。

同时     服务端返回值也需要修改

若需返回的值为{“name”:”hccake”,”old”,”18″}，

在使用jsonp的情况下服务端返回值应该为

callbackFunction({“name”:”hccake”,”old”,”18″})

服务端代码eg

  
@Controller  
public class JsonPController {  
    @RequestMapping("/jsonp")  
    public String exchangeJson(HttpServletRequest request,HttpServletResponse response) {  
       try {  
 
        //获取客户端请求的回调函数名   未使用jsop属性指定  则默认为callback
        //String jsonpCallback = request.getParameter("jsonpCallback");
        
        //若客户端使用jsonpCallbackString指定函数名  在服务端和客户端统一规范的情况下可以直接写死
        String  jsonpCallback = "callbackFunction";

        String reslutData = "{'name':'hccake','old','18'}";
  
        return jsonpCallback+"("+reslutData+")";//返回jsonp格式数据  
        
      } catch (IOException e) {  
       e.printStackTrace();  
      }  
    }  
}