迹忆博客
当前位置: 主页 > 学无止境 > 网络 > 文章

IE对于Ajax跨域的问题

发布时间: 2017-03-01 作者: 迹忆 浏览次数:

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对于跨域问题限制的还是比较严格的。对于我们程序员来说就比较麻烦了,但是这些问题总归要解决的。

赞助
迹忆博客

上一篇:微信公众号接收消息 事件消息处理

下一篇:没有了

除非注明转载,本站文章均为原创,欢迎转载,转载请以链接形式注明出处

本文地址: