jsonp跨域和CORS跨域

jsonp跨域

js+jsonp

客户端 a:http://localhost

<script type="text/javascript"> 
    function jsonpCallback(response){
        console.log('The responsed data is: '+response.name);
    }
</script>
<script type="text/javascript" src="http://b.com/js/jsonp.js?callback=jsonpCallback"></script> 
<!--注意：JavaScript的连接，必须在function的下面。-->

服务器端 b:http://b.com

//jsonp.js
jsonpCallback({'name':'amy',age:22 })

jquery + jsonp

客户端 a

//不使用jsonp的ajax请求(报错)
        $.ajax({ 
        type: "GET",     
        url: "http://www.b.com/",
        dataType: "json",
        success: function(data) {
             console.log(data); 
        },
        error: function(jqXHR){     
            alert("发生错误：" + jqXHR.status);  
        },     
    });

//使用了jsonp 的请求:
        $.ajax({ 
        type: "GET",     
        url: "http://www.b.com/",
        dataType: "jsonp",
        jsonp:"callback",
        success: function(data) {
              console.log(data);    
        },
        error: function(jqXHR){     
            alert("发生错误：" + jqXHR.status);  
        }     
    });

服务器端 b:
服务端的修改

1.加上获取请求的处理：
$jsonp = $_GET["callback"];//callback名字和请求的名字相同
2.返回参数以前加上$jsonp, 并用（）将参数括住,以php后端为例：
//原来：$result ='{"success":true,"msg":"找到员工：员工编号：' . $value["number"] .'"}';
//改成：$result =$jsonp . '({"success":true,"msg":"找到员工：员工编号：' . $value["number"] .'"})';

ajax的处理把在get请求后追加了callback参数，并给她赋予了参数值，响应值追加了callback的参数值。

局限

jsonp仅支持get请求