jsonp 跨域通信的实现

jsonp 跨域通信的实现

       在js中，让 s1.example.com (s1) 可以于 s2.example.com (s2) 通信
   
    js跨域发送消息是没有权限的，也没有办法从其他域名获取返回的数据
   
    如： (在 s1 下)

     $.ajax({

        url: 'http://s2.example.com/get_data',

        type: 'get',

        data:{id: 10},

        dataType: 'json',

         success: function( result){

             alert(result.type);

        }

    });

    这是一个典型的客户端ajax请求，并且以get方式发送了一个id=10的参数到服务器
    服务器返回的result结构 {type:'error/success'}
    这里是无法将数据发送的该服务器的, 也无法从服务器获取返回数据，因为无法和服务器通信
   
    注意：
    s1 中的 <script src=" http://s2.example.com/code.js"></script> 是可以获取到src属性指向的文件的数据
    通过这点就可以获取到 http://s2.example.com/get_data 中的数据, 但获取到的数据是成为了js代码的一部分, 可以当成js代码执行；
    就可以调用我们已经定义好了函数，把参数传递给该函数就相当于获取到了服务器返回的数据, 所以请求只能是get方式, 因为src的是get行为；
    <script src=" http://s2.example.com/get_data?id=10"></script>

 举例：
    s1:
    <script type="text/javascript">
        
        // 返回值处理函数
        function handler(response){
            alert(response);
        }
        
        // 方式一
        $('#XXX').click(function(){
            var $script = $('<scr' + 'ipt src=" http://s2.example.com/server?id=10 "></scr' + 'ipt>');
            $script.appendTo( $('body') );
        });
        
    </script>
    
    s2:php服务器语言: server(); 
    
    public function server(){
    
        if( isset($_GET['id']) ){
            $id = $_GET['id'];
        }
        
        echo('handler("您发送的id='. $id .'");');
        
    }
    
    结果：
    s1 的页面中会弹出结果：
        "您发送的id=10"
    
    利用jsonp更方便：
    s1:
    
    <script type="text/javascript">
        $('#control_ID').click(function(){
            $.ajax({
                url:' http://s2.example.com/server?callback= ?',    // callback=? 问号部分会被 jsonpCallback 属性值代替
                data:{id:10},
                type:'GET',
                dataType:'jsonp',                                // dataType = jsonp 返回的数据会被当作js代码的一部分
                jsonpCallback:'handler',                        // jsonpCallback = handler 设置客户端会被执行的函数名称,会被发送到服务器
                success:function(response){
                    alert('success: ' + response);                // 这里也可以获取到handler()函数的参数值
                }
            });
        });
        function handler(response){
            alert(response);
        }
    </script>
    
    s2:
    public function server(){
        $id = $_GET['id'];
        $callback = $_GET['callbck'];
        $arg = '你提交的id=' . $id;
        echo($callback . '("'. $arg .'");');    // 不管怎么样，服务器端返回的都是 function_name(arg); 这样的格式
    }