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',// 向服务器端传递函数名字的参数名称，默认是callbackjsonp: '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’