JSONP 接口

1. JSONP 的概念与特点

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

- 特点：

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

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

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

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

```js

    // 优先创建 JSOP 接口

    app.get('/api/jsonp', (req,res) => {})

    // 再配置 CORS 中间件   【后续所有的接口都会被处理成 CORS 接口】

    app.use(cors())

    app.get('/api/get', (req,res) => {})

```

3. 实现 JSONP 接口的步骤

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

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

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

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

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

```js

    app.get('/api/jsonp', (req, res) => {

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

        const funcName = req.query.callback

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

        const data = { nameL 'zs', age: 22}

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

        const scriptStr = `${funcName}(${JSON.stringify(data)})`

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

        res.send(scriptStr)

    })

```

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

- 调用 $.ajax() 函数，提供 JSONP 的配置选项，从而发起 JSONP 请求，示例代码如下：

```js

    $.ajax({

        method: 'get',

        url: 'http://127.0.0.1/api/jsonp',

        dataType: 'jsonp',      // 表示要发送 JSONP 的请求

        success: function (res) {

            console.log(res)

        }

    })

```