Posted on 2006-06-20 16:44
龍~天飛 閱讀(1992)
評論(3) 編輯 收藏 所屬分類:
WEB Technology
1、Ajax的含義：
???Ajax的全稱是 Asynchronous JavaScript And XML (異步JavaScript?和?XML)，它不是一項新技術(shù)，而是很多成熟技術(shù)的集合。
???和Applet，F(xiàn)lash相比，Ajax則是一種輕量級的解決方案。因為它操作的基礎(chǔ)是HTML或者是XHTML，使用的教本語言是JavaScript，這可以保證它的純文本性質(zhì)，它具有更好的搜索引擎友好性；設(shè)計出色的Ajax應(yīng)用還可以很好的工作在舊版本的設(shè)備上；利用XML，Ajax可以和其他應(yīng)用程序方便地進(jìn)行通信。Ajax可以迅速贏得別個注意的另一個重要原因還在于它完全是基于成熟的技術(shù)，作為異步調(diào)用的基礎(chǔ)設(shè)施XMLHttpRequest，早在1999年就被引入了IE瀏覽器，隨后又被其他瀏覽器支持，成為事實上的標(biāo)準(zhǔn)；JavaScript、DOM、CSS則早就是W3C標(biāo)準(zhǔn)。
2、Ajax：新的Web開發(fā)模式
???
在傳統(tǒng)的Web應(yīng)用程序中，一般都是采取請求→刷新→顯示的模式。即每當(dāng)用戶通過單擊按鈕或鏈接向服務(wù)器發(fā)送一個請求時，都由服務(wù)器接收請求并處理，處理完畢后服務(wù)器將信息發(fā)送至瀏覽器進(jìn)行顯示。而在服務(wù)器處理的時間里，瀏覽器處于Loading狀態(tài)，顯示為空白和無響應(yīng)狀態(tài)，用戶能做的事情只有等待。
???事實上，用戶想獲得的可能僅僅是一件商品的價格信息，但為了這么一個微小的請求卻不得不刷新整個頁面，讓其他所有圖片和數(shù)據(jù)都被重新運算和下載。這不僅加大了網(wǎng)絡(luò)流量，也加大了服務(wù)器的處理負(fù)擔(dān)，造成用戶體驗質(zhì)量的下降。
???⑴傳統(tǒng)的Web開發(fā)模式
??????傳統(tǒng)的Web開發(fā)模式是一種請求→刷新→響應(yīng)的模式，每個請求由單獨的一個頁面來顯示，發(fā)送一個請求就會重新獲得這個頁面，也就是常說的刷新。在這種模式下，每個應(yīng)用程序由多個頁面組成，每個頁面對應(yīng)到服務(wù)器的一個業(yè)務(wù)邏輯，或者說是功能塊。而在客戶端顯示的頁面實際只是一個純界面性質(zhì)的東西。
?????
??????從圖1所示可以看出，客戶端的每個頁面都對應(yīng)服務(wù)器端的一個頁面，而應(yīng)用程序的功能則由各個頁面所組成。每個子功能可能對應(yīng)到一個或多個頁面，這取決于設(shè)計人員的考慮。雖然開發(fā)方式靈活多樣，必須將信息對應(yīng)到一個頁面，由瀏覽器發(fā)送這個請求，服務(wù)器接受到請求后會將整個頁面作為一個整體提供給用戶，而不管頁面中是否包含冗余的信息。很顯然，這對于用戶來說降低了其訪問速度，他被迫接收了無用的信息。
???
說明：即使Web開發(fā)人員為了提高響應(yīng)速度而將頁面粒度降得很低，也不能很好的解決這個問題。這也是對于客戶端的控制傳統(tǒng)BS架構(gòu)不如CS的重要原因
??????Web頁面中還有大量靜態(tài)不變的元素，比如用于整體架構(gòu)的HTML元素，用于界面表現(xiàn)的圖片、CSS，用于廣告效果的Flash等，他們都是造成打網(wǎng)絡(luò)流量的主要因素，因為每請求一次頁面，這些數(shù)據(jù)都重新加載，雖然瀏覽器的緩存可以解決一些問題，但瀏覽器還是必須從服務(wù)器重新獲取數(shù)據(jù)，從而判斷這些圖片或Flash是否由更新。
???⑵基于Ajax的開發(fā)模式
??????比起傳統(tǒng)的Web開發(fā)模式，Ajax則向傳統(tǒng)桌面程序靠攏了許多，一個Web頁已經(jīng)越來越趨向于一個單獨的應(yīng)用程序。一個Web頁可以從多個接口獲取數(shù)據(jù)，并將他們更新在頁面中，所有的工作都是在后臺完成。設(shè)計良好的Ajax程序可以告訴用戶瀏覽器正在做什么，讓用戶可以邊等待邊完成其他工作。
??????在Ajax中，每個客戶端頁面不一定對應(yīng)一個服務(wù)器端頁面，而可能是由多個服務(wù)器端頁面共同協(xié)作完成該頁面所需要的功能。
??????大多數(shù)服務(wù)器端的頁面已經(jīng)不再是界面表現(xiàn)的工具，而是作為提供數(shù)據(jù)的接口，XMLHttpRequest對象能夠獲取這些頁面的信息，并將其提交給客戶端頁面的Ajax引擎，由Ajax引擎來處理這些數(shù)據(jù)并表現(xiàn)到頁面，可以用圖2來示意這樣的結(jié)構(gòu)。
??????從圖2所示可以看出，在Ajax中，每個客戶端表現(xiàn)的頁面可以由多個服務(wù)器端頁面共同完成，一個服務(wù)器端頁面可以為多個客戶端頁面服務(wù)。在這樣的模式下，每個服務(wù)器端頁面可以將功能的粒度分的很細(xì)，至于這些功能怎么組合，則完全是客戶端的事。通過Ajax引擎，客戶端頁面可以根據(jù)用戶的需求來調(diào)用服務(wù)器端相應(yīng)的頁面，獲得數(shù)據(jù)并顯示在頁面上。此時許多服務(wù)器端頁面已經(jīng)不能稱之為頁面，應(yīng)該稱之為接口。
???⑶兩種開發(fā)模式的比較
??????①傳統(tǒng)Web模式的工作流程
??????比起Ajax中的異步的概念，在傳統(tǒng)Web模式中是一種同步的概念：用戶必須等待每個請求，當(dāng)一個請求完成后才能獲得結(jié)果，在使用完這些結(jié)果后才會發(fā)出新的請求。如時序圖3描述
??????
??????從圖中可以看到，在傳統(tǒng)的Web開發(fā)中，完全是一種請求→刷新→響應(yīng)的模型，用戶只有等請求完成后才能進(jìn)行用戶操作，操作完成后才能提交下一個請求，用戶行為和服務(wù)器行為是一種同步的關(guān)系，需要相互等待，正是這種等待，造成了BS結(jié)構(gòu)客戶端和CS架構(gòu)客戶端的本質(zhì)區(qū)別。
??????②Ajax程序的工作流程
??????在基于Ajax的Web程序中，最為重要的特征就是將同步請求轉(zhuǎn)變?yōu)楫惒秸埱蟆＿@意味著客戶端和服務(wù)器端不必再相互等待，而是可以進(jìn)行一些并發(fā)的操作。用戶在發(fā)送請求以后可以繼續(xù)當(dāng)前工作，包括瀏覽和提交信息。在服務(wù)器響應(yīng)完成之后，Ajax引擎會將更新的數(shù)據(jù)顯示給用戶，而用戶則工具響應(yīng)內(nèi)容來決定自己下一步的行為，圖4描述了異步Ajax操作的流程。
??????從圖4中可見，在用戶行為和服務(wù)器端多了一層Ajax引擎，他負(fù)責(zé)處理用戶的行為，并轉(zhuǎn)化為對服務(wù)器的請求。同時它接收服務(wù)器端返回的信息，經(jīng)過處理后顯示給用戶。由于Ajax在后臺以異步的方式工作，用戶無需等待服務(wù)器的處理，可以進(jìn)行并發(fā)工作，這就在用戶界面層次上更為接近了CS架構(gòu)的客戶端平臺。
??????注意：同步和異步只是兩種開發(fā)模式的區(qū)別中的一個。Ajax還帶來了性能的提高：因為用戶的行為經(jīng)過了Ajax引擎的處理，使得客戶端可以只獲取需要的數(shù)據(jù)。DOM模型使得動態(tài)改變頁面的層次結(jié)構(gòu)成為可能，這樣動態(tài)獲取的數(shù)據(jù)可以動態(tài)的嵌入到頁面之中，避免了數(shù)據(jù)重復(fù)加載帶來的速度和效率問題。服務(wù)器端的組織形式則可以將功能劃分的更細(xì)，這樣服務(wù)器就可以只為有用的數(shù)據(jù)進(jìn)行工作，大大提高了運行效率。
3、Ajax中的關(guān)鍵技術(shù)
???Ajax是多種技術(shù)的一個組合應(yīng)用，盡管很多技術(shù)都已經(jīng)存在多時并且相當(dāng)成熟，但卻沒有引起人們足夠重視，對它們的了解一般也都停留在一個很基礎(chǔ)的階段。現(xiàn)在就將對這些技術(shù)做一個簡要的介紹，說明他們在Ajax中所起的作用以及如何協(xié)同工作的。
???⑴JavaScript腳本語言
??????頁面設(shè)計時常常會加入一些特效，這個是JavaScript的功勞。
??????在Ajax中，JavaScript已經(jīng)從后臺狀態(tài)轉(zhuǎn)移到前臺，發(fā)揮著巨大的作用。可以說，JavaScript是Ajax中的黏合劑，它使DOM、XHTML、XML和CSS可以互相協(xié)作，并控制他們的行為。
??????現(xiàn)在Web程序中基于JavaScript實現(xiàn)很多功能已經(jīng)具有相當(dāng)大的實用性了，不再是一些特效或者表單驗證之類的簡單應(yīng)用了，這些應(yīng)用所使用的JavaScript技術(shù)也是相當(dāng)專業(yè)的。因此，要開發(fā)復(fù)雜高效的Ajax應(yīng)用程序，就必須對JavaScript有深入的認(rèn)識，應(yīng)該象對待一門新的語言一樣來對待它。
???⑵XMLHttpRequest對象
??????XMLHttpRequest是一個長期被人忽視的對象，這與它強(qiáng)大的功能不相匹配。借助他可以在網(wǎng)頁的背后和瀏覽器進(jìn)行異步通訊，而無需刷新整個頁面。XMLHttpRequest對象在JavaScript中創(chuàng)建并使用，客戶端可以僅僅從服務(wù)器端獲取它需要的信息；通過DOM和CSS的結(jié)合，就可以實現(xiàn)局部刷新的效果；同時還可以通過XMLHttpRequest對象異步提交信息，將用戶的輸入在后臺提交到服務(wù)器而無需刷新這個頁面。
???⑶可擴(kuò)展標(biāo)記語言(XML)
??????XML作用很大而且廣為接受，它為跨平臺、跨領(lǐng)域的應(yīng)用提供了一種通信手段。在Ajax中，它以客戶端和服務(wù)器端通信載體的身份出現(xiàn)。按照最初對Ajax的定義，服務(wù)器端和客戶端的通信都應(yīng)該由XML來完成。事實上，使用XML的確可以帶來很多好處，例如數(shù)據(jù)傳輸非常規(guī)范；服務(wù)器端和客戶端的開發(fā)人員可以很好的協(xié)同工作，不用為數(shù)據(jù)格式的問題而煩惱；可以方便地使用XSLT將XML文檔直接轉(zhuǎn)換為HTML片斷插入到頁面中。
???⑷文檔對象模型(DOM)
??????文檔對象模型(DOM)用來表示顯示在瀏覽器上的整個文檔對象及其層次結(jié)構(gòu)。在Ajax中，DOM模型是不可缺少的一部分。使用JavaScript可以訪問文檔中的所有節(jié)點，即所有對象。
??????通過改變這些對象的屬性，用戶可以控制頁面的局部行為，將動態(tài)獲取的數(shù)據(jù)插入到文檔中，實現(xiàn)局部刷新的目的。用戶還可以利用DOM模型增加和刪除文檔結(jié)點，實現(xiàn)界面元素的動態(tài)變化。
???⑸級聯(lián)樣式表技術(shù)(CSS)
??????CSS最近兩年是熱火朝天，其中一個重要的原因就是使用Web標(biāo)準(zhǔn)進(jìn)行頁面設(shè)計正逐漸成為主流。
??????在Ajax中，CSS同樣擔(dān)當(dāng)著界面表現(xiàn)的重任，其重要性甚至超過了傳統(tǒng)的Web程序設(shè)計。JavaScript通過XMLHttpRequest對象和服務(wù)器進(jìn)行交互，通常獲取的都是單純的數(shù)據(jù)，不包括表現(xiàn)元素，而將這些數(shù)據(jù)插入到文檔本身就是一件非常嚴(yán)謹(jǐn)?shù)墓ぷ鳎绻藭r還需要使用JavaScript操作標(biāo)記的屬性來控制其外觀，會使代碼更加復(fù)雜而且難以維護(hù)，也無法做到使程序開發(fā)人員和界面設(shè)計人員分工合作，使用CSS則能很好的解決這個問題。CSS知道出現(xiàn)在某個地方的標(biāo)記應(yīng)該顯示什么樣式，通過簡單的類屬性和id屬性也很容易決定那些元素應(yīng)該有怎樣的表現(xiàn)形式。
4、使用Ajax帶來的問題
???⑴用戶瀏覽習(xí)慣改變帶來的問題
???⑵對搜索引擎的不友好
???⑶前進(jìn)后退按鈕的失效
???⑷刷新定位問題
???⑸性能問題
???⑹開發(fā)難度的加大