jsonp跨域具体实现

最新推荐文章于 2019-08-28 11:54:35 发布

晟沚

最新推荐文章于 2019-08-28 11:54:35 发布

阅读量459

点赞数 1

分类专栏： js 文章标签： js jsonp

本文链接：https://blog.csdn.net/zhuzhupozhuzhuxia/article/details/70313222

版权

js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

博主以前觉得只要知道jsonp是通过src属性来实现跨域的就行了，但是，发现最终吃亏的永远是自己，于是博主准备从今天开始，不再只是涉猎，应该去好好品尝其中滋味～

首先要明确客户端与服务器端通信的原理：
如下：本地的程序通过script标签请求服务器端的文件

<html>
  <body>
    <script src="http://remoteserver.com/remote.js"></script>
    <script type="text/javascript">
      var localHandler=function(data){
        console.log(data.result);
      }
    </script>

  </body>
</html>

remote.js
服务器端调用客户端的函数

localHandler({
  "result":"服务器端信息"
})

知道如何通信之后，如何动态创建一个访问服务端的请求呢？
当然就要涉及动态创建script标签，创建完了记得加入到文档中去哦

<html>
  <head>

  </head>
  <body>
    <script>
      var handler=function(data){
        console.log(data.price);
      };
      var url="http://a.com/1.aspx?code=11&callback=Handler";
      var script = document.createElement('script');
      script.setAttribute('src',url);
      document.getElementByTagName('body')[0].appendChild(script);
    </script>
  </body>
</html>

jquery又如何使用jsonp跨域呢？
首先在jquery中，jsonp是归于ajax的，而且会自动生成回调函数

<html>
  <body>
    <script src="jquery.min.js"></script>
    <script type="text/javascript">
      jQuery(document).ready(function(){
        $.ajax({
          type:"get",
          async:false,
          url="http://a.com/1.aspx?code=11&callback=Handler",
          dataType:'jsonp',
          jsonp:"callback",
          jsonpCallback:'Handler',//此处可以不写，jquery会自动声生成函数，帮你处理数据
          success:function(json){
            console.log(json.price);
          },
          error:function(){
            alert('error');
          }
        })
      })
    </script>
  </body>
</html>