Web開發基礎務實之《淺唱Ajax》

下文的總結分享來自我的另一個blog青藤屋，因為部落格園比較熱鬧，所以同步過來晒晒，喜歡的朋友可以常來這兩個blog上逛逛：）

一、引言

這兩天一直在想，雖然出道剛不久，但畢竟在學校實驗室裡也折騰過不少ASP.NET
Web項目，自認為對Web開發比較熟悉，然而驀然回首，卻又發現知識都很淩亂。曾經以為自己很懂，嘗試給學弟學妹們講有關ASP.NET
Web開發的知識時，呵呵，每次都是講得沒頭沒尾，其實不是我不懂，而是因為缺乏總結，導致很多基礎的東西都是東一塊西一塊，講起來自然就會比較淩亂了。
所以我決定，從現在開始慢慢總結基礎的東西，就像高考前老師告訴我們要學會梳理基礎知識一樣，我就在這裡邊總結邊梳理，並做好及時與大家分享的準備。

接下來我準備將自己在開發ASP.NET Web項目過程中的一些基礎點滴以專題的形式進行總結並呈現給大家。由於ASP.NET
Web開發這個範圍實在是比較大，包括前端、後台、伺服器、架構等等，所以我只好總結自己能力之內的方面，希望我總結到的一些能給路過的ASP.NET
Web開發初學者帶來一定的協助。

PS:由於現在在工作了，時間有限，所以基本上是只能一周總結一次，有興趣聽我嘮叨的朋友可以關注我的部落格，我盡量吧！

二、淺唱Ajax  --  開篇嘮叨

Ajax，幾乎每一個web開發人員，無論是初學的還是老手，都會將它當作關注的焦點之一。然而很多朋友，尤其是初學者，都只是在瘋狂地使用
Ajax，至於Ajax是什麼原理、什麼時候適合用Ajax等等方面可能很多都不會有太多的關注，然而恰恰這些都是基礎的東西，不搞明白，你就會像我一
樣，一到講課的時候，就開始胡言亂語，令人啼笑皆非。好了，那今天我就嘗試來總結一下有關ajax方面的基礎知識，本文將從多個角度展開探討，有興趣的朋
友也可以在評論中補充，或者簡訊或者Email聯絡我，我會酌情補充進去。在此提前感謝一起參與的朋友，當然更感謝支援推薦的朋友：）

三、淺唱Ajax  --  揭開神秘的面紗

Ajax是神馬？呵呵，這時候你可能就在google或者baidu了，很快，你找到了答案：AJAX
即“Asynchronous JavaScript and XML”（非同步JavaScript和XML)，是一種使用JavaScript的
XMLHttpRequest對象來直接與伺服器進行同步或者非同步通訊的技術，它是xhtml、css、javascript等技術的結合體，可以大大提
高使用者體驗。這裡我同樣的話就不重複了，為了方便大家理解Ajax的原理，我就來打一個比方來揭開它神秘的面紗吧：假設你是大明星（需要和
server通訊的瀏覽器），有一個如花似玉但又很厲害的老婆，另外你又很風流，外面養了10個小三（10個服server請求）。有一天你想和小三們約
會了（需要和server通訊），但你的手機什麼的通訊工具被你那厲害的老婆監視著，直接聯絡肯定會被老婆發現，到時候就慘了，怎麼辦呢，確實想小三們了
啊，呵呵，發個暗號給你的經紀人（XMLHttpRequest對象，也可以看作代理）吧，讓經紀人幫你搞定約會資訊的發送吧，你繼續可以和你的老婆纏綿
（這就是非同步帶來的好處，兩不誤啊），而不用10個電話親自一個個打過來，等你經紀人把約會的資訊傳達完成以後，你和你老婆也纏綿完了，既不耽誤時間，又
討好了你老婆，可以出去和小三約會了，哈哈！

其實，Ajax中最主要的就是XMLHttpRequest這個對象，他充當了與伺服器直接互動的代理，瀏覽器可以把一些需要長時間等待的事務交給
XMLHttpRequest對象，讓他去做，自己可以繼續幹別的事情，比如和老婆纏綿，當XMLHttpRequest對象和伺服器通訊完了後會發送一
些事件給瀏覽器，讓瀏覽器去處理完成後的結果（用Javascript更新DOM之類的）。怎麼樣，Ajax的基本原理是不是也挺簡單的。

這裡附上XMLHttpRequest對象的幾個屬性：

onreadystatechange   //每次狀態改變所觸發事件的事件處理常式。
responseText     //從伺服器處理序返回資料的字串形式。
responseXML   //從伺服器處理序返回的DOM相容的文檔資料對象。
status           //從伺服器返回的數字代碼，比如常見的404（未找到）和200（已就緒）
status Text       //伴隨狀態代碼的字串資訊
readyState       //對象狀態值
0        //(未初始化) 對象已建立，但是尚未初始化（尚未調用open方法）
1        //(初始化) 對象已建立，尚未調用send方法
2        //(發送資料) send方法已調用，但是當前的狀態及http頭未知
3        //(資料傳送中) 已接收部分資料，因為響應及http頭不全，這時通過responseBody和responseText擷取部分資料會出現錯誤，
4        //(完成) 資料接收完畢,此時可以通過通過responseXml和responseText擷取完整的回應資料

四、淺唱Ajax  --  基本使用

這裡我主要結合ASP.NET講講如何用原生JS實現Ajax和用jQuery實現Ajax

1、用原生JS：

var request = false;
//根據不同瀏覽器建立XMLHttpRequest對象
try {
     request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
       request = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (othermicrosoft) {
try {
         request = new ActiveXObject("Microsoft.XMLHTTP");
     } catch (failed) {
         request = false;
       }  
   }
}
if (!request)
   alert("Error initializing XMLHttpRequest!");
function AjaxTest() {
var url = "test.aspx";  //指定url
   request.open("GET", url, true);  //開啟ajax，並指定為非同步請求
   request.onreadystatechange = updatePage;  //指定回呼函數
   request.send(null);   //發送ajax請求
}
function updatePage() {
   alert(request.responseText);
}

AjaxTest();

2、用jQuery：

用jquery就要簡單很多了，這裡有用jQuery實現ajax的4種方法，原文《深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法》，就不多說了。

五、淺唱Ajax  --  推薦幾個優秀的Ajax架構

這年代一般的程式要學會用架構，厲害的程式員要玩轉架構，牛叉的程式員要能寫架構，好吧，我是一般的程式員，那就學學如何用架構吧。

現在市面上比較流行的ajax架構比較多，這裡我推薦初學者選用下面幾個架構（當然對於初學者最好的學習就是用原生的JS）

1、jQuery（強力推薦）

jQuery最大的特點就是簡潔、靈活，代碼很小，以操作DOM的選取器為核心，可別小看它，現在互連網上基於jQuery的開源外掛程式可是同類中最多的，而且大部分都相容主流的瀏覽器，對於像我這樣的懶人就直接拿來用過很多現成的外掛程式。下面推薦幾個學習jQuery的網站：

jQuery官方網站：http://jquery.com/

jQuery UI 官方網站：http://jqueryui.com/

jQuery外掛程式大全：http://www.cnblogs.com/terrylee/archive/2007/12/09/the-ultimate-jquery-plugin-list.html

另外還有一些jQuery專題部落格、中文jQuery論壇

上面的地方初學者可以常去框框，會有協助的：）

2、Prototype

一個非常優雅的JS庫，定義了JS的物件導向擴充，DOM操作API，事件等等，之上還有
rico/script.aculo.us實現一些JS組件功能和效果，以prototype為核心，形成了一個外圍的各種各樣的JS擴充
庫，是相當有前途的JS底層架構，突出特點就是非常易學易用，門檻很低，常常是一兩行JS代碼就可以搞定一個相關的功能。同時它也是RoR整合的AJAX
JS庫。

Prototype官方網站：http://www.prototypejs.org/

3、ExtJs

貌似這個現在不叫ExtJs了，但我還是這樣叫他吧，大家明白就好。這個架構怎麼說好呢，對於初學者如果看到他的各種介面組件，一定會
深深地愛上他，包括以前我也一樣，整整為他折騰了一個暑假。但是我不是非常推薦用ext，因為他的庫實在是太大了，我上次用過的版本壓縮後都有
400K+，而且在IE下效能表現一般甚至比較低，還比較難學。當然了，有興趣的朋友也可以去看看，還是值得一看的，ext官方網站：http://www.sencha.com/

還有許多其他架構，如Mootools、YUI、Dojo等等，由於我也沒用過，況且可能也不常用，有興趣的朋友去看看吧，就不介紹了。

六、淺唱Ajax  --  優點和缺點

優點：

1、不重新整理頁面就可以和伺服器通訊，因此解決了複雜事務白屏等待的缺陷，提高了使用者體驗。

2、非同步作業可以讓瀏覽器在發出ajax請求後不打斷繼續其他的工作，因此具有更好的響應能力。

3、由於是“按需擷取、局部更新”，所以減少了冗餘資料，節省了伺服器頻寬。

Ajax也不是萬能的，下面重點談談缺點：

1、過多的ajax對網站SEO不是很友好，因為搜尋引擎還不能搜尋由js產生的dom資料。

2、安全問題，ajax技術就如同對企業資料建立了一個直接通道。這使得開發人員在不經意間會暴露比以前更多的資料和伺服器邏輯。ajax
的邏輯可以對用戶端的安全掃描技術隱藏起來，允許駭客從遠端伺服器上建立新的攻擊。還有ajax也難以避免一些已知的安全弱點，諸如跨網站指令碼攻擊、
SQL注入攻擊和基於credentials的安全性漏洞等。

3、過於複雜的ajax架構對於程式調試十分麻煩，因此設計成本相對太高，而且要做到很好的可控性成本更高。

4、如果使用不當不僅不能起到節約頻寬的作用，反而增加了和伺服器的http串連（本來一次http串連就能完成的你分n個ajax去完成），一次send就建立了串連，而伺服器處理同時http串連的能力又是有限的。

所以不是任何時候使用ajax都是合理的，使用ajax前請先做好項目評估並做好相關設計，切不能為了ajax而ajax。

七、淺唱Ajax  --  總結

最後做個總結吧，ajax在我們項目中用的十分廣泛，但是用好它就要先瞭解他，這樣我們才能更好的把握它，才能夠讓我們正確的判斷出是否該使用ajax，該使用什麼ajax架構。以上是我個人對ajax的一些簡單梳理，希望給初學朋友帶來協助。