1. 概念及特点

        概念：浏览器通过 <script> 标签的 src 属性，请求服务器上的数据，同时服务器返回一个函数的调用。这种请求数据的方式叫做 JSONP

        特点：  ①   JSONP 不属于真正的 Ajax 请求，因为它没有使用 XMLHttpRequest 这个对象

                     ②   JSONP 仅支持 GET 请求，不支持 POST、PUT、DELETE 等请求

2. 创建 JSONP 接口的注意事项

        如果项目中已经配置了 CORS 跨域资源共享，为了防止冲突，必须在配置 CORS 中间件之前声明 JSONP 的接口。否者 JSONP 接口会被处理成开启了 CORS 的接口

// 优先创建 JSONP 接口    [这个接口不会被处理成 CORS 接口]
app.get('/api/jsonp', (req, res) => { })// 配置 CORS 中间件 [后续的所有接口都会被处理成 CORS 接口]
app.use(cors())// 这是一个开启了 CORS 的接口
app.get('/api/get', (req, res) => { })

3. 实现 JSONP 接口的步骤

        ①   获取客户端发送过来的回调函数的名字

        ②   得到要通过 JSONP 形式发送给客户端的数据

        ③   根据前两步得到的数据，拼接出一个函数调用的字符串

        ④   把上一步拼接得到的字符串，响应给客户端的 <script> 标签进行解析执行

4. 实现 JSONP 接口的具体代码

app.get('/api/jsonp', (req, res) => {// 1. const funName = req.query.callback// 2. const data = { name: 'zj', age: '22' }// 3. const scriptStr = `${funName}(${JSON.stringify(data)})`// 4. res.send(scriptStr)
})

5. 在网页中使用 JQuery 发起 JSONP 请求

        调用 $.ajax()函数，提供 JSONP 的配置选项，从而发起 JSONP 请求

$('#btnJSONP').on('click', () => {$.ajax({method: 'GET',url: 'http://127.0.0.1/api/jsonp',dataType: 'jsonp', // 表示要发起的是 JSONP 请求success: (res) => {console.log(res)}})
})