使用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"引用必须在本地方法定义的后面被声明,否则方法将不能被声明;