使用Ajax发起JSONP请求

1. 什么是JSONP请求？

在浏览器中会存在有同源策略机制，不是同源的网站想要实现资源的交互可以通过<script src=””&g t;</script&g t;标签来实现函数的调用，从而实现数据的交互。如图1.1所示, 使用 sci p t 标签 get data.js 调用了html 文件中的abc 函数，并传递了一个对象数据。

图1.1 不同JS文件的数据交互

由此可以联想到，如果把get data.js 文件部署到了服务器上，就使用 script 标签实现不同源网站的数据资源交互。而JSONP请求，就是基于 script 标签实现的跨域请求。

2. 使用Aja x实现JSONP请求，Aja x都做了什么？

1）自动生成了并携带一个 call b ack=jQue ry xxx的参数，如图2.1所示，jQue ry xxx是一个随机生成的一个回调函数（当客户端收到服务器发送回来的调用信息会执行这个回调函数，并输出数据）。

/*   --  这是简单的运行在服务器上的jsonp接口  --     */

// 必须配置在cors中间件之前，配置JSONP的接口 
app.get('/api/jsonp', (req, res) =&gt; {
    //通过req.query获取客户端发送过来查询字符串对象，获取客户端使用jQuery发送过来的随机函数名
    const funcName = req.query.callback

    console.log(funcName);
    const data = { name: 'helulu', age: 22 }
    // 获取把函数名和参数封装成字符串的形式
    const scriptStr = `${funcName}(${JSON.stringify(data)})`
    // 把函数和参数发送给客户端，客户端调用jQuery自动封装的函数，打印出data对象数据
    res.send(scriptStr)

})

图2.1 jQuery携带的随机函数名

2）Ajax还提供了更改函数名和更改默认值 callb ack的方法如图2.2所示

图2.2 更改JSONP携带的默认参数

3. Ajax发起JSONP请求过程 总结

1）流程图如图3.1所示

图3.1 Ajax发起jsonp请求流程图

2）所有代码如下

服务端：

/*  --  服务器端代码  --*/
const express = require('express')

const app = express()

// 必须配置在cors中间件之前，配置JSONP的接口 
app.get('/api/jsonp', (req, res) =&gt; {
    //通过req.query获取客户端发送过来查询字符串对象，获取客户端使用jQuery发送过来的随机函数名
    const funcName = req.query.callback

    console.log(funcName);
    const data = { name: 'helulu', age: 22 }
    // 获取把函数名和参数封装成字符串的形式
    const scriptStr = `${funcName}(${JSON.stringify(data)})`
    // 把函数和参数发送给客户端，客户端调用jQuery自动封装的函数，打印出data对象数据
    res.send(scriptStr)

})

app.use('/api', router)

app.listen(80, () => {
    console.log('the server is running at http://127.0.0.1')
})

客户端：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
//导入在线jQuery文档
<script src="https://cdn.staticfile.org/jquery/3.6.2/jquery.min.js"></script>

<body>
    
    <button id="btnjsonp">JSONP</button>

    <script>
       
            $('#btnjsonp').on('click', function () {
                $.ajax({
                    method:'GET',
                    dataType: 'jsonp',
                    url: 'http://127.0.0.1/api/jsonp',
                    // jsonp:'callbook',
                    // jsonpCallback:'abc',
                    success: function (res) {
                        console.log(res);
                    }
                })
            })
        })

    </script>
</body>

</html>