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"></scri
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
0- 0
已为社区贡献5条内容
所有评论(0)