在做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后面加的东西,不一定是时间,也可以用随机数生成器。只要保证两次请求的内容不相同即可。