迹忆客 专注技术分享

Ajax在web系统中应用非常广泛，但是在web系统中经常会遇到跨域的问题。默认情况下，各浏览器对Ajax跨域访问是禁止的。限制尤其严格的当属IE浏览器。对于火狐，谷哥，safari等浏览器使用JQuery中的Ajax跨域访问是比较简单的。在《Ajax跨域Cookie相关设置》这篇文章中对这个问题所涉及到的Ajax和服务端进行了介绍。这里就不再赘述。

下面我们着重介绍在IE浏览器下应该如何允许Ajax跨域访问。

通过上面那篇文章我们知道，如果仅仅是允许浏览器跨域访问的话，那也是非常简单。在浏览器端不需要做任何的修改，就是正常的Ajax代码即可，所做的工作都在服务端进行设置。

Ajax代码

$.ajax({
       url: 'http://www.onmpw.com/ajax.php',
       type: 'get',
       dataType: 'json',
       success: function (res) {
           console.log(res);
       },
       error: function (err) {
          console.log(err);
       }
 }) 

php代码

$origin = $_SERVER['HTTP_ORIGIN'];
header("Access-Control-Allow-Origin:" . $origin);

当然了，对于IE浏览器来说其实服务端是相同的。所不同的就是前端部分。并不是IE浏览器都不支持类似上面的跨域方式，IE10+就是能够很好的支持的。这是值得我们高兴的地方。毕竟IE给我们留了一条活路。但是IE8、IE9依然活在大部分用户的电脑上面。所以我们也需要考虑那些执著的用户。

抱着侥幸的心理，我们在IE9上面运行了上述的代码。刚刚燃起的希望之火一下子就被浇灭了。怎么办，于是修改Ajax代码

$.ajax({
     url: 'http://www.onmpw.com/ajax.php',
     type: 'get',
     crossDomain: true,
     dataType: 'json',
     success: function (res) {
        console.log(res);
     },
     error: function (err) {
        console.log(err);
     }
 })

这次应该没问题了，继续运行。结果希望被二度消灭。经过一阵子的翻箱倒柜恍然大悟，原来IE9是不支持crossDomain的。

怎么办，难道只能放弃执著于IE9-的那些用户了？不能够，总得给那些用户一个坚持下去的理由啊！

虽然使用JQuery在IE9-下不能跨域访问，但是可以使用IE提供的XDomainRequest来进行访问。下面我们来看一下应该如何使用：

var xdr = new XDomainRequest(); // Use Microsoft XDR
xdr.open('get', 'http://www.onmpw.com/ajax.php');
xdr.onload = function () {
   var dom  = new ActiveXObject('Microsoft.XMLDOM'),JSON = $.parseJSON(xdr.responseText);
   dom.async = false;
   if (JSON == null || typeof (JSON) == 'undefined') {
         JSON = $.parseJSON(data.firstChild.textContent);
   }
   console.log(JSON.RES); //JSON.RES是返回结果
};
xdr.onerror = function() {
   _result = false;
};
xdr.send();

在服务端代码不用改变的情况下上述Ajax终于可以在IE9-浏览器上跨域跑起来了。

总起来说，IE对于跨域问题限制的还是比较严格的。对于我们程序员来说就比较麻烦了，但是这些问题总归要解决的。