jsonp原理

今天对象问了我jsonp的问题，我就顺便学习了一下josnp。

我们知道普通的ajax，在跨域访问数据时会报以下错误

我们发现在引用js时可以跨域，不仅如此，我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力，比如<script>、<img>。

jsonp也就是利用了<script>的这个特性来实现跨域的。

具体例子如下：

<script type='text/javascript'>
    function showDetail(json){
        console.log(json);
    }
</script>

在页面上添加了一个showDetail方法，然后我们用原生的jsonp来请求数据，代码如下：

<script src='http://localhost:64996/api/values/5?callback=callbackMethod'></script>

注意上面src地址的callback参数，他是指定了一个我们已经定义好的一个方法。

这里将接口地址放在了<script>的src中，因为<script>不会出现跨域的问题，这样就可以请求到数据

我的接口代码如下：

        public HttpResponseMessage Get(int id, string callBack)
        {
            var data = new
            {
                Id=id,
                Name="Jack",
                Age=24
            };
            
            return new HttpResponseMessage
            {
                Content = new StringContent($"{callBack}({JsonConvert.SerializeObject(data)})")
            };
        }

看这个地方的代码：$"{callBack}({JsonConvert.SerializeObject(data)})"

其实我们就是返回了一个类似这样的数据：

callBackMethod({"Id":1,"Name":"name"})

最后将请求到的这些数据放在<script>中，得到以下内容：

<script src='http://localhost:64996/api/values/5?callback=callBackMethod'>

callBackMethod({"Id":1,"Name":"name"})

</script>

当这个<script>加载完成后，就开始调用callBackMethod方法，这是咱们已经定义好的方法，这样我们就取到了数据，实现了跨域。

这就是jsonp的原理，使用<script>来实现跨域。

但是我们要是每次用jsonp都得定义一个callback很麻烦，jquery帮我们封装好了，我们直接用下面代码就可以实现跨域功能

<script type='text/javascript'>
$.ajax({
    url: 'http://localhost:64996/api/values/5',
    dataType: 'jsonp',   
    success: function (data) {
      console.log(data);
      }
});
</script>

在ajax中添加：dataType：'jsonp'，就可以实现跨域，我们不用定义callBack方法。
调试发现，jquery会自动给callback赋值，如下图：

了解了jsonp的原理后，就明白jquery的dataType:'jsonp'了

以上是根据自己的理解，希望对大家有帮助