使用jsonp进行跨域请求

1.简介

  • 1.json能够基于纯文本的形式描述复杂的数据内容;
  • 2.ajax允许远程的服务器访问,但是禁止从不同的域请求数据;
  • 3.利用"script"标签没有跨域限制的“漏洞”来达到与第三方通讯的目的;

2.思路

  • 1.创建一个"script"元素,指向第三方API或js地址;
  • 2.响应数据应该为json形式的数据封装;
  • 3.通过约定方法名或url传值的方式经行方法规约;
  • 4.在目标页面约定的js function,可以通过这种形式被调用并传参;
  • 5.所有的请求均为GET形式;

3.简单的demo

  • 1.本地页面jsonp.html 定义一个callback方法,输入回调的内容:

      <script type="text/javascript">
      var JsonpCallbackDemo = function(data){
          alert(data.result);
          return false;
      };
      </script>
      <script src="//xx/js/test/test.jsonp.js" charset="utf-8"></script>
    
  • 2.目标js test.jsonp.js 调用约定的方法,传递一个json格式的参数;

      JsonpCallbackDemo({"result": "json result"});
    

4.注意

  • 1.所有引用js的加载方式都是后加载;
  • 2.如果需要像demo中使用第三方调用本地方法,第三方地址的"script"引用必须在本地方法定义的后面被声明,否则方法将不能被声明;
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容