AJAX跨域

跨域

通过XHR实现AJAX通信的一个主要限制来源于跨域安全。默认情况下，XHR对象只能访问与包含他的页面位于同一个域中的资源。这样可以预防某些恶意行为，但是实现合理的跨域请求对开发某些应用程序是至关重要的。下面来介绍一些XHR实现跨域的方式。

CORS

CORS实现跨域的思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败。

在向服务器发送请求时会额外附加一个Origin头部，其中包含请求页面的源信息(协议、域名和端口)，服务器可以根据这个头信息来决定是否给予响应。

　　Origin: http://www.baidu.com

如果服务器认为该请求可以接受，就在Access-Control-Allow-Origin头部中会发相同的源信息或者(*)

　　Access-Control-Allow-Origin: http://www.baidu.com

如果没有这个头部，或者这个头部信息和源信息不匹配，浏览器就会驳回请求。

NOTE：通过CORS发送的请求和响应都不会包含cookie信息。

1、IE对CORS的实现（IE8、IE9、IE10，IE11+可以通过XHR实现跨域）

　　IE8+引入了XDR(XDomainRequest)对象，该对象与XHR类似，并且能实现安全可靠的跨域通信。XDR与XHR的不同：

　　　　cookie不能发送也不会随响应返回

　　　　只能访问请求头和响应头的Content-Type字段(不能设置)

　　　　不允许访问响应头部信息

　　　　只支持GET和POST请求

　　　　只能发送异步请求，不能发送同步请求

XDR在接受到响应后只能访问响应返回的数据，没办法确定响应的状态代码。但是只要响应有效就会触发load事件，失败就会触发error事件。

get请求的XDR示例：

header('Access-Control-Allow-Origin:http://localhost:63342');
echo json_encode($_GET);

    var xdr = new XDomainRequest();
    xdr.open('get', 'http://localhost/ajax/data.php?'+fnGetURLParam({name: 'hum', age: 20}));
    xdr.send(null);
    xdr.onload = function(){
        console.log(xdr.responseText);
    }
    xdr.onerror = function(){
        console.log('error');
    }

post请求的XDR示例：

header('Access-Control-Allow-Origin:http://localhost:63342');
echo json_encode($_POST);

    var xdr = new XDomainRequest();
    // xdr.contentType = "application/X-www-form-urlencoded"; // contentType是只读的（IE8报错IE9不报错但是设置不成功）
    xdr.open('post', 'http://localhost/ajax/data.php');
    xdr.send(fnGetURLParam({name: 'hum', age: 20}));
    xdr.onload = function(){
        console.log(xdr.responseText); // []
        console.log(xdr.contentType); // text/html
    }
    xdr.onerror = function(){
        console.log('error');
    }

　　NOTE：XDR的post请求无法设置请求头Content-Type为application/x-www-form-urnencoded，后端不能获取请求数据。为了兼容IE89不能使用POST方式。

XDR对象的其他方法、事件、属性：

　　abort方法：在响应前调用来中断请求

    var xdr = new XDomainRequest();
    xdr.open('get', 'http://localhost/ajax/data.php?'+fnGetURLParam({name: 'hum', age: 20}));
    xdr.send(null);
    xdr.onload = function(){
        console.log(xdr.responseText); // 不会执行
    }
    xdr.onerror = function(){
        console.log('error');
    }
    xdr.abort(); // 中断请求

　　NOTE：timeout属性、ontimeout事件可能有些问题。考虑使用jquery的定时器调用abort来模拟超时。XHR对象也可。

header('Access-Control-Allow-Origin:http://localhost:63342');
sleep(10);
echo json_encode($_GET);

    var xdr = new XDomainRequest();
    xdr.open('get', 'http://localhost/ajax/data.php?'+fnGetURLParam({name: 'hum', age: 20}));
    xdr.send(null);
    xdr.onload = function(){
        console.log(xdr.responseText); //没有输出
    }
    xdr.onerror = function(){
        console.log('error');
    }
    setTimeout(function(){
        xdr.abort();
    }, 1000);

2、标准浏览器对CORS的支持

　　标准浏览器都对XHR对象实现了对CORS的原生支持。

　　XHR的CORS跨域，XHR对象可以访问status和同步请求，但是也有一些限制：

　　　　不能使用setRequestHeader设置自定义头部信息

　　　　不能发送和接受cookie

兼容IE8+的CORS封装：

    // 兼容IE8+ 只能发送get类型的异步跨域请求
    function fnGetCorsRequest(url, data, fnSuccess, fnError) {
        var xhr = new XMLHttpRequest;
        if ('withCredentials' in xhr) {
            xhr.open('get', url + '?' + fnGetURLParam(data), true);
        } else {
            xhr = new XDomainRequest;
            xhr.open('get', url + '?' + fnGetURLParam(data));
        }
        xhr.send(null);
        if (fnSuccess) { // 成功
            xhr.onload = function () {
                fnSuccess(xhr.responseText);
            }
        }
        if (fnError) { // 失败
            xhr.onerror = function (e) {
                fnError(e);
            }
        }
        return xhr;
    }
    // 测试
    var xhr = fnGetCorsRequest(
            'http://localhost/ajax/data.php',
            {name: 'hum', age: 20},
            function (data) {
                console.log(data);
            },
            function (e) {
                console.log(e);
            }
    );
    
    // 获取URLParam的辅助方法
    function fnGetURLParam(data) {
        var urlParam = [];
        for (var key in data) {
            urlParam.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
        }
        return urlParam.join('&');
    }

IE11+和标准浏览器的CORS跨域封装：

    // 兼容IE11+和标准浏览器 支持异步和同步 get和post
    function fnGetCorsRequest(method, url, data, bAsyn, fnSuccess, fnError) {
        var xhr = new XMLHttpRequest;
        data = fnGetURLParam(data);
        if (method == 'get') {
            url += '?' + data;
            data = null;
        }
        xhr.open(method, url, bAsyn);
        if(method == 'post'){
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // setRequestHeader要放在open后
        }
        xhr.onload = function () {
            fnSuccess && fnSuccess(xhr.responseText);
        }
        xhr.onerror = function (e) {
            fnError && fnError(e);
        }
        xhr.send(data); // 支持同步 send方法应该放在事件绑定后面

        return xhr;
    }
    // 测试
    var xhr = fnGetCorsRequest(
            'post',
            'http://localhost/ajax/data.php',
            {name: 'hum', age: 20},
            true,
            function (data) {
                console.log(data);
            },
            function (e) {
                console.log(e);
            }
    );

    // 获取URLParam的辅助方法
    function fnGetURLParam(data) {
        var urlParam = [];
        for (var key in data) {
            urlParam.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
        }
        return urlParam.join('&');
    }

 

Image对象（img标签）

一个网页可以从任何其他网页加载图片，而不会出现跨域的问题。

    var oImg = new Image;
    oImg.src = 'http://blog.smdcn.net/dizxcv.png';
    oImg.onload = function(){
        document.body.innerHTML += '<img src="' + oImg.src + '" />';
    }

缺点：只能get请求，无法访问响应文本......

JSONP

JSONP（JSON with padding）填充式的JSON的缩写，是被包含在函数调用中的JSON。

JSONP由两部分组成：回掉函数和JSON

　　回调函数是当响应返回时在页面中需要执行的函数

　　JSONP是通过script标签来使用的，在src中可以制定一个跨域的URL

优点：

　　可以直接访问响应文本，支持浏览器与服务器双向访问

缺点：

　　安全性低

　　只能进行get请求

　　不能检测请求失败

$data = json_encode(array(            // php代码
    'name' => $_GET['name'],
    'age' => $_GET['age']
));
$callback = $_GET['callback'];
echo $callback.'('. $data .')';

    function fnUseJSONP(url, data, fnCallback) {           // js代码
        var oScript = document.createElement('script');
        oScript.type = 'text/javascript';
        if (data) {
            oScript.src = url + '?' + fnGetURLParam(data) + '&callback=!' + fnCallback;// 注意这个！号
        } else {
            oScript.src = url + '?callback=!' + fnCallback; // 注意这个！号
        }
        // 请求返回!function (data) {                console.log(data);            }({"name":"hum","age":"20"})
        // 为了让该函数自执行可以加上!等
        document.body.appendChild(oScript);
    }

    fnUseJSONP(
            'http://localhost/ajax/data.php',
            {name: 'hum', age: 20},
            function (data) {
                console.log(data);
            }
    );

    // 获取URLParam的辅助方法
    function fnGetURLParam(data) {
        var urlParam = [];
        for (var key in data) {
            urlParam.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
        }
        return urlParam.join('&');
    }

 

其他跨域技术

comet、SSE、web sockets有兴趣的同学可以自行研究。。。