主頁 > 知識庫 > AJAX開發(fā)簡略 (第一部分)

AJAX開發(fā)簡略 (第一部分)

熱門標簽:澳大利亞城市地圖標注 遼寧正規(guī)電銷機器人 許昌智能電銷機器人公司 姜堰電銷機器人 上海浦東騰訊地圖標注位置 遼寧銀行智能外呼系統(tǒng) 海南銀行智能外呼系統(tǒng)商家 電銷機器人違法了嗎 辰溪地圖標注
在使用瀏覽器瀏覽網(wǎng)頁的時候,當頁面刷新很慢的時候,你的瀏覽器在干什么?你的屏幕內(nèi)容是什么?是的,你的瀏覽器在等待刷新,而你的屏幕內(nèi)容是一片空白,而你在屏幕前苦苦的等待瀏覽器的響應。開發(fā)人員為了克服這種尷尬的局面,不得不在每一個可能需要長時間等待響應的頁面上增加一個DIV,告訴用戶“系統(tǒng)正在處理您的請求,請稍候……”。

  現(xiàn)在,有一種越來越流行越熱的“老”技術,可以徹底改變這種窘迫的局面。那就是AJAX。如今,隨著Gmail、Google-maps的應用和各種瀏覽器的支持,AJAX正逐漸吸引全世界的眼球。

一、AJAX定義
   AJAX(Asynchronous JavaScript and XML)其實是多種技術的綜合,包括Javascript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest。其中:

  使用XHTML和CSS標準化呈現(xiàn),使用DOM實現(xiàn)動態(tài)顯示和交互,使用XML和XSTL進行數(shù)據(jù)交換與處理,使用XMLHttpRequest對象進行異步數(shù)據(jù)讀取,使用Javascript綁定和處理所有數(shù)據(jù)。

  在AJAX提出之前,業(yè)界對于上述技術都只是單獨的使用,沒有綜合使用,也是由于之前的技術需求所決定的。隨著應用的廣泛,AJAX也成為香餑餑了。

二、現(xiàn)狀與需要解決的問題
  傳統(tǒng)的Web應用采用同步交互過程,這種情況下,用戶首先向HTTP服務器觸發(fā)一個行為或請求的呼求。反過來,服務器執(zhí)行某些任務,再向發(fā)出請求的用戶返回一個HTML頁面。這是一種不連貫的用戶體驗,服務器在處理請求的時候,用戶多數(shù)時間處于等待的狀態(tài),屏幕內(nèi)容也是一片空白。如下圖:

  自從采用超文本作為Web傳輸和呈現(xiàn)之后,我們都是采用這么一套傳輸方式。當負載比較小的時候,這并不會體現(xiàn)出有什么不妥??墒钱斬撦d比較大,響應時間要很長,1分鐘、2分鐘……數(shù)分鐘的時候,這種等待就不可忍受了。嚴重的,超過響應時間,服務器干脆告訴你頁面不可用。另外,某些時候,我只是想改變頁面一小部分的數(shù)據(jù),那為什么我必須重新加載整個頁面呢?!當軟件設計越來越講究人性化的時候,這么糟糕的用戶體驗簡直與這種原則背道而馳。為什么老是要讓用戶等待服務器取數(shù)據(jù)呢?至少,我們應該減少用戶等待的時間?,F(xiàn)在,除了程序設計、編碼優(yōu)化和服務器調(diào)優(yōu)之外,還可以采用AJAX。

三、為什么使用AJAX
  與傳統(tǒng)的Web應用不同,AJAX采用異步交互過程。AJAX在用戶與服務器之間引入一個中間媒介,從而消除了網(wǎng)絡交互過程中的處理—等待—處理—等待缺點。用戶的瀏覽器在執(zhí)行任務時即裝載了AJAX引擎。AJAX引擎用JavaScript語言編寫,通常藏在一個隱藏的框架中。它負責編譯用戶界面及與服務器之間的交互。AJAX引擎允許用戶與應用軟件之間的交互過程異步進行,獨立于用戶與網(wǎng)絡服務器間的交流?,F(xiàn)在,可以用Javascript調(diào)用AJAX引擎來代替產(chǎn)生一個HTTP的用戶動作,內(nèi)存中的數(shù)據(jù)編輯、頁面導航、數(shù)據(jù)校驗這些不需要重新載入整個頁面的需求可以交給AJAX來執(zhí)行。

  使用AJAX,可以為ISP、開發(fā)人員、終端用戶帶來可見的便捷:

  • 減輕服務器的負擔。AJAX的原則是“按需取數(shù)據(jù)”,可以最大程度的減少冗余請求,和響應對服務器造成的負擔。
  • 無刷新更新頁面,減少用戶心理和實際的等待時間。特別的,當要讀取大量的數(shù)據(jù)的時候,不用像Reload那樣出現(xiàn)白屏的情況,AJAX使用XMLHTTP對象發(fā)送請求并得到服務器響應,在不重新載入整個頁面的情況下用Javascript操作DOM最終更新頁面。所以在讀取數(shù)據(jù)的過程中,用戶所面對的不是白屏,是原來的頁面內(nèi)容(也可以加一個Loading的提示框讓用戶知道處于讀取數(shù)據(jù)過程),只有當數(shù)據(jù)接收完畢之后才更新相應部分的內(nèi)容。這種更新是瞬間的,用戶幾乎感覺不到。
  • 帶來更好的用戶體驗。
  • 可以把以前一些服務器負擔的工作轉(zhuǎn)嫁到客戶端,利用客戶端閑置的能力來處理,減輕服務器和帶寬的負擔,節(jié)約空間和寬帶租用成本。
  • 可以調(diào)用外部數(shù)據(jù)。
  • 基于標準化的并被廣泛支持的技術,不需要下載插件或者小程序。
  • 進一步促進頁面呈現(xiàn)和數(shù)據(jù)的分離。
四、誰在使用AJAX
  在應用AJAX開發(fā)上面,Google當仁不讓是表率。Orkut、Gmail、Google Groups、Google Maps、Google Suggest都應用了這項技術。Amazon的A9.com搜索引擎也采用了類似的技術。

  微軟也在積極開發(fā)更為完善的AJAX應用:它即將推出代號為Atlas的AJAX工具。Atlas的功能超越了AJAX本身,包括整合Visual Studio的調(diào)試功能。另外,新的ASP.NET控件將使客戶端控件與服務器端代碼的捆綁更為簡便。Atlas客戶腳本框架(Atlas Clent Script Framework)也使與網(wǎng)頁及相關項目的交互更為便利。但Visual Studio 2005中并不包含此項功能。

  微軟最近宣布Atlas客戶腳本框架將包含如下內(nèi)容(詳細資料請訪問Atlas計劃網(wǎng)站):

  • 一個可擴展的核心框架,它添加了JavaScript功能:如生命同時期管理、繼承管理、多點傳送處理器和界面管理。
  • 一個常見功能的基本類庫,有豐富的字符串處理、計時器和運行任務。
  • 為HTML附加動態(tài)行為的用戶界面框架。
  • 一組用來簡化服務器連通和網(wǎng)絡訪問的網(wǎng)絡堆棧。
  • 一組豐富的用戶界面開發(fā)控件,如:自動完成的文本框、動畫和拖放。
  • 處理瀏覽器腳本行為差異的瀏覽器兼容層面。

  典型的,微軟將AJAX技術應用在MSN Space上面。很多人一直都對MS Space服務感到很奇怪,當提交回復評論以后,瀏覽器會暫時停頓一下,然后在無刷新的情況下把我提交的評論顯示出來。這個就是應用了AJAX的效果。試想,如果添加一個評論就要重新刷新整個頁面,那可真費事。

  目前,AJAX應用最普遍的領域是GIS-Map方面。GIS的區(qū)域搜索強調(diào)快速響應,AJAX的特點正好符合這種需求。

五、用AJAX改進你的設計
   AJAX雖然可以實現(xiàn)無刷新更新頁面內(nèi)容,但是也不是什么地方都可以用,主要應用在交互較多、頻繁讀數(shù)據(jù)、數(shù)據(jù)分類良好的Web應用中?,F(xiàn)在,讓我們舉兩個例子,看看如何用AJAX改進你的設計。

例子1:數(shù)據(jù)校驗
  在輸入form表單內(nèi)容的時候,我們通常需要確保數(shù)據(jù)的唯一性。因此,常常在頁面上提供“唯一性校驗”按鈕,讓用戶點擊,打開一個校驗小窗口;或者等form提交到服務器端,由服務器判斷后在返回相應的校驗信息。前者,window.open操作本來就是比較耗費資源的,通常由window. showModalDialog代替,即使這樣也要彈出一個對話框;后者,需要把整個頁面提交到服務器并由服務器判斷校驗,這個過程不僅時間長而且加重了服務器負擔。而使用AJAX,這個校驗請求可以由XMLHttpRequest對象發(fā)出,整個過程不需要彈出新窗口,也不需要將整個頁面提交到服務器,快速又不加重服務器負擔。例子2:按需取數(shù)據(jù)—級聯(lián)菜單
  以前,為了避免每次對菜單的操作引起的重載頁面,不采用每次調(diào)用后臺的方式,而是一次性將級聯(lián)菜單的所有數(shù)據(jù)全部讀取出來并寫入數(shù)組,然后根據(jù)用戶的操作用JavaScript來控制它的子集項目的呈現(xiàn),這樣雖然解決了操作響應速度、不重載頁面以及避免向服務器頻繁發(fā)送請求的問題,但是如果用戶不對菜單進行操作或只對菜單中的一部分進行操作的話,那讀取的數(shù)據(jù)中的一部分就會成為冗余數(shù)據(jù)而浪費用戶的資源,特別是在菜單結構復雜、數(shù)據(jù)量大的情況下(比如菜單有很多級、每一級菜又有上百個項目),這種弊端就更為突出。

  現(xiàn)在應用AJAX,在初始化頁面時我們只讀出它的第一級的所有數(shù)據(jù)并顯示,在用戶操作一級菜單其中一項時,會通過Ajax向后臺請求當前一級項目所屬的二級子菜單的所有數(shù)據(jù),如果再繼續(xù)請求已經(jīng)呈現(xiàn)的二級菜單中的一項時,再向后面請求所操作二級菜單項對應的所有三級菜單的所有數(shù)據(jù),以此類推……這樣,用什么就取什么、用多少就取多少,就不會有數(shù)據(jù)的冗余和浪費,減少了數(shù)據(jù)下載總量,而且更新頁面時不用重載全部內(nèi)容,只更新需要更新的那部分即可,相對于后臺處理并重載的方式縮短了用戶等待時間,也把對資源的浪費降到最低。

例子3:讀取外部數(shù)據(jù)
  AJAX可以調(diào)用外部數(shù)據(jù),因此,可以對一些開發(fā)的數(shù)據(jù)比如XML文檔、RSS文檔進行二次加工,實現(xiàn)數(shù)據(jù)整合或者開發(fā)應用程序。六、AJAX的缺陷

  AJAX不是完美的技術。使用AJAX,它的一些缺陷不得不權衡一下:

  • AJAX大量使用了Javascript和AJAX引擎,而這個取決于瀏覽器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持,Mozilla雖然也支持AJAX,但是提供XMLHttpRequest的方式不一樣。所以,使用AJAX的程序必須測試針對各個瀏覽器的兼容性。
  • AJAX更新頁面內(nèi)容的時候并沒有刷新整個頁面,因此,網(wǎng)頁的后退功能是失效的;有的用戶還經(jīng)常搞不清楚現(xiàn)在的數(shù)據(jù)是舊的還是已經(jīng)更新過的。這個就需要在明顯位置提醒用戶“數(shù)據(jù)已更新”。
  • 對流媒體的支持沒有FLASH、Java Applet好。
  • 一些手持設備(如手機、PDA等)現(xiàn)在還不能很好的支持Ajax。

標簽:伊春 晉城 威海 西藏 銅川 深圳 撫州 崇左

巨人網(wǎng)絡通訊聲明:本文標題《AJAX開發(fā)簡略 (第一部分)》,本文關鍵詞  AJAX,開發(fā),簡略,第,一部分,;如發(fā)現(xiàn)本文內(nèi)容存在版權問題,煩請?zhí)峁┫嚓P信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡,涉及言論、版權與本站無關。
  • 相關文章
  • 下面列出與本文章《AJAX開發(fā)簡略 (第一部分)》相關的同類信息!
  • 本頁收集關于AJAX開發(fā)簡略 (第一部分)的相關信息資訊供網(wǎng)民參考!
  • 推薦文章