JSONP 应用

受限于浏览器的同源安全策略, js 无法发起跨域的请求. 但是 HTML 中的 <script> 标签却可以引入跨域的文件使用. 而 JSONP 就是利用 <script> 的开源策略解决跨域问题的一种 JSON 的使用模式.

JSONP 抓取到的数据并不是 JSON, 而是任意可执行的 JS 代码.

JSONP 应用

服务器端代码

<?php
$info = ['type' => 'jsonp', 'msg' => '服务器端数据'];
$info = json_encode($info, JSON_UNESCAPED_UNICODE);
$callback = $_GET['jsonpCallback'];
// 此处相当于直接返回一句js代码: showData({type: "jsonp", msg: "服务器端数据"})
echo "{$callback}({$info})";

 

客户端代码

<script type="text/javascript">
function showData(data)
{
    console.log(data);
}
</script>
// 获取到返回的js后开始执行
<script type="text/javascript" src="http://127.0.0.1:88/JSONP/getData?jsonpCallback=showData"></script>

上面的客户端代码在执行时等于:

<script type="text/javascript">
function showData(data)
{
    console.log(data);
}
</script>
<script type="text/javascript">
showData({type: "jsonp", msg: "服务器端数据"})
</script>

JQuery 下的 JSONP 实现

客户端代码

服务器端代码不变, 客户端代码替换为:

<script type="text/javascript">
    $.ajax({
        url: 'http://127.0.0.1:88/JSONP/getData?jsonpCallback=showData',
        type: 'get',
        data: null,
        dataType: 'jsonp',
        async: false,
        success: function(data)
        {
            console.log(data);
        },
        error: function(){}
    });

    function showData(data)
    {
        console.log(data);
    }
</script>

 或是

<script type="text/javascript">
    $.ajax({
        url: 'http://127.0.0.1:88/JSONP/getData',
        type: 'get',
        data: null,
        dataType: 'jsonp',
        jsonpCallback: 'showData', // 定义回调函数名, 没有此项, jQuery将提供一个随机函数名, 后端通过$_GET['callback']获取回调函数名
        async: false,
        success: function(data)
        {
            console.log(data);
        },
        error: function(){}
    });

    function showData(data)
    {
        console.log(data);
    }
</script>