Node.js基础---JSONP 接口

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)
        }
    })
})

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值