解决IE下Ajax请求无效

在做web开发是，大多时候都会使用FireFox作为调试的浏览器。上面携带的FireBug用来调试JavaScript实在是太方便了，绝大多数的问题都能够通过它跟踪调试出来。但是，当项目发布时，不能仅在这一款浏览器是运行正常就算正常了。还要做浏览器的兼容性测试。说到IE，相信很多人都会很头疼。这段时间就碰到了问题，使用Ajax去后台请求数据，在前台更新显示。开发阶段，在FireFox上一切正常。但到了测试阶段，在IE上，这个小小的功能却怎么也没法正常运行。好在，之前有所耳闻IE的这个“亮点”，于是顺着这个路子去修改代码，果然又恢复正常了。

 首先说明一下IE的这个“亮点”，IE有个缓存机制，对请求的url进行判断，发现短时间内请求的url相同，则使用缓存的数据，而不是去重新向服务器获取一次数据。数据缓存也有好处，但对于需要经常去后台获取数据更新的需求来说，这就是个麻烦了。那怎么解决这个问题呢？既然是对相同的url认为是重复请求，那我就想办法每次请求的url值都不相同，同时还保证是我要的数据。我们采用在url中增加一个无用的参数，且这个参数每次都在变（时间！）。

这里举个简单的例子，从后台获取实时时间。普通的做法如下，此时在chrome、FireFox上不停的向后台请求获取实时数据，会发现页面上的时间会不停的改变。但换到IE浏览器下，第一次点击时间会出现，当不断重复点击时，时间仍旧停留在第一次获取到的时间上。

  function ajaxUrlOld() {
            var xmlHttp = new XMLHttpRequest();

            xmlHttp.open("get", "Handler.ashx?method=GetDateTime");

            xmlHttp.onreadystatechange = function () {
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    var strJson = xmlHttp.responseText;
                    document.getElementById('dataP').innerHTML = strJson;
                }
            }
            xmlHttp.send(null);
        }

对以上代码进行如下的修改，则可以解决掉该问题。这时候，在IE下也能获取到实时的时间了。

 function ajaxUrlNew() {
            var xmlHttp = new XMLHttpRequest();
            var url = "Handler.ashx?method=GetDateTime&datetime=" +new Date().getTime(); //url后面加点变化的东西
            xmlHttp.open("get", url);

            xmlHttp.onreadystatechange = function () {
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    var strJson = xmlHttp.responseText;
                    document.getElementById('dataP').innerHTML = strJson;
                }
            }
            xmlHttp.send(null);
        }

以简单的例子说明问题，真想获取时间，JS直接实现了，没必要向后台请求。另外，URL后面加的东西，不一定是时间，也可以用随机数生成器。只要保证两次请求的内容不相同即可。

 

转载于:https://www.cnblogs.com/gxwang/p/4843254.html