| 2007 年 4 月 20 日 通過(guò)理解錯誤的編碼方式，可以更好地了解如何正確地進(jìn)行編碼。當然，編寫(xiě) Asynchronous JavaScript? + XML（Ajax）有正確的方法，也有錯誤的方法。本文將討論一些需要避免的常見(jiàn)編碼實(shí)踐。 如果人們在第一次就能夠將所有事情全部做對，那么這個(gè)世界將變得完全不同。Ajax 也是如此。我做了大量的工作以支持 Ajax 開(kāi)發(fā)人員（包括我自己），包括編碼、撰寫(xiě)文章和演講。通過(guò)這些工作，我學(xué)到了很多關(guān)于正確和錯誤編寫(xiě) Ajax 的知識。在我的上一篇文章 “五種常見(jiàn) Ajax 模式：可立即使用這些非常有用的 Ajax 設計模式” 中，我介紹了五種用于正確編寫(xiě) Ajax 應用程序的模式。在這篇文章中，我將介紹 Ajax 代碼中常見(jiàn)的五種反模式。 您可能會(huì )問(wèn)，什么是反模式（anti-pattern）？反模式 就是頻繁出現的應用程序設計缺陷，已經(jīng)成為所有人都應該注意的問(wèn)題。我在這里將從較高的層次進(jìn)行討論，而不涉及語(yǔ)法錯誤和鏈接問(wèn)題。 大多數開(kāi)發(fā)人員聽(tīng)說(shuō)過(guò)關(guān)于反模式的一個(gè)很好的例子：結構化查詢(xún)語(yǔ)言（Structured Query Language，SQL）的錯誤使用導致 Web 站點(diǎn)受到 SQL 注入攻擊。這種反模式使得公司損失慘重，并暴露了客戶(hù)記錄，而且不幸的是沒(méi)有一種編程語(yǔ)言可以幸免。因此，我們有必要了解這種模式發(fā)生的原理和原因，以及如何避免。 Ajax 反模式也是如此。我并不是說(shuō)它們將造成公司損失數十億的收入，但是它們可以搞垮服務(wù)器或者提供糟糕的用戶(hù)體驗，這種代價(jià)不僅昂貴，而且令人沮喪。 如果理解了發(fā)生錯誤的內容，您將學(xué)到很多知識。很多時(shí)候，人們僅僅把 Ajax 看作是一種在加載頁(yè)面后從服務(wù)器取回 XML 的方式。這種觀(guān)點(diǎn)非常狹隘，并且如果被錯誤使用，將引發(fā)應用程序的性能問(wèn)題。在本文中，我將解釋這種觀(guān)點(diǎn)之所以錯誤的原因，以及如何修復這種錯誤。 在沒(méi)有必要的時(shí)候輪詢(xún)計時(shí)器 我見(jiàn)到的很多 Ajax 問(wèn)題都和濫用 JavaScript 語(yǔ)言?xún)戎玫挠嫊r(shí)器功能有關(guān)。其中的關(guān)鍵方法是 window.setInterval()。只要看到這種方法，就需要稍微提高警惕；為什么要使用一個(gè)計時(shí)器呢？當然，計時(shí)器有其用途 —— 比如，動(dòng)畫(huà)。 window.setInterval() 方法告訴頁(yè)面以特定的時(shí)間間隔回調某個(gè)函數（比如每秒）。大多數瀏覽器對使用這些計時(shí)器總是說(shuō)得多，做得少，主要是因為 JavaScript 語(yǔ)言是單線(xiàn)程的語(yǔ)言。如果您要求的時(shí)間間隔為 1 秒，那么獲得的回調時(shí)間間隔可能是 1 秒、1.2 秒、9 秒或任何其他時(shí)間。
絕對不需要使用計時(shí)器的一種情況就是等待 Ajax 請求的完成。以 清單 1 為例。
清單 1. Antipat1a_polling.html
<html><script> var req = null; function loadUrl( url ) { if(window.XMLHttpRequest) { try { req = new XMLHttpRequest(); } catch(e) { req = false; } } else if(window.ActiveXObject) { try { req = new ActiveXObject(‘Msxml2.XMLHTTP‘); } catch(e) { try { req = new ActiveXObject(‘Microsoft.XMLHTTP‘); } catch(e) { req = false; } } } if(req) { req.open(‘GET‘, url, true); req.send(‘‘); } } window.setInterval( function watchReq() { if ( req != null && req.readyState == 4 && req.status == 200 ) { var dobj = document.getElementById( ‘htmlDiv‘ ); dobj.innerHTML = req.responseText; req = null; } }, 1000 ); var url = window.location.toString(); url = url.replace( /antipat1a_polling.html/, ‘a(chǎn)ntipat1_content.html‘ ); loadUrl( url ); </script><body> Dynamic content is shown between here:<br/> <div id="htmlDiv" style="border:1px solid black;padding:10px;"> </div>And here.</body></html> |
在進(jìn)行 setInterval 調用之前，所有一切看上去都工作得不錯。這個(gè)調用將設置監視請求狀態(tài)的計時(shí)器，然后使用下載的資源設置頁(yè)面內容。 我將展示一個(gè)更好的解決方案，用來(lái)計算出什么時(shí)候請求能夠完成。同時(shí)，清單 2 展示了頁(yè)面正在請求的文件。
清單 2. Antipat1_content.html
同時(shí) 圖 1 顯示了在我的瀏覽器中看到的頁(yè)面。
圖 1. 放置在 HTML 文檔中的內容
所以，您可能會(huì )問(wèn)自己，“它現在可以工作，不是嗎？如果沒(méi)有出現故障的話(huà)，為什么要修復呢？” 實(shí)際上已經(jīng)出現故障了，因為程序運行得非常慢。計時(shí)器將時(shí)間間隔設置為 1 秒，隨著(zhù)時(shí)間的流逝，請求完全超過(guò)了時(shí)間間隔。所以，您將看到頁(yè)面首先出現一個(gè)空的框，然后再等待一秒鐘，忽然出現大量的內容。多么糟糕！ 如何解決呢？Ajax 天生就是異步的。難道不需要進(jìn)行輪詢(xún)循環(huán)就能查看何時(shí)完成請求嗎？ 結果證明，并非如此。正如我在 清單 3 中展示的一樣，XMLHTTPRequest 對象所提供的全部?jì)热菔且粋€(gè)名為 onreadystatechange 的回調機制。（多么好聽(tīng)的名字，讓人想起了 VAX PDP/11s）。
清單 3. Antipat1a_fixed.html
<html><script> var req = null; function processReqChange() { if (req.readyState == 4 && req.status == 200 ) { var dobj = document.getElementById( ‘htmlDiv‘ ); dobj.innerHTML = req.responseText; } } function loadUrl( url ) { ... if(req) { req.onreadystatechange = processReqChange; req.open(‘GET‘, url, true); req.send(‘‘); } } var url = window.location.toString(); url = url.replace( /antipat1a_fixed.html/, ‘a(chǎn)ntipat1_content.html‘ ); loadUrl( url ); </script> ... |
這個(gè)新代碼只是查看請求對象是否發(fā)生改變，以響應 onreadystatechange 回調。然后，在完成后更新頁(yè)面。 最后的結果是一個(gè)加載神速的頁(yè)面。頁(yè)面出現后，新的內容幾乎是立即填充了頁(yè)面框。為什么呢？因為請求完成后就立即調用了代碼，然后填充頁(yè)面。沒(méi)有必要將時(shí)間浪費在無(wú)聊的計時(shí)器上。 輪詢(xún)反模式的另一個(gè)變體是：頁(yè)面反復向服務(wù)器發(fā)送請求，即使請求沒(méi)有發(fā)生變化。請看 清單 4 所示的搜索頁(yè)面。
清單 4. Antipat1b_polling.html
<html><script> var req = null; function processReqChange() { if (req.readyState == 4 && req.status == 200 ) { var dobj = document.getElementById( ‘htmlDiv‘ ); dobj.innerHTML = req.responseText; } } function loadUrl( url ) { ... } window.setInterval( function watchSearch() { var url = window.location.toString(); var searchUrl = ‘a(chǎn)ntipat1_content.html?s=‘+searchText.value; url = url.replace( /antipat1b_polling.html/, searchUrl ); loadUrl( url ); }, 1000 ); </script><body><form> Search <input id="searchText" type="text">:<br/> <div id="htmlDiv" style="border:1px solid black;padding:10px;"> </div></form></body></html> |
您可以看到瀏覽器中的頁(yè)面能夠發(fā)揮作用，如 圖 2 所示。
圖 2. 具有動(dòng)態(tài)響應區域的搜索區域
多么美妙。這樣看來(lái)，頁(yè)面非常合理。當我改變搜索文本時(shí)，顯示結果的區域也將根據新的搜索條件改變（也許并不完全如此，但是如果為請求安裝一個(gè)真正的搜索引擎，它就會(huì )這樣做）。 問(wèn)題是 JavaScript 代碼使用 window.setInterval 來(lái)不斷地生成請求，即使搜索字段沒(méi)有發(fā)生更改。這將消耗網(wǎng)絡(luò )帶寬，并消耗服務(wù)器時(shí)間。對于一個(gè)流行的站點(diǎn)來(lái)說(shuō)，這可是一個(gè)致命的組合。 解決方法就是對搜索框使用事件回調，如 清單 5 所示。
清單 5. Antipat1b_fixed.html
<html><script> var req = null; function processReqChange() { ... } function loadUrl( url ) { ... } var seachTimer = null; function runSearch() { if ( seachTimer != null ) window.clearTimeout( seachTimer ); seachTimer = window.setTimeout( function watchSearch() { var url = window.location.toString(); var searchUrl = ‘a(chǎn)ntipat1_content.html?s=‘+searchText.value; url = url.replace( /antipat1b_fixed.html/, searchUrl ); loadUrl( url ); seachTimer = null; }, 1000 ); } </script><body><form> Search <input id="searchText" type="text" onkeyup="runSearch()">:<br/> <div id="htmlDiv" style="border:1px solid black;padding:10px;"> </div></form></body></html> |
這里，我將 runSearch() 函數與搜索框的 onkeyup() 方法關(guān)聯(lián)起來(lái)。通過(guò)這樣做，當用戶(hù)在搜索框中輸入內容時(shí)，我將得到回調。 runSearch() 函數執行得非常漂亮。它為調用服務(wù)器并實(shí)際運行搜索的另一個(gè)方法設置了一個(gè)超時(shí)。如果在設置之前還沒(méi)有超時(shí)，那么將清除該超時(shí)。為什么？因為這將允許用戶(hù)輸入大量的文本；然后，當用戶(hù)按下最后一個(gè)鍵時(shí)，第二種方法將運行搜索。通過(guò)這種方法，用戶(hù)將不再被不斷閃爍的顯示打擾。
沒(méi)有檢查回調返回的結果 許多 Ajax 反模式源于對 XMLHTTPRequest 對象機制的誤解。我經(jīng)?？吹降囊环N情況就是，用戶(hù)沒(méi)有在回調中檢查對象的 readyState 或 status 字段。請查看 清單 6 以理解我所說(shuō)的含義。
清單 6. Antipat2_nocheck.html
<html><script> var req = null; function processReqChange() { var dobj = document.getElementById( ‘htmlDiv‘ ); dobj.innerHTML = req.responseText; } ... </code> <p>Everything looks okay. And on small requests, and on some browsers, it‘s probably fine. But many requests are large enough to call several calls to the <code type="inline">onreadystatechange</code> handler before they finish. So, your callback might be working with incomplete data.</p> <p>The right way to do it is shown in <a href="#list7">Listing 7</a>.</p> <code type="section"> <heading refname="list7" type="code">Listing 7. Antipat2_fixed.html</heading> <html><script> var req = null; function processReqChange() { if (req.readyState == 4 && req.status == 200 ) { var dobj = document.getElementById( ‘htmlDiv‘ ); dobj.innerHTML = req.responseText; } } ... |
沒(méi)有太多的代碼，并且它可以在所有瀏覽器上工作。 我注意到，和其他瀏覽器相比，這個(gè)問(wèn)題在 Windows? Internet Explorer? 7 上尤為突出。Internet Explorer 7 對 onreadystatechange 進(jìn)行多次回調 —— 我的意思是說(shuō)即使對小的請求也多次進(jìn)行回調。因此，需要正確編寫(xiě)處理程序。
在使用 HTML 更合適的時(shí)候卻傳送復雜的 XML 在我工作的一家公司中，所有的談?wù)摱际顷P(guān)于 “在網(wǎng)絡(luò )的邊緣實(shí)現智能化”。關(guān)于這個(gè)簡(jiǎn)單思想的另一個(gè)比較有趣的說(shuō)法就是：通過(guò)在桌面上實(shí)現瀏覽器的智能化工作來(lái)替代服務(wù)器中的全面處理。 但是在頁(yè)面中實(shí)現智能化意味著(zhù)在其中使用大量的 JavaScript 代碼。這樣做有一個(gè)很大的弊端：瀏覽器兼容性。確實(shí)需要在每個(gè)流行的瀏覽器上測試 JavaScript 代碼中每個(gè)關(guān)鍵行 —— 或者至少，對客戶(hù)最可能使用的瀏覽器進(jìn)行測試。所有這些都意味著(zhù)大量的工作。以 清單 8 所示的復雜 Ajax 代碼為例。
清單 8. Antipat3_complex.html
<html><head><script> var req = null; function processReqChange() { if (req.readyState == 4 && req.status == 200 && req.responseXML ) { var dtable = document.getElementById( ‘dataBody‘ ); var nl = req.responseXML.getElementsByTagName( ‘movie‘ ); for( var i = 0; i < nl.length; i++ ) { var nli = nl.item( i ); var elYear = nli.getElementsByTagName( ‘year‘ ); var year = elYear.item(0).firstChild.nodeValue; var elTitle = nli.getElementsByTagName( ‘title‘ ); var title = elTitle.item(0).firstChild.nodeValue; var elTr = dtable.insertRow( -1 ); var elYearTd = elTr.insertCell( -1 ); elYearTd.innerHTML = year; var elTitleTd = elTr.insertCell( -1 ); elTitleTd.innerHTML = title; } } } function loadXMLDoc( url ) { if(window.XMLHttpRequest) { try { req = new XMLHttpRequest(); } catch(e) { req = false; } } else if(window.ActiveXObject) { try { req = new ActiveXObject(‘Msxml2.XMLHTTP‘); } catch(e) { try { req = new ActiveXObject(‘Microsoft.XMLHTTP‘); } catch(e) { req = false; } } } if(req) { req.onreadystatechange = processReqChange; req.open(‘GET‘, url, true); req.send(‘‘); } } var url = window.location.toString(); url = url.replace( /antipat3_complex.html/, ‘a(chǎn)ntipat3_data.xml‘ ); loadXMLDoc( url ); </script></head><body> <table cellspacing="0" cellpadding="3" width="100%"><tbody id="dataBody"> <tr> <th width="20%">Year</th> <th width="80%">Title</th> </tr> </tbody></table></body></html> |
這段代碼從 清單 9 所示的 XML 文件中讀取數據，然后將它變?yōu)楸砀窀袷健?/p>
清單 9. Antipat3_data.xml
<movies> <movie> <year>1993</year> <title>Jurassic Park</title> </movie> <movie> <year>1997</year> <title>The Lost World: Jurassic Park</title> </movie> <movie> <year>2001</year> <title>Jurassic Park III</title> </movie> </movies> |
可以看到如 圖 3 所示的結果。
圖 3. 復雜的電影清單頁(yè)面
這其實(shí)不是糟糕的代碼。只不過(guò)是用大量的代碼執行一個(gè)實(shí)際上相當簡(jiǎn)單的任務(wù)。產(chǎn)生的頁(yè)面一點(diǎn)兒都不復雜。它不能在客戶(hù)端對頁(yè)面進(jìn)行排序和搜索。事實(shí)上，幾乎沒(méi)有理由對 XML 和 HTML 進(jìn)行復雜的轉換。 難道不能像 清單 10 那樣讓服務(wù)器返回 HTML 而不是 XML，從而變得更簡(jiǎn)單點(diǎn)兒?jiǎn)幔?/p>
清單 10. Antipat3_fixed.html
<html><script> var req = null; function processReqChange() { if (req.readyState == 4 && req.status == 200 ) { var dobj = document.getElementById( ‘tableDiv‘ ); dobj.innerHTML = req.responseText; } } function loadUrl( url ) { ... } var url = window.location.toString(); url = url.replace( /antipat3_fixed.html/, ‘a(chǎn)ntipat3_content.html‘ ); loadUrl( url ); </script><body><div id="tableDiv"></div></body></html> |
事實(shí)上，這樣更加簡(jiǎn)單。所有創(chuàng )建復雜表行和單元格的代碼被替換為頁(yè)面中 <div> 標記的一組簡(jiǎn)單的 innerHTML。 Voilà! 從服務(wù)器返回的 HTML 如 清單 11 所示。
清單 11. Antipat3_content.html
<table cellspacing="0" cellpadding="3" width="100%"> <tbody id="dataBody"> <tr> <th width="20%">Year</th> <th width="80%">Title</th> </tr> <tr> <td>1993</td> <td>Jurassic Park</td> </tr> <tr> <td>1997</td> <td>The Lost World: Jurassic Park</td> </tr> <tr> <td>2001</td> <td>Jurassic Park III</td> </tr> </tbody> </table> |
對于所有任務(wù)，選擇是在服務(wù)器上處理，還是在客戶(hù)機上處理取決于任務(wù)的需求。本文的例子相當簡(jiǎn)單：提供電影表。如果任務(wù)更復雜的話(huà) —— 可能會(huì )進(jìn)行分類(lèi)、搜索、添加、刪除或動(dòng)態(tài)交互（單擊電影名將出現更多信息）—— 那么可以在客戶(hù)端使用更加復雜的代碼。事實(shí)上，在本文的結尾我將演示在客戶(hù)機上進(jìn)行排序，從而反面論證在服務(wù)器上施加大量負載的情形。 也許所有示例中最好的一個(gè)就是 Google Maps。Google Maps 執行了很好的任務(wù) —— 將富客戶(hù)端的代碼與服務(wù)器端的智能映射引擎結合了起來(lái)。我將使用這個(gè)服務(wù)作為例子，說(shuō)明如何確定在哪里執行什么樣的處理。
在應該傳送 JavaScript 代碼的時(shí)候卻傳送 XML 所有關(guān)于使 Web 瀏覽器讀取 XML 數據源并動(dòng)態(tài)呈現它們的夸大其辭，可能讓您覺(jué)得這是惟一可用的方法。然而，這種想法是錯誤的，因為非常聰明的工程師已經(jīng)使用過(guò) Ajax 傳送技術(shù)來(lái)發(fā)送 JavaScript 代碼而不是 XML。請看 清單 12 所示的電影表示例。
清單 12. Antipat4_fixed.html
<html><head><script> var req = null; function processReqChange() { if (req.readyState == 4 && req.status == 200 ) { var dtable = document.getElementById( ‘dataBody‘ ); var movies = eval( req.responseText ); for( var i = 0; i < movies.length; i++ ) { var elTr = dtable.insertRow( -1 ); var elYearTd = elTr.insertCell( -1 ); elYearTd.innerHTML = movies[i].year; var elTitleTd = elTr.insertCell( -1 ); elTitleTd.innerHTML = movies[i].name; } } } function loadXMLDoc( url ) { ... } var url = window.location.toString(); url = url.replace( /antipat4_fixed.html/, ‘a(chǎn)ntipat4_data.js‘ ); loadXMLDoc( url ); </script></head><body> <table cellspacing="0" cellpadding="3" width="100%"> <tbody id="dataBody"><tr> <th width="20%">Year</th> <th width="80%">Title</th> </tr></tbody></table></body></html> |
這個(gè)示例沒(méi)有從服務(wù)器讀取 XML，它讀取的是 JavaScript 代碼。然后使用 JavaScript 代碼中的 eval() 函數獲取數據，然后再使用這些數據快速構建表。 清單 13 展示了 JavaScript 代碼。
清單 13. Antipat4_data.js
[ { year: 1993, name: ‘Jurassic Park‘ }, { year: 1997, name: ‘The Lost World: Jurassic Park‘ }, { year: 2001, name: ‘Jurassic Park III‘ } ] |
這個(gè)功能要求服務(wù)器使用 JavaScript 語(yǔ)言進(jìn)行通信。不過(guò)這通常不是什么大問(wèn)題。大多數流行的 Web 語(yǔ)言已經(jīng)支持 JavaScript Object Notation（JSON）輸出。 優(yōu)勢是明顯的。在這個(gè)示例當中，通過(guò)使用 JavaScript 語(yǔ)言，下載到客戶(hù)機的數據減少了 52%。同樣，性能也得到了提升。讀取 JavaScript 代碼的速度快了 9%。9% 可能看上去不是很大，但是要記住這是個(gè)非?；A的示例。更大的數據塊或者更復雜的結構需要更多 XML 解析代碼，而所需的 JavaScript 代碼數量不會(huì )變。
服務(wù)器負載過(guò)重 在服務(wù)器上執行很少的任務(wù)的反面論證是在其上執行大量的操作。正如我在前面提到的，這是一個(gè)需要權衡的問(wèn)題。但是，我想說(shuō)明的是如何在客戶(hù)機上對電影表執行排序，從而為服務(wù)器減輕負載。 清單 14 顯示了可排序的電影表。
清單 14. Antipat5_sort.html
<html><head><script> var req = null; var movies = null; function processReqChange() { if (req.readyState == 4 && req.status == 200 ) { movies = eval( req.responseText ); runSort( ‘year‘ ); } } function runSort( key ) { if ( key == ‘name‘ ) movies.sort( function( a, b ) { if ( a.name < b.name ) return -1; if ( a.name > b.name ) return 1; return 0; } ); else movies.sort( function( a, b ) { if ( a.year < b.year ) return -1; if ( a.year > b.year ) return 1; return 0; } ); var dtable = document.getElementById( ‘dataBody‘ ); while( dtable.rows.length > 1 ) dtable.deleteRow( 1 ); for( var i = 0; i < movies.length; i++ ) { var elTr = dtable.insertRow( -1 ); var elYearTd = elTr.insertCell( -1 ); elYearTd.innerHTML = movies[i].year; var elTitleTd = elTr.insertCell( -1 ); elTitleTd.innerHTML = movies[i].name; } } function loadXMLDoc( url ) { ... } var url = window.location.toString(); url = url.replace( /antipat5_sort.html/, ‘a(chǎn)ntipat4_data.js‘ ); loadXMLDoc( url ); </script></head><body> <table cellspacing="0" cellpadding="3" width="100%"> <tbody id="dataBody"><tr> <th width="20%"><a href="javascript: void runSort(‘year‘)">Year</a></th> <th width="80%"><a href="javascript: void runSort(‘name‘)">Title</a></th> </tr></tbody></table></body></html> |
這是一個(gè)相當簡(jiǎn)單的示例。它無(wú)法處理那些很可能需要好幾頁(yè)顯示的特別長(cháng)的列表。但是它確實(shí)說(shuō)明了創(chuàng )建一個(gè)能夠快速排序的表非常簡(jiǎn)單，并且無(wú)需刷新頁(yè)面，也不需要服務(wù)器來(lái)執行麻煩無(wú)聊的排序工作。
結束語(yǔ) 我針對 Ajax 編寫(xiě)了大量文章，并做了大量 Ajax 工作，同時(shí)主持 IBM developerWorks Ajax 論壇，所以我了解一些關(guān)于 Ajax 的知識，以及其正確和錯誤的用法。最常見(jiàn)的情況就是開(kāi)發(fā)人員低估了 Ajax 的復雜性，他們認為它只不過(guò)是向瀏覽器發(fā)送 XML、JavaScript 或 HTML 代碼而已。我將 Ajax 平臺視作完整的瀏覽器；實(shí)際上，是完整的流行瀏覽器集，因為您必須了解所有這些瀏覽器的特殊要求。 所有這些都歸結到一點(diǎn)：有大量的有關(guān) Ajax 的知識要學(xué)習，在這個(gè)過(guò)程中還會(huì )發(fā)生很多錯誤。我希望這篇文章能夠幫助您避免一些這樣的陷阱，或者在落入這樣的圈套后幫助您解決麻煩?？傊?，雖然可以從成功的經(jīng)驗中學(xué)到很多知識，然而通?？梢詮腻e誤中學(xué)到更多的東西。 | 
