Ajax是Asynchronous JavaScript and XML的縮寫，中文直譯為異步JavaScript和XML，它表示通過異步方式實(shí)現(xiàn)客戶端和服務(wù)器端通信。所謂異步，就是當(dāng)你向服務(wù)器發(fā)出請求時，不是立即進(jìn)行響應(yīng)，這樣你就不需要等待服務(wù)器傳遞過來的數(shù)據(jù)，而繼續(xù)執(zhí)行其他操作。這相對于傳統(tǒng)的必須刷新頁面來完成客戶端與服務(wù)器端通信是一個不小的進(jìn)步。

Ajax為創(chuàng)建更加強(qiáng)壯的客戶端Web應(yīng)用奠定了基礎(chǔ)，通過這種技術(shù)將大大改善用戶的網(wǎng)頁瀏覽體驗(yàn)。Ajax不是一種全新的技術(shù)，而是對已有的Web技術(shù)進(jìn)行重新包裝和利用，使它們發(fā)揮更大的效益。具體說：

l         使用XHTML和CSS構(gòu)建基于Web標(biāo)準(zhǔn)的網(wǎng)頁。

l         使用DOM（Document Object Model，文檔對象模型）進(jìn)行動態(tài)顯示和交互。

l         使用XML和XSLT進(jìn)行數(shù)據(jù)交換及相關(guān)操作。

l         使用XMLHttpRequest組件實(shí)現(xiàn)異步數(shù)據(jù)查詢和檢索（客戶端與服務(wù)器端數(shù)據(jù)通信）。

l         使用JavaScript腳本將所有的技術(shù)綁定在一起實(shí)現(xiàn)動態(tài)控制。

1.3.1  為什么要選用Ajax

在傳統(tǒng)的Web應(yīng)用開發(fā)中，客戶端與服務(wù)器端主要通過表單來實(shí)現(xiàn)信息傳遞（也可以通過超鏈接來傳遞信息）。用戶填寫并提交表單之后，向服務(wù)器發(fā)送一個請求。服務(wù)器接收并處理傳遞的表單，然后返回一個新的網(wǎng)頁進(jìn)行響應(yīng)。這種響應(yīng)方式浪費(fèi)了大量的帶寬，因?yàn)樵谇昂髢蓚€頁面中大部分HTML代碼往往是相同的。由于每次應(yīng)用的交互都需要向服務(wù)器發(fā)送請求，應(yīng)用的響應(yīng)時間就依賴于服務(wù)器的響應(yīng)時間。這導(dǎo)致了用戶界面的響應(yīng)比本地應(yīng)用慢得多。

Ajax技術(shù)可以使客戶端僅向服務(wù)器端發(fā)送并取回必需的數(shù)據(jù)，這樣在服務(wù)器和瀏覽器之間交換的數(shù)據(jù)大量減少，結(jié)果我們就能看到響應(yīng)更快的應(yīng)用。同時很多的處理工作可以在發(fā)出請求的客戶端機(jī)器上完成，所以Web服務(wù)器的處理時間也減少了。Ajax技術(shù)的優(yōu)勢就在于：

l         通過異步模式，提升了用戶體驗(yàn)，減少了漫長的等待，可以快速、直接的反饋每一步操作的結(jié)果。

l         優(yōu)化了瀏覽器和服務(wù)器之間的傳輸，減少不必要的數(shù)據(jù)往返，減少了帶寬占用

l         Ajax代碼主要在客戶端運(yùn)行，從而減少了服務(wù)器的運(yùn)行負(fù)載，為開發(fā)胖客戶端應(yīng)用（也稱富客戶端應(yīng)用）奠定了基礎(chǔ)。

所謂胖客戶端就是在瀏覽器中的網(wǎng)頁中借助Ajax技術(shù)模擬傳統(tǒng)桌面應(yīng)用程序的智能界面，來開發(fā)更加豐富、更富體驗(yàn)的Web應(yīng)用程序。

1.3.2  Dreamweaver CS3對Ajax的技術(shù)支持

從CS3版本開始，Dreamweaver開始增加對Ajax技術(shù)的支持。它主要通過Spry技術(shù)框架來實(shí)現(xiàn)的（如圖1-15所示是Dreamweaver CS3提供的全部Spry構(gòu)件）。其實(shí)從2005年開始，互聯(lián)網(wǎng)上就雨后春筍般地冒出很多Ajax技術(shù)框架、Ajax技術(shù)庫或組件等，它們都是以Ajax技術(shù)為核心，并對Ajax技術(shù)進(jìn)行功能打包，以方便用戶的使用（在后面的實(shí)例中我們還會進(jìn)行講解）。

圖 1-15

Dreamweaver所開發(fā)的Spry技術(shù)框架可以單獨(dú)使用，你可以在Adobe公司網(wǎng)站下載Spry API，然后在具體網(wǎng)頁中引用即可。但是利用Dreamweaver所提供的可視化操作界面能夠快速設(shè)計(jì)、開發(fā)和部署動態(tài)用戶界面。在減少頁面刷新的同時，增加交互性、提高訪問速度和增強(qiáng)網(wǎng)頁的可用性。

在Spry技術(shù)框架中，其核心是Spry數(shù)據(jù)集（如記錄集一樣），使用XML從RSS服務(wù)或數(shù)據(jù)庫中將數(shù)據(jù)集成到網(wǎng)頁中。集成的數(shù)據(jù)還可以很容易實(shí)現(xiàn)排序和過濾。

另外，Spry還提供了一組窗口構(gòu)建。使用這些構(gòu)建，你能夠輕松地將常見界面組件（如列表、表格、選項(xiàng)卡、表單驗(yàn)證和可重復(fù)區(qū)域）添加到網(wǎng)頁中。有關(guān)Dreamweaver的Spry技術(shù)應(yīng)用話題，我們將會在后面各章中詳細(xì)進(jìn)行介紹。

1.3.3  分析Ajax在動態(tài)網(wǎng)站中的角色

Ajax在動態(tài)網(wǎng)站中扮演著兩個重要角色：

第一，是改善客戶端用戶的體驗(yàn)?；蛘哒f增強(qiáng)網(wǎng)頁的交互性。這與傳統(tǒng)的網(wǎng)頁特效在功能上有點(diǎn)類似，但是它更傾向于網(wǎng)頁實(shí)用性設(shè)計(jì)上，而不是追求網(wǎng)頁顯示效果的花哨和好看。也就是現(xiàn)在比較提倡的網(wǎng)頁易用性設(shè)計(jì)。通過Javascript、DOM和CSS來控制網(wǎng)頁以符合用戶需要的方式進(jìn)行顯示。

第二，是改善客戶端與服務(wù)器端數(shù)據(jù)通信方式，避免網(wǎng)頁必須通過刷新來進(jìn)行數(shù)據(jù)更新。刷新網(wǎng)頁實(shí)現(xiàn)數(shù)據(jù)通信的弊端顯而易見。傳輸大量無用的數(shù)據(jù)，增加帶寬負(fù)擔(dān)；服務(wù)器需要進(jìn)行大量數(shù)據(jù)處理，增加服務(wù)器運(yùn)行負(fù)擔(dān)；用戶需要整個網(wǎng)頁下載完畢之后才能瀏覽頁面，耽誤了用戶的時間，刷新網(wǎng)頁后頁面需要重新加載，前面的用戶操作可能需要重新再來，也增加了用戶交互的難度。

現(xiàn)在使用Ajax技術(shù)來實(shí)現(xiàn)客戶端和服務(wù)器端通信，你可以設(shè)計(jì)出更多富有交互性的動態(tài)頁面效果，為設(shè)計(jì)富客戶端的Web應(yīng)用奠定了基礎(chǔ)。

• ajax