一次Ajax查錯的經曆

先說故事，再說想法吧。

我有一朋友做網站，用jQuery的Ajax方法從後端載入一段HTML代碼然後動態插入到網頁的Div元件中。這個東西太普遍了。jQuery強大的load方法可以完成這個事情。朋友的代碼是這麼寫的：

var tab = jQuery("#dynamic_tab");var url = "/list_ajax/";tab.load(url);

簡單到不能再簡單了。在Chrome，Firefox，Safari下運行一點問題也沒有，只有IE不行，不管是IE7，IE8，還是IE9。問題的癥狀是，使用IE訪問那個Ajax的連結，沒有問題，但是在jQuery的Ajax方法返回了“undefined”的respons對象。沒有任何報錯！

怎麼搞也搞不定，只好Google了一下——“jQuery load IE”，一看，很多人都在問這個問題。於是開始了散彈槍編程方式。

排在第一的就是StackOverflow被瀏覽了33K次的這個問題：jQuery’s .load() not working in IE – but fine in Firefox, Chrome and Safari，答案沒有被打勾（不靠譜），StackOverflow還有很多人問相似的問題，不過都沒有答案。不管三七二十一，先試了一下，散彈槍嘛。試了半天都沒有用。

然後上Google查，又看到有人說的IE緩衝的問題，什麼，要把cache設定成false，或是用下面的方法來解決：

var tab = jQuery("#dynamic_tab");var fuckie = Math.random();var url = "/list_ajax/"+"?fuckie="+fuckie;tab.load(url);

反正還是一樣，統統不Work，幾乎所有的都試了，都不Work。搞了一天的朋友惱怒道：“Microsoft應該快點倒閉吧，產品太爛了”。IE的確是太爛了。

於是我用IE9的網頁調試器可以看到點了Ajax的連結後，IE對網站有http的Ajax請求，也可以看到請求返回了，但是就是不顯示在我的頁面上——jQuery的Ajax的responseText為undefined!

對於我這個老傢伙，對jQuery也不熟，我只得開始調試jQuery的代碼，想看看裡面幹了什麼，報了什麼錯？調了一個小時，基本上把jQuery的Ajax的封裝看懂了七七八八了，但是還是沒找到為什麼有問題。

於是，我只得架起原生態的Ajax，看看IE的那個Ajax的ActiveX的對象幹了什麼事？寫了下面的代碼（當年寫Ajax就是這麼寫的，所以也不費勁，況且網上還有常式可以抄）：

function InitAjax(){    var ajax=false;    try {        ajax = new ActiveXObject("Msxml2.XMLHTTP");    } catch (e) {        try {            ajax = new ActiveXObject("Microsoft.XMLHTTP");        } catch (E) {            ajax = false;        }    }    if (!ajax && typeof XMLHttpRequest!='undefined') {        ajax = new XMLHttpRequest();    }    return ajax;}var ajax = InitAjax();ajax.open("GET", url, true);ajax.onreadystatechange = function() {    if (ajax.readyState == 4 && ajax.status == 200) {        var show = document.getElementById("HaoChenDIV").value;        show.innerHTML = ajax.responseText;    }}ajax.send(null);

一運行，還是不行，沒見IE報什麼錯，不過，可以確定這不是jQuery的問題了，估計還是我們自己程式的問題。不過此時的程式太好調試了，調試中，在IE9下調式發現原生的IE的Ajax對象在onreadystatechange函數裡，其responseText是下面這個樣子：

什麼是“系統錯誤: -1072896658”？上google一查，一堆頁面，基本上是說亂碼了，也就是ajax的後端程式返回的網頁編碼不認識吧。需要在返回的http header裡加上 charset=utf-8。

於是，修改後端的Ajax的程式，明確指定了返回的HTTP Header中的charset，於是IE下就工作正常了，再切回jQuery的load代碼，一切正常了（後端的程式本來是utf-8的編碼格式，但是不骨明確在HTTP Header中指定，但是只有IE不會自動檢測）。

這個問題的原因就是因為我們沒有按照規範去寫網頁。所以，舉一反三，HTML的規範還有哪些，太多了，記也記不住。但也許你會知道有一個叫 http://validator.w3.org 的網站可以幫你校正你網頁中的很多不規範的東西。這個工具會報很多很多錯，很多都有點吹毛求疵，不過，可以讓你看看（註：今天的coolshell裝了很多外掛程式，也被我調過一些東西，所以出錯很多，我還記得以前沒有外掛程式沒有我定製化的樣式的時候，Wordpress一個錯都不報）。

後記

我把這個問題和過程分享出來，主要有這麼幾個目的，並拋出幾個問題，大家可以思考一下：

1）這個問題網上有很多人都在報，但是基本上找不到答案（包括StackOverflow），所以，我分享出來，填補一下空白。

2）我相信我們的程式員天天都在經曆這樣的事，我不知道大家在遇到這樣的事情會怎麼做？也許大多數人都在網上查各種解決方案，然後一個一個的試，直到試對了——散彈槍式的編程，呵呵。當然，大多數答案都是可能找到的。但當我們找到答案了後，我們還會深入去瞭解這個問題的具體原因並舉一反三地去思考一其周邊的東西嗎？

3）另外，在今天這樣N多架構，N多lib，N多開源的年代下，不知道大家有沒有失去了從零開始自己寫代碼的能力？比如上面的這個問題，不知道有多少人還會自己寫原生態的Ajax？不過，我還是建議大家能在使用各種架構的時候，明白那些最基礎的知識，求甚解，知其然知其所以然，真的很重要。

我是從那個“吃糠的年代”過來的程式員，那時的程式員什麼都要自己幹，很辛苦，今天我和很多人說我以前的那些經曆，會被笑話，但是我從這些什麼都自己的乾的年代過的經曆，讓我受益很多。我把我的想法分享給大家，希望對大家有用。

(全文完)

原貼地址