Ajax基础:发送jsonp请求(jsonp、jsonCallback)

jsonp走的是get请求方式,也就是ajax的默认请求方式;

ajax方法中也涵盖了jsonp请求,可以通过ajax方法来发送jsonp请求;

<!--客户端代码-->
<body>
    <button id="btn">发送jsonp请求</button>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        $('#btn').on('click', function() {
            $.ajax({
                url: '/jsonp',

                // 代表要发送jsonp请求而再是ajax请求
                dataType: 'jsonp',
                success: function(response) {
                    console.log(response);
                }
            })
        })
    </script>
</body>
// 服务端代码,服务端对于jsonp请求可以使用jsonp做出响应
app.get('/jsonp', (req, res) => {
    res.jsonp({
        name: 'xibing_G',
        age: 20
    })
})

jsonp请求方案会在客户端的全局作用域下准备一个函数,将函数名传递给服务端,服务端会返回函数调用代码;如果服务端返回了数据,那么就会调用success对应的函数,并且将数据传递给success函数,在success函数内部就可以对数据进行处理。

它会判断这个是不是一个函数,如果是,就将响应数据作为函数的实参传递进去给到客户端


属性jsonp(当然,例外一般都是不常被用到)

由上面可以看出会有默认的请求函数callback的生成,服务端也会有默认的响应

但也会有存在例外,有的服务器就不是通过callback来接收客户端传递过来的函数名称的

比如简写为:cb;此时客户端就需要更改默认的callback,改为与服务端对应的cb或者其他值

这个时候jsonp属性就有用了,jsonp属性值就是指定的函数参数名    jsonp:'cb'

属性jsonCallback(当然,例外一般都是不常被用到,平时使用success即可)

请求成功会调用success,如果不想调用它,当然也可以自定义其他方法供其调用;

这个时候jsonCallback属性就拥有了,jsonCallback属性值就是函数名   jsonCallback:'fn'

说白了:jsonCallback的值其实就是用于调用的那个全局作用域的函数的名称

<body>
    <button id="btn">发送jsonp请求</button>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        function fn(response) {
            console.log('源于fn的');
        }
        $('#btn').on('click', function() {
            $.ajax({
                url: '/jsonp',
                // 向服务器端传递函数名字的参数名称,默认是callback
                jsonp: 'cb',

                // 正常是调用success,如果想自行调用其他的,就在这里填写函数名
                jsonpCallback: 'fn',
                dataType: 'jsonp',
                success: function(response) {}
            })
        })
    </script>
</body>

客户端做出了调整(函数参数名、函数名),那么服务端就不能再使用默认的jsonp了

app.get('/jsonp', (req, res) => {
    const cb = req.query.cb;
    const data = cb + "({name:'Xibing'})";
    res.send(data);
})

 

 

 控制台可以正常输出服务端响应的数据,请求URL中的函数参数名也改成了和服务端一致的‘cb’

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值