JSONP接口（学习自用）

yayaye717

于 2024-06-28 19:05:07 发布

阅读量318

点赞数 13

文章标签：学习 okhttp

本文链接：https://blog.csdn.net/yayaye717/article/details/140051478

版权

JSONP接口

JSONP的概念和特点
概念：浏览器通过

JSONP不属于真正的Ajax请求，因为它没有使用XMLHttpRequest这个对象。
JSONP仅支持GET请求，不支持POST、PUT、DELETE等请求。

创建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)=>{})

实现JSONP接口的步骤

获取客户端发送过来的回调函数的名字
得到要通过JSONP形式发送给客户端的数据
根据前两步得到的数据，拼接出一个函数调用的字符串
把上一步拼接得到的字符串，响应给客户端的

实现JSONP接口的具体代码

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

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

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