JSONP简单了解

JSONP的概念与特点

概念:
浏览器端通过<script>标签的src属性，请求服务器上的数据，同时，服务器返回一个函数的调用。这种请求数据的方式叫做JSONP。
特点:
① JSONP不属于真正的Ajax请求，因为它没有使用XMLHttpRequest这个对象。
② JSONP仅支持GET请求，不支持POST、PUT、DELETE等请求。

创建JSONP接口的注意事项

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

app.get('/api/jsonp', (req, res) => {
    
})
// 使用cors中间件 -- 在路由之前配置
app.use(cors())

实现JSONP接口的步骤

① 获取客户端发送过来的回调函数的名字
② 得到要通过JSONP形式发送给客户斌的数据
③根据前两步得到的数据，拼接出一个函数调用的字符串
④ 把上一步拼接得到的字符串，响应给客户端的<script>标签进行解析执行
后端代码：

app.get('/api/jsonp', (req, res) => {
    // 1、获取客户端发送过来的回调函数的名字
    const funcName = req.query.callback
    // 2、得到要通过JSONP形式发送给客户端的数据
    const data = { name: 'zs', age: 20 }
    // 3、根据前两步得到的数据，拼接处一个函数调用的字符串
    const str = `${funcName}(${JSON.stringify(data)})`
    // 4、把上一步拼接得到的字符串，响应给客户端的<script>标签进行解析
    res.send(str)
})

前端代码：

$('#jsonp').on('click', function() {
    $.ajax({
        url: 'http://127.0.0.1:8085/api/jsonp',
        type: 'GET',
        dataType: 'jsonp',
        success: function(data) {
            console.log(data);
        }
    })
})