解決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后面加的東西，不一定是時間，也可以用隨機數生成器。只要保證兩次請求的內容不相同即可。