[轉]一次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 代碼,一切正常了。

  舉一反三,這個問題的原因就是因爲我們沒有按照規範去寫網頁。所以,舉一反三,HTML 的規範還有哪些,太多了,記也記不住。但也許你會知道有一個叫 http://validator.w3.org 的網站可以幫你校驗你網頁中的很多不規範的東西

  後記

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

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

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

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

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


發佈了10 篇原創文章 · 獲贊 4 · 訪問量 4萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章