面向对象之同源跨域（jsonp）

1.同源策略

同源策略是浏览器的一种安全策略，所谓同源指的是请求URL地址中的协议、域名和端口都相同，只要其中之一不相同就是跨域
同源策略主要为了保证浏览器的安全性
在同源策略下，浏览器不允许Ajax跨域获取服务器数据

图解：

跨域.png

2.资源异步加载

 <script type="text/javascript" async 
 src="http://tom.com/data.php?flag=1"></script>

3.jsonp的原理分析

html页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        /*
        hello就是回调函数
        
        */
        function hello(data){
            console.log(data);
        }
        var script = document.createElement('script');
        script.src = 'http://tom.com/data.php?_cb=hello&username=zhangsan&password=123';
        var head = document.getElementsByTagName('head')[0];
        head.appendChild(script);      
    </script>
</head>
<body>  
</body>
</html>

后台php页面：

<?php
$data = 'ddd';
echo 'hello($data)';

?>

注意：在js中的函数必须挂载到window对象的下面，否者会访问不到。

这就是jsonp的本质：动态创建script标签，然后通过它的src属性发送
跨域请求，然后服务器端响应的数据格式为【函数调用（foo(实参)）】，
所以在发送请求之前必须先声明一个函数，并且函数的名字与参数中传递的
名字要一致。这里声明的函数是由服务器响应的内容（实际就是一段
js代码-函数调用）来调用据格式为【函数的调用hello()】

4.jQuery使用jsonp 获取数据

    $.ajax({
        type:'get',
        url:'http://tom.com/json.php',
        dataType:'jsonp',
        data:{},
        jsonp:'cb',   //改变jsonp的名字
        jsonpCallback:'abc'//返回回调函数的名字
        success:function(data){
            console.log(data);
        },
        error:function(data){
            console.log(data);
        }
        
    })

<?php
    $cb=$_GET[callback];
    $arr=array("username"=>"zhangsan");
    echo $cb.'('.json_encode($arr).')';
?>

封装jsonp


function ajax(obj){
    // jsonp仅仅支持get请求
    var defaults = {
        url : '#',
        dataType : 'jsonp',
        jsonp : 'callback',
        data : {},
        success:function(data){console.log(data);}
    }

    for(var key in obj){
        defaults[key] = obj[key];
    }
    // 这里是默认的回调函数名称
    // expando: "jQuery" + ( version + Math.random() ).replace( /\D/g, "" ),
    var cbName = 'jQuery' + ('1.11.1' + Math.random()).replace(/\D/g,"") + '_' + (new Date().getTime());
    if(defaults.jsonpCallback){
        cbName = defaults.jsonpCallback;
    }

    // 这里就是回调函数，调用方式：服务器响应内容来调用
    // 向window对象中添加了一个方法，方法名称是变量cbName的值
    window[cbName] = function(data){
        defaults.success(data);//这里success的data是实参
    }

    var param = '';
    for(var attr in defaults.data){
        param += attr + '=' + defaults.data[attr] + '&';
    }
    if(param){
        param = param.substring(0,param.length-1);
        param = '&' + param;
    }
    var script = document.createElement('script');
    script.src = defaults.url + '?' + defaults.jsonp + '=' + cbName + param;
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(script);

    // abc({"username":"zhangsan","password":"123"})
}