一次Ajax查錯(cuò)的經(jīng)歷
先說故事，再說想法吧。
我有一朋友做網(wǎng)站，用 jQuery 的 Ajax 方法從后端載入一段 HTML 代碼然后動(dòng)態(tài)插入到網(wǎng)頁的 p 元件中。這個(gè)東西太普遍了。jQuery 強(qiáng)大的 load 方法可以完成這個(gè)事情。朋友的代碼是這么寫的：
- var tab = jQuery ("#dynamic_tab");
- var url = "/list_ajax/";
- tab.load (url);
簡(jiǎn)單到不能再簡(jiǎn)單了。在 Chrome，F(xiàn)irefox，Safari 下運(yùn)行一點(diǎn)問題也沒有，只有 IE 不行，不管是 IE7，IE8，還是 IE9。問題的癥壯是，使用 IE 訪問那個(gè) Ajax 的鏈接，沒有問題，但是在 jQuery 的 Ajax 方法返回了“undefined”的 respons 對(duì)象。沒有任何報(bào)錯(cuò)！
怎么搞也搞不定，只好 Google 了一下——“jQuery load IE”，一看，很多人都在問這個(gè)問題。于是開始了散彈槍編程方式。
排在第一的就是 StackOverflow 被瀏覽了 33K 次的這個(gè)問題：jQuery’s .load () not working in IE – but fine in Firefox， Chrome and Safari，答案沒有被打勾（不靠譜），StackOverflow 還有很多人問相似的問題，不過都沒有答案。不管三七二十一，先試了一下，散彈槍嘛。試了半天都沒有用。
然后上 Google 查，又看到有人說的 IE 緩存的問題，什么，要把 cache 設(shè)置成 false，或是用下面的方法來解決：
- var tab = jQuery ("#dynamic_tab");
- var fuckie = Math.random ();
- var url = "/list_ajax/"+"?fuckie="+fuckie;
- tab.load (url);
反正還是一樣，統(tǒng)統(tǒng)不 Work，幾乎所有的都試了，都不 Work。搞了一天的朋友惱怒道：“Microsoft 應(yīng)該快點(diǎn)倒閉吧，產(chǎn)品太爛了”。IE 的確是太爛了。
于是我用 IE9 的網(wǎng)頁調(diào)試器可以看到點(diǎn)了 Ajax 的鏈接后，IE 對(duì)網(wǎng)站有 http 的 Ajax 請(qǐng)求，也可以看到請(qǐng)求返回了，但是就是不顯示在我的頁面上——jQuery 的 Ajax 的 responseText 為 undefined!
對(duì)于我這個(gè)老家伙，對(duì) jQuery 也不熟，我只得開始調(diào)試 jQuery 的代碼，想看看里面干了什么，報(bào)了什么錯(cuò)？調(diào)了一個(gè)小時(shí)，基本上把 jQuery 的 Ajax 的封裝看懂了七七八八了，但是還是沒找到為什么有問題。
于是，我只得架起原生態(tài)的 Ajax，看看 IE 的那個(gè) Ajax 的 ActiveX 的對(duì)象干了什么事？寫了下面的代碼（當(dāng)年寫 Ajax 就是這么寫的，所以也不費(fèi)勁，況且網(wǎng)上還有例程可以抄）：
- 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 ("HaoChenp") .value;
- show.innerHTML = ajax.responseText;
- }
- }
- ajax.send (null);
一運(yùn)行，還是不行，沒見 IE 報(bào)什么錯(cuò)，不過，可以確定這不是 jQuery 的問題了，估計(jì)還是我們自己程序的問題。不過此時(shí)的程序太好調(diào)試了，調(diào)試中，在 IE9 下調(diào)式發(fā)現(xiàn)原生的 IE 的 Ajax 對(duì)象在 onreadystatechange 函數(shù)里，其 responseText 是下面這個(gè)樣子：
什么是“系統(tǒng)錯(cuò)誤: -1072896658”？上 google 一查，一堆頁面，基本上是說亂碼了，也就是 ajax 的后端程序返回的網(wǎng)頁編碼不認(rèn)識(shí)吧。需要在返回的 http header 里加上 charset=utf-8。
于是，修改后端的 Ajax 的后端程序，明確指定了返回的 HTTP Header 中的 charset，于是 IE 下就工作正常了，再切回 jQuery 的 load 代碼，一切正常了。
舉一反三，這個(gè)問題的原因就是因?yàn)槲覀儧]有按照規(guī)范去寫網(wǎng)頁。所以，舉一反三，HTML 的規(guī)范還有哪些，太多了，記也記不住。但也許你會(huì)知道有一個(gè)叫 http://validator.w3.org 的網(wǎng)站可以幫你校驗(yàn)?zāi)憔W(wǎng)頁中的很多不規(guī)范的東西。
后記
我把這個(gè)問題和過程分享出來，主要有這么幾個(gè)目的，并拋出幾個(gè)問題，大家可以思考一下：
1）這個(gè)問題網(wǎng)上有很多人都在報(bào)，但是基本上找不到答案（包括 StackOverflow），所以，我分享出來，填補(bǔ)一下空白。
2）我相信我們的程序員天天都在經(jīng)歷這樣的事，我不知道大家在遇到這樣的事情會(huì)怎么做？也許大多數(shù)人都在網(wǎng)上查各種解決方案，然后一個(gè)一個(gè)的試，直到試對(duì)了——散彈槍式的編程，呵呵。當(dāng)然，大多數(shù)答案都是可能找到的。但當(dāng)我們找到答案了后，我們還會(huì)深入去了解這個(gè)問題的具體原因并舉一反三地去思考一其周邊的東西嗎？
3）另外，在今天這樣N多框架，N多 lib，N多開源的年代下，不知道大家有沒有失去了從零開始自己寫代碼的能力？比如上面的這個(gè)問題，不知道有多少人還會(huì)自己寫原生態(tài)的 Ajax？不過，我還是建議大家能在使用各種框架的時(shí)候，明白那些最基礎(chǔ)的知識(shí)，求甚解，知其然知其所以然，真的很重要。
我是從那個(gè)“吃糠的年代”過來的程序員，那些的程序員什么都要自己干，很辛苦，今天我和很多人說我以前的那些經(jīng)歷，會(huì)被笑話，但是我從這些什么都自己的干的年代過的經(jīng)歷，讓我受益很多。我把我的想法分享給大家，希望對(duì)大家有用。
原文鏈接：http://news.cnblogs.com/n/155378/
【編輯推薦】
【責(zé)任編輯：張偉 TEL：（010）68476606】
