zoukankan      html  css  js  c++  java
  • 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'了

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

     
     
  • 相关阅读:
    聚合查询2.0
    分词器2.0
    搜索和查询2.0
    Mapping2.0
    索引的CRUD2.0
    微信小程序:一则iOS下用video播放mp4文件问题排查
    flutter——android报错Manifest merger failed : Attribute application@allowBackup value=(false)
    HTML-meta
    HTML-实体
    html-vscode-liveServer
  • 原文地址:https://www.cnblogs.com/taohonggou/p/7011690.html
Copyright © 2011-2022 走看看