Ajax基础：发送jsonp请求（jsonp、jsonCallback）

最新推荐文章于 2024-06-20 20:55:24 发布

昔冰_G

最新推荐文章于 2024-06-20 20:55:24 发布

阅读量1w

点赞数 4

分类专栏： Ajax 文章标签： ajax jquery javascript jsonp

本文链接：https://blog.csdn.net/qq_38800316/article/details/120577710

版权

Ajax 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

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’

昔冰_G

关注

4
点赞
踩
22

收藏

觉得还不错? 一键收藏
1
评论
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> $('#bt
复制链接

扫一扫

专栏目录