JSONP跨域访问

     做为一个程序猿在开发项目中，难免会遇到系统与系统之间的交互，特别是现在各种框架的应用，在做业务分析的时候都会根据不同的业务应用分不同的小系统，各自为营。这样做的好处是不言而喻的，使业务解耦、系统解耦方便系统的维护及扩展。那么系统与系统之间的交互就会成为设计的一个重要的组成部分，根据业务要求的不同可以使用：

1.MQ同步：activeMQ\kafka\rabbitMQ\zeroMQ等等这一类 

2.定时同步：实现方式有很多种，可以用spring的定时任务，也可以使用主机的 crontab 定时处理等等。

3.HTTP或webservice实时接口：这个是系统之间最常用的一种，可以使用oracle的jersey或jboss的resteasy、CXF、axis2等等

    以上这几种都是服务器之间的交互，通常的方式是前端浏览器请求当前系统服务，再由当前系统服务与其它系统交互。如果是一个简单的请求其它系统就可以完成的业务，那么这种实现方式就有些绕圈子了，那么有没有一种交互是浏览器直接调用其它系统的服务而不用再次在当前系统呢？答案是肯定的，那么就先介绍我们今天的主角：JSONP跨域访问。

什么是JSONP？

    当我们看到JSONP（JSON with Padding）时就会想到JSON(JavaScript Object Notation)那么这两者有什么关系呢？首先JSON是一种数据格式，就像XML一样使我们的数据可以格式化(JSON协议)方便解析和处理数据，是一种数据交换格式。而JSONP则是数据交互传递双方约定的处理方法。

    一般的ajax请求是不允许跨域请求的，但是我们发现web页面上的某些标签则不受域的限制，比如：<script><iframe>等。所以可以通过包装这些标签把远程服务返回的结果装进javascript格式的文件中，前端再通过一些方法获取和处理返回值，而由于JSON的特性使得它在JS中被原生的支持，所以JSONP的诞生就顺理成章了。JSONP的原理很简单，就是发送一个请求URL到服务端获得返回的数据后再自己处理(看起来很像ajax但原理不一样)，为了方便这种操作，就形成了这种传输协议称为JSONP。该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

使用JSONP

    上面说了<script><iframe>等这种标签不受跨域限制，所以可以直接使用这些标签来请求，例如：

例1:

<script type="text/javascript">
    function myCallback(data) {
        for(var i in data) {
            alert(i+":"+data[i]);
        }
    }
</script>
<script type="text/javascript" src="http://otherdomain.com/services.action?callback=myCallback"></script>

或

<script type="text/javascript">
    function myCallback(data) {
        for(var i in data) {
            alert(i+":"+data[i]);
        }
    }
    var JSONP=document.createElement("script");
    JSONP.type="text/javascript";
    JSONP.src="http://otherdomain.com/services.action?callback=myCallback";
    document.getElementsByTagName("head")[0].appendChild(JSONP);
</script>

jquery已经为我们封装好了：

   $.getJSON
   $.ajax
   $.get

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $.getJSON("http://otherdomain.com/services.action?callback=?",//callback=?jQuery自动生成的随机函数名
            function(data) {
                for(var i in data) {
                    alert(i+":"+data[i]);//循环输出a:1,b:2,etc.
                }
            });
</script>
或

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $.ajax({
        type: "get",
        async: false,
        url: "http://otherdomain.com/services.action",
        dataType: "jsonp",
        jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
        jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
        success: function(json){
            alert(json.attr);
        },
        error: function(){
            alert('fail');
        }
    });
</script>

 其它方式基本上都和变通的ajax请求使用类似。

安全问题

        从上例中可以看到没有关于 JSONP 调用的错误处理。如果动态脚本插入有效，就执行调用；如果无效，就静默失败。失败是没有任何提示的。例如，不能从服务器捕捉到 404 错误，也不能取消或重新开始请求。不过，等待一段时间还没有响应的话，就不用理它了。JSONP 的另一个主要缺陷是被不信任的服务使用时会很危险。因为 JSONP 服务返回打包在函数调用中的 JSON 响应，而函数调用是由浏览器执行的，这使宿主 Web 应用程序更容易受到各类攻击。如果打算使用 JSONP 服务，了解它能造成的威胁非常重要。