这是我参与「4月日新计划更文活动」的第21天。
昨天带着大家一起学习了如何使用ajax调用数据，今天带着大家一起来看一下如何用jsonp发送请求。
哪有朋友就疑惑了，我用ajax请求数据好好的，那为什么还要用一个jsonp的方案来请求数据呢？
那我当然不是闲的出屁，没事找事而搞出了个jsonp的请求，那实在是因为jsonp解决了ajax不能解决的一个痛点问题。
那就是跨域的问题。
所以jsonp才有他使用的一席之地。
但是jsonp只能用于get请求。
好了，讲了这么多，正式回到jsonp怎么使用的问题上来。
我们以一个查询用户数据的接口为例。
那么在使用jsonp的时候主要有以下这些步骤需要做。
1、前端跟后端约定接口，跟执行的函数名。比如前端跟后端约定的执行函数名为getUserInfo，那么通常这个jsonp的接口会定义成：https://.com/?callback=getUserInfo&name=神厨小福贵。
2、后端根据接口定义的回调函数名callback，拿到函数值getUserInfo。并且根据入参name，获取到参数值神厨小福贵。
3、后端根据参数值查询数据库和处理后端逻辑，获取到用户数据userInfo = { name: '神厨小福贵', id: '376547831994', age: 20 }，就简单的查询到这一条数据的结果为以上所示。
4、后端将获取到的数据userInfo，作为getUserInfo函数的参数，以js片段的方式返回给前端。比如改js片段的格式类似这样：getUserInfo({ name: '神厨小福贵', id: '376547831994', age: 20 })。
5、前端获取到这个js片段之后，开始定义function getUserInfo(user) { ... }，这里的user就是获取到的用户的数据。前端通过获取到的数据进行一些操作变换，或者将数据渲染到页面中。
以上就是整个jsonp的执行过程。
下面，我将主要的代码写下来，让大家更清晰的看懂这个过程。
// 1、 第一步：前端创建全局函数，请求jsonp接口
function getUserInfo(result) {
console.log(result);
}
var script = document.createElement('script');
script.src = 'http://example.com/jsonp?callback=getUserInfo';
document.head.appendChild(script);
// 2、第二步，后端查询组装数据，将js片段返回给前端
callback({"name": "Alice", "age": "25"});
// 3、第三步：前端接收代码片段并执行
以上，就是我今天学习的如何使用通过jsonp获取数据整个过程的知识点。
看到掘金上的好文章，如果对你有帮助，顺手点个赞，或者把文章收藏。不用担心找不到了，以后也能经常收到类似好回答，我会持续进行更新。
