ajax跨域有没有踩过坑，IE低版本浏览器如何支持？

同源策略

为了保证用户信息的安全，防止恶意的网站窃取数据，所有的浏览器都实行这个策略。

同源策略是指，用户在A网页上的所产生的信息，B网页上不能访问，反过来A网页也不能访问其它网页的信息，除非这两个网页"同源"。

为什么说同源策略可以保证用户信息安全，举个栗子：A网站是一家银行，用户登录以后，又去浏览其他网站。如果其他网站可以读取A网站的 Cookie，会发生什么？

两个文档同源需满足

1. 协议相同

2. 域名相同

3. 端口相同

Ajax跨域通信

同源策略规定，Ajax请求只能发给同源的网址，否则就报错。然而我们开发过程中常常会碰到需要请求不同服务器上的数据。那么Ajax跨域通信就必须要解决了。

三种方式：

JSONP：JSONP是服务器与客户端跨源通信的常用方法，网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。可惜只能是发送 get 请求
WebSocket：WebSocket是一种通信协议，使用ws://（非加密）和wss://（加密）作为协议前缀。该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信。（基本上不用此种方式，学习成本比较高）
CORS：CORS是跨源资源分享（Cross-Origin Resource Sharing）的缩写。它是W3C标准，是跨源AJAX请求的根本解决方法。CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10

CORS

ie浏览器版不能低于IE10
后台服务器脚本需要明白的一些请求头：

Access-Control-Allow-Origin：允许哪些url可以跨域请求到本域，Access-Control-Allow-Origin:* 表示所有url都可以请求到本域名，如果你很懒可以这样写

Access-Control-Allow-Methods:允许的请求方法，一般是GET,POST,PUT,DELETE,OPTIONS

Access-Control-Max-Age：表明在该时间段内不再“预检”允许的请求方法（相当于缓存），即不以OPTIONS方法进行请求

Access-Control-Allow-Headers：允许哪些请求头可以跨域

CORS Python服务器请求头示例：

你将以下代码放到你的php代码的头部，咱们就可以实现ajax跨域请求了

response = HttpResponse(json.dumps({"key": "value", "key2": "value"})) response["Access-Control-Allow-Origin"] = "*" response["Access-Control-Allow-Methods"] = "POST, GET, OPTIONS" response["Access-Control-Max-Age"] = "1000" response["Access-Control-Allow-Headers"] = "*"

IE10以上版本，都好办，问题是有些用户就用了IE7,8该怎么办？当然，首先是鄙视一下这部分用户，鄙视完了，还是要想办法解决问题，毕竟做产品还是要以用户为上~

网上查了一圈，发现IE7 和以前是不支持跨域请求的， IE8 通过 XMLDocumentRequest实现，而不是 XMLHTTPRequest，所以IE8下面应该这样写：

// 创建XHR对象
function createCORSRequest(method, url) {
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr) {
        // 针对Chrome/Safari/Firefox.
        xhr.open(method, url, true);
    } else if (typeof XDomainRequest != "undefined") {
        // 针对IE
        xhr = new XDomainRequest();
        xhr.open(method, url);
    } else {
        // 不支持CORS
        xhr = null;
    }
    return xhr;
}

// 发送CORS请求
function makeCorsRequest(method, url, cb) {
    // bibliographica.org是支持CORS的
    var xhr = createCORSRequest(method, url);
    if (!xhr) {
        alert('CORS not supported');
        return;
    }

    // 回应处理
    xhr.onload = function () {
        var text = xhr.responseText;
        text = $.parseJSON(text);
        cb(text);
    };

    xhr.onerror = function () {
        alert('Woops, there was an error making the request.');
    };
    xhr.send();
}

拉下来，我们就区分一下浏览器，如果是IE10以下版本，那就直接另一种方式,调用上面的实现方式。