淺談AJAX

ajax

　這兩年在ＷＥＢ上有一個技術新名詞挺惹眼的就是那個什麼ＡＪＡＸ，當初我一直在做ＪＡＶＡＳＣＲＩＰＴ的相關應用聽說過但一直沒有注意它，後來看了一下，來說說自己的理解。　　ＡＪＡＸ是Asynchronous JavaScript and XML的縮寫（雖說它名字的發明人Jesse James Garrett並不承認這是那一串單詞的縮寫），看名字就知道這是一個關於非同步ＪＡＶＡＳＣＲＩＰＴ和ＸＭＬ的應用。　　說實話我挺反感這個名詞，原因很簡單，它不是什麼新技術，而是炒作出來的一個新名詞。而其內容也就是調用微軟的那個還未成熟，功能還未完善的XMLHTTP對象來讀取遠端ＸＭＬ文檔而已。後來也被其他瀏覽器拿來據為己有。　　廢話不多說，先說說這個玩意的一些必要代碼

  　　這兩年在ＷＥＢ上有一個技術新名詞挺惹眼的就是那個什麼ＡＪＡＸ，當初我一直在做ＪＡＶＡＳＣＲＩＰＴ的相關應用聽說過但一直沒有注意它，後來看了一下，來說說自己的理解。
　　ＡＪＡＸ是Asynchronous JavaScript and XML的縮寫（雖說它名字的發明人Jesse James Garrett並不承認這是那一串單詞的縮寫），看名字就知道這是一個關於非同步ＪＡＶＡＳＣＲＩＰＴ和ＸＭＬ的應用。
　　說實話我挺反感這個名詞，原因很簡單，它不是什麼新技術，而是炒作出來的一個新名詞。而其內容也就是調用微軟的那個還未成熟，功能還未完善的XMLHTTP對象來讀取遠端ＸＭＬ文檔而已。後來也被其他瀏覽器拿來據為己有。
　　廢話不多說，先說說這個玩意的一些必要代碼
　　以下是一個典型的XMLHTTP對象聲明執行個體的例子：

　　/* Create a new XMLHttpRequest object to talk to the Web server */
　　var xmlHttp = false;
　　/*@cc_on @*/
　　/*@if (@_jscript_version >= 5)
　　try {
　　  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
　　} catch (e) {
　　  try {
　　    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
　　  } catch (e2) {
　　    xmlHttp = false;
　　  }
　　}
　　@end @*/

　　if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
　　  xmlHttp = new XMLHttpRequest();
　　}

　　呵呵！是不是覺得定義一個對象麼，幹嘛寫這麼多。沒錯！如果只是單一的瀏覽器的話確實沒必要寫這麼多，但是……　噩夢開始了……　我們要應對的可不是單一的瀏覽器，而是種類繁多，千奇百怪的。我們為了讓這些亂七八糟的瀏覽器用戶端都適應我們的產品，沒辦法，我們妥協了。
　　然後就是對該執行個體的調用（具體細節請參看ＪＡＶＡＳＣＲＩＰＴ的相關文檔，以及ＸＭＬＨＴＴＰ的相關文檔），慶幸的是各種瀏覽器對此對象的方法和屬性還是比較一致的。

　　XMLHTTP對象的屬性

　　onreadystatechange 這是一個事件，當你採用非同步方式來調用該對象的時候，當讀取狀態改變的時候，該對象會調用這個事件。他是一個屬性，你可以給它賦值一個函數指標。
　　readyState 　　　　讀取狀態。用來判斷當前的讀取狀態，他有四個值：

　　　　　　　　　　　(0)　未初始化 對象被建立，但未用ｏｐｅｎ方法初始化時產生的狀態碼
　　　　　　　　　　　(1)　等待讀取中 對象被建立，但ｓｅｎｄ方法未調用時產生的狀態碼
　　　　　　　　　　　(2)　讀取結束 發送請求，但請求不可用時產生的狀態碼
　　　　　　　　　　　(3)　通訊中 資料讀取中時產生的狀態碼
　　　　　　　　　　　(4)　完成 所有資料讀取完畢時時產生的狀態碼

　　responseBody 　　擷取一段資料
　　responseStream　 擷取一個資料流
　　responseText　　 擷取一個文字文件
　　responseXML　　　擷取一個ＸＭＬ文檔
　　status　　　　　 擷取ＨＴＴＰ的請求狀態
　　statusText　　　 擷取ＨＴＴＰ的請求狀態資訊

　　XMLHTTP對象的方法

　　abort　　　　　　　　 取消一個請求
　　getAllResponseHeaders 取得所有的ＨＴＴＰ的頭資訊
　　getResponseHeader　　 取得ＨＴＴＰ頭資訊中的資料
　　open　　　　　　　　　初始化對象執行個體
　　send　　　　　　　　　發送一個請求
　　setRequestHeader　　　佈建要求的ＨＴＴＰ頭資訊

　　其實方法屬性也不多也並不是很難掌握，我們看一下它的一個案例就可以輕鬆掌握
　　以下是一個調用的例子：

　　var xmlhttp=null;
　　function PostOrder(xmldoc)
　　{
　　  var xmlhttp = new ActiveXObject("Msxml2.XMLHttp");
　　  xmlhttp.Open("POST", "http://myserver/orders/processorder.asp", false);
　　  xmlhttp.onreadystatechange= HandleStateChange;
　　  xmlhttp.Send(xmldoc);
　　  myButton.disabled = true;
　　}
　　function HandleStateChange()
　　{
　　  if (xmlhttp.readyState == 4)
　　 {
　　    myButton.disabled = false;
　　    alert("Result = " + xmlhttp.responseXML.xml);
　　  }
　　}
　　

　　當然這是一種開發模式，不算是一種新的開發模式，個人認為他在ＸＭＬＨＴＴＰ對象出現的時候就同步的出現了（至少我再這個名詞出現之前就已經使用這種開發模式很久了）。它的好處就是，我們可以不用重新整理當前頁面而做到和資料服務器通訊的目的，而且資料通訊的量也隨之減少。原因很簡單，因為它只返回資料，而不用伺服器重複產生大量的頁面格式化用的代碼。我們完全可以將整站的模版下載到本地，分擔伺服器產生頁面的負擔。並且可以使得用戶端的瀏覽比較流暢，使用者使用上也可以做到很多有趣的，而在以前的開發模式上這是很難實現的功能。
　　但任何開發模式都不凡有它的缺點，ＡＪＡＸ這玩意的缺點是什麼呢，其實它的缺點也導致從它的出現到現在的流行中間經曆了很漫長的時間。那就是開發難度大。你有想象過調試一個ＪＡＶＡＳＣＲＩＰＴ最資深的程式員還在使用ＡＬＥＲＴ嗎？你有想象過在某種狀態下的未知錯誤並不提示代碼出錯，並且就算提示，也不能說明出錯具體位置以及對象嗎？你有想象過沒有完善的代碼提示嗎？你有想象還要面對多如牛毛的瀏覽器的相容問題嗎？很不幸，這些我們都會遇到，因為還沒有一個完善的用於開發調試的Integration Environment，幾乎所有的ＪＡＶＡＳＣＲＩＰＴ程式員都在使用最普通的文字編輯器來完成這些複雜的任務。
　　這是一個惡夢，確實是一個真實而存在在我們身邊的噩夢，有所慶幸的是隨著ＡＪＡＸ的聲勢大振，大部分的開發商正在著手解決這個問題，還有很多的ＪＡＶＡＳＣＲＩＰＴ架構的不斷出現。就像ＡＳＰ．ＮＥＴ的開發方式一樣，逐漸的出現。
　　也許ＡＪＡＸ的前景是樂觀的，也許這又是一個永無止境的噩夢……

　　再來談談用這種開發模式的前提條件
　　第一：你要熟練掌握HTML,CSS,XML。如果這些你還不清楚的話，麻煩自己去熟悉它，否則你寸步難行。
　　第二：你要熟練掌握一門瀏覽器用戶端程式設計語言，不管你是什麼ＪａｖａＳｃｒｉｐｔ也好，還是ＶＢＳｃｒｉｐｔ或者其他什麼ＰｅｒｌＳｃｒｉｐｔ等等，一定要掌握一門，並且熟練。為什麼要熟練？呵呵，原因很簡單，因為這是指令碼語言，因為它文法語義定義規則簡單，所以你能遇到的麻煩就越難以解決。就好像彙編總是那麼難以掌握一樣，就像圍棋，規則越簡單的東西，其棋局變化就越多。
　　第三：你要熟悉瞭解HTML,CSS,XML的瀏覽器提供給你的文檔對象，也就是ＤＯＭ，否則你可以下課了，因為不熟悉瞭解這些內容，我可以很負責任的告訴你，ＡＪＡＸ對你沒用，放棄吧。
　　第四：你要熟悉瞭解ＸＭＬＨＴＴＰ的屬性和方法，也可能你要說：切！就那幾個！～～呵呵，瀏覽器提供的對象可不一樣哦，就是相同的瀏覽器提供的相關對象都不相同，何況是多如牛毛的瀏覽器？
　　第五：一門伺服器端語言來提供ＸＭＬ資料，以及可能會用到的資料庫相關的ＳＱＬ語言，當然這也是必須的（除非你不用存取讀取資料）。我就不做詳細介紹了，可選擇的確實很多，ＡＳＰ，ＡＳＰ．ＮＥＴ，ＰＨＰ，ＣＧＩ，ＪＳＰ……太多了

　　你需要做好的心理準備
　　第一：你可能還沒機會遇到比較順手的編程環境，不過麵包會有的……
　　第二：你可能幾乎沒有順手的調試環境，不過微軟的指令碼ｄｅｂｕｇ環境還湊和
　　第三：你可能要面對眾多瀏覽器的挑戰，其中包括HTML,CSS,XML的一些差異，以及ＪＳＣＲＩＰＴ和ＪＡＶＡＳＣＲＩＰＴ上的細微差異，當然更頭痛的是ＤＯＭ對象的很多不同，以及瀏覽器對象的更多的不同

　　如果這些條件您都滿足的話，我只能默默地祝你好運了……