想知道jsonp究竟是怎么实现的？看我，包教会！

无论你好很差，反正我是番茄酱。为啥要写这篇文章呢，由于我想写。

看这个文章的你确定是想学会jsonp吧（废话），那遇到这个文章是你的福气。我敢保证这是全网最容易看懂的文章。固然，你若是不会写js，不懂什么叫跨域，那就算了。别勉强了，勉强是没有幸福的（并且你也没有学习jsonp实现方法的必要）。

首先声明，这篇文章不涉及后台代码的具体实现，关于后台的部分只说思路。

好啦，那咱们开课啦！

总的实现思路

我这篇教程的结构是总-分-总（瞎扯的，其实是总-随意-随意-...-随意）。咱们先来讲说总的实现思路。

咱们都知道因为“同源策略”（不懂啥是同源策略不要紧，反正你知道有跨域现象就好了），而致使咱们跨域的ajax请求发送失败，浏览器报错。

可是呢script标签的src是没有跨域一说的，也就是说你能够随便引用别的网站的js。这就是总的实现思路。若是不理解这一点，也不用往下看了，由于你以你的知识储备和理解能力不合适看这文章。

说完总的实现思路，咱们来看具体怎么作吧。

1：先忘记咱们要实现jsonp

先忘了咱们的目标，看一下咱们须要完成jsonp而须要掌握的知识。先理解了这些，才能理解jsonp的实现。

1.1：基础的js代码

咱们在页面写个这样的代码：

<script>
    function a() {
        console.log('hello cat!');
    }
</script>
<script>
    a();
</script>

运行结果：

对于代码和结果没有异议吧。为啥我要写这样的函数。我要说明的是这样一点：后一个script标签里的代码能够引用前一个script代码里的函数(全局)。老规矩，理解了这点就继续往下看。

1.2：script标签引用文本

咱们在html里写这样的代码:

<script>
    function a() {
        console.log('hello cat2!');
    }
</script>

而后咱们在同路径下新建一个a.txt。而且a.txt里的文本以下：

a();

而后咱们在html里引用a.txt。完整的代码以下：

<script>
    function a() {
        console.log('hello cat2!');
    }
</script>
<script src="a.txt"></script>

刷新页面，控制台以下：

也就是说txt里的代码被执行了。因此a函数才会被执行。我要说明的是：scritpt标签引用的外部文件中的文本内容会被当成js来解析。

也就是说至关因而这样的代码：

<script>
    function a() {
        console.log('hello cat2!');
    }
</script>
<script>
    a();
</script>

1.3：后台返回文本

若是咱们的后台给咱们返回的不是数据，而是跟a.txt同样的文本以下文本：

a();

如咱们请求地址为：https://www.a.com/a。则咱们此时的完整代码为：

<script>
    function a() {
        console.log('hello cat2!');
    }
</script>
<script src="https://www.a.com/a"></script>

那能够预见，最终的结果会与1.2一致。由于也等因而以下的代码：

<script>
    function a() {
        console.log('hello cat2!');
    }
</script>
<script>
    a();
</script>

小结

以上的东西只是须要完成jsonp要懂的知识。你理解了能够继续往下看。先不要深究“这样怎么能实现”的问题。不要急，我后面会说的。若是不理解上面的知识能够多看几遍。可以本身动手实验最好。

2：再看看通常的ajax请求

咱们通常的ajax请求，是后台给咱们一个请求地址，咱们发送请求，而后后台返回给咱们json格式的信息。例如咱们要请求的地址是：

https://www.a.com/userInfo (获取用户信息)

后台应该返回给咱们的数据是:

{
  "name": "番茄酱",
  "wechat": "fan_qie_jiang666",
  "qq": "1164431166",
  "email": "1164431166@qq.com"
}

也就是说咱们最终须要的是服务器把json格式的数据给咱们。可是咱们用1里说的方法，虽然服务器能调用咱们本地的函数，可是咱们怎么能获取到数据呢？

那这样，咱们把1.3的html代码改为这样：

<script>
    function a(res) {
        console.log(res);
    }
</script>
<script src="https://www.a.com/userInfo"></script>

服务器返回的文本改为这样：

a({
    "name": "番茄酱",
    "wechat": "fan_qie_jiang666",
    "qq": "1164431166",
    "email": "1164431166@qq.com"
});

也就是至关于这样的代码：

<script>
    function a(res) {
        console.log(res);
    }
</script>
<script>
    a({
        "name": "番茄酱",
        "wechat": "fan_qie_jiang666",
        "qq": "1164431166",
        "email": "1164431166@qq.com"
    });
</script>

最终结果：

也就是说咱们获取到了咱们须要的数据。可是万一咱们的function不叫a，或者本来叫a，可是由于种种缘由须要更名，这样后台也要跟着改代码。这增长了沟通成本，也增长了后台的工做量。而且可能每一个接口大家都须要去沟通这个函数的名字。这是问题呀！

3.解决函数名的问题

用script标签里的src至关于向服务器发送了get请求。

无论你理不理解上面这点，记住就好了。既然是至关于get请求，那就能够带参。而且后台也能得到这个参数的值。

既然这样那咱们是否是跟后台沟通好咱们给全部用jsonp的请求弄个参数，这个参数的值是咱们本地的函数名。后台直接给咱们返回函数名而后参数为数据值就ok辣？不理解的话看下面的过程。

好比咱们和后台沟通好参数名叫balabala，那代码就像下面这样：

<script>
    function xiaoMoXian(res) {
        console.log(res);
    }
</script>
<script src="https://www.a.com/userInfo?balabala=xiaoMoXian"></script>

后台收到了这个请求，再也不像以前那样直接返回给咱们a(...)。

由于咱们已经说好了，函数名再也不是固定的a，而是balabala这个参数的值才是咱们的函数名。

因而后台去获取balabala这个参数的值，获取到的是xiaoMoXian。因而后台返回给咱们：

xiaoMoXian({
    "name": "番茄酱",
    "wechat": "fan_qie_jiang666",
    "qq": "1164431166",
    "email": "1164431166@qq.com"
});

因而代码就至关因而：

<script>
    function xiaoMoXian(res) {
        console.log(res);
    }
</script>
<script>
    xiaoMoXian({
        "name": "番茄酱",
        "wechat": "fan_qie_jiang666",
        "qq": "1164431166",
        "email": "1164431166@qq.com"
    });
</script>

最终结果与2相同。

小结

以上就是jsonp的实现过程。咱们已经完成了不用ajax来请求，而利用script标签src属性的跨域特性，来实现咱们获取数据的目的。

我来小结下咱们用到的知识点：

1. ajax请求受同源策略的影响不能跨域。（问题）
2. script标签的src是能够跨域的，不受同源策略的影响。（总的方法）
3. 后一个script标签里的代码能够引用前一个script代码里的函数。
4. scritpt标签引用的外部文件中的文本内容会被当成js来解析。（结合3能够获取数据）
5. 用script标签里的src至关于向服务器发送了get请求。（解决函数名的问题）

看到这而且看懂就说明你已经差很少能够毕业了。由于你已经彻底懂了jsonp怎么实现的。但是咱们通常用jsonp好像没这么麻烦呀，也不用专门去写个函数来给后台调用，也不用去写script标签写src到咱们的请求地址，也不用沟通什么参数名。哪像你说的这么麻烦！？

哈哈，我要加班啦。预知后事如何，请多点赞。赞够多我就更。

或者加我微信给我发1块钱红包，众筹到10元我就更（谁还没个身价了￣へ￣）。