【日常积累】jsonp跨域

说明：

    Jsonp(JSON with Padding) 是 json 的一种"使用模式"：可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
    jsonp要点：前端传递一个callback参数给服务器，服务器返回数据时使用这个参数名包裹json数据。

    jsonp核心：通过<script>标签的src属性跨域。<script>、<img>、<iframe>都有跨域能力。
    同源策略：协议、端口、IP（域名）必须一致。

例1：利用src跨域

本地服务器localserver.com的jsonp.html文件。

<script type="text/javascript" src="http://remoteserver.com/remote.js"></script>

远程服务器remoteserver.com的remote.js文件

alert('我是远程文件');

弹出alert框。

例2：src跨域+回调函数

本地js：

<script type="text/javascript">
    var localHandler = function(data){
        alert('我是本地函数，可以被跨域的remote.js文件调用，远程js带来的数据是：' + data.result);
    };
</script>
<script type="text/javascript" src="http://remoteserver.com/remote.js"></script>

远程js：

localHandler({"result":"我是远程js带来的数据"}); 

例3：本地js调用远程服务端，远程服务端动态拼接回调函数名。

本地js（换一种写法）：

<script type="text/javascript">
    // 得到航班信息查询结果后的回调函数
    var flightHandler = function(data){
        alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。');
    };
    // 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）
    var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
    // 创建script标签，设置其属性
    var script = document.createElement('script');
    script.setAttribute('src', url);
    // 把script标签加入head，此时调用开始
    document.getElementsByTagName('head')[0].appendChild(script);
</script>

远程java：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    response.setCharacterEncoding("UTF-8");
    response.setContentType("text/html;charset=UTF-8");

    //获取前端回调函数名
    String callback = request.getParameter("callback");
    //回调函数名包裹返回数据（json格式）
    result = callback + "(" + ...json格式数据... + ")";

    response.getWriter().write(result);
}

服务端返回数据格式：

flightHandler({
    "code": "CA1998",
    "price": 1780,
    "tickets": 5
});

例4：jquery版的jsonp，服务端代码不变。

本地js：

<script type="text/javascript">
     jQuery(document).ready(function(){
        $.ajax({
             type: "get",
             async: false,
             url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
             dataType: "jsonp",
             jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
             jsonpCallback:"flightHandler",//自定义jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
             success: function(json){
                 alert('票价： ' + json.price + '余票： ' + json.tickets );
             },
             error: function(){
                 alert('fail');
             }
         });
     });
</script>

注意：
    1）jquery版的jsonp和ajax很像，但本质不一样，是jquery对jsonp的一种封装。
    2）ajax核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心是动态添加<script>标签来调用服务器提供的js脚本。
    3）ajax也可以调用服务端通过代理实现跨域，当然jsonp也可以拿同域数据。

    4）jsonp是一种方式或者说非强制性的协议

引用：https://www.cnblogs.com/xiaozhumaopao/p/7093144.html