正文

AJAX zt

(2007-09-01 05:38:56) 下一個

AJAX


    AJAX全稱為“Asynchronous JavaScript and XML”(異步JavaScript和XML),是一種創建交互式網頁應用的網頁開發技術。它通過XHTML+CSS來表示信息; 用JavaScript操作DOM(Document Object Model)進行動態顯示及交互;XML,XMLHttpRequest,和XSLT與Web服務器進行 異步數據交換及相關操作它的最大優點就是可以在不刷新整個網頁麵的前提下維護數據的更新。避免了那些沒有改變的信息在網絡上發送. 這使得Web應用程序更為迅捷地響應用戶交互。 Google在它著名的交互應用程序中使用了異步通訊,如Google討論組、Google地圖、Google搜索建議、Gmail等。

    
類似於DHTML或LAMP,AJAX不是指一種單一的技術,而是有機地利用了一係列相關的技術。事實上,一些基於AJAX的“派生/合成”式(derivative/composite)的技術正在出現,如“AFLAX”。

AJAX的應用使用支持以上技術的Web瀏覽器作為運行平台。
這些瀏覽器目前包括:

Mozilla、Firefox、Internet Explorer
Opera、KonquerorMac OS的Safari
但是Opera不支持XSL格式對象,也不支持XSLT。


與傳統的Web應用比較
   傳統的Web應用允許用戶端填寫表單(form),當提交表單時就向Web服務器發送一個請求。服務器接收並處理傳來的表單,然後送回一個新的網頁,但這個做法浪費了許多帶寬,因為在前後兩個頁麵中的大部分HTML代碼往往是相同的。由於每次應用的交互都需要向服務器發送請求,應用的響應時間就依賴於服務器的響應(回應)時間。這導致了用戶界麵的響應(回應)比本地應用慢得多。

    與此不同,AJAX應用可以僅向服務器發送並取回必需的數據,它使用SOAP或其它一些基於XML的頁麵服務接口(接口),並在客戶端采用JavaScript處理來自服務器的響應(回應)。因為在服務器(服務器)和瀏覽器之間交換的數據大量減少(大約隻有原來的5%),結果我們就能看到響應(服務器回應)更快的應用(結果)。同時很多的處理工作可以在發出請求的客戶端機器上完成,所以Web服務器(服務器)的處理時間也減少了。

發展史
  該技術在1998年前後得到了應用。允許客戶端腳本發送HTTP請求(XMLHTTP)的第一個組件由Outlook Web Access小組寫成。該組件原屬於微軟Exchange Server,並且迅速地成為了Internet Explorer 4.0[2]的一部分。部分觀察家認為,Outlook Web Access是第一個應用了Ajax技術的成功的商業應用程序,並成為包括Oddpost的網絡郵件產品在內的許多產品的領頭羊。但是,2005年初,許多事件使得Ajax被大眾所接受。Ajax這個詞由《Ajax: A New Approach to Web Applications》一文所創,該文的迅速流傳提高了人們使用該項技術的意識。另外,對Mozilla/Gecko的支持使得該技術走向成熟,變得更為易用。

優點和批評
   使用Ajax的最大優點,就是能在不更新整個頁麵的前提下維護數據。這使得Web應用程序更為迅捷地回應用戶動作,並避免了在網絡上發送那些沒有改變過的信息。

   Ajax不需要任何瀏覽器插件,但需要用戶允許JavaScript在瀏覽器上執行。就像DHTML應用程序那樣,Ajax應用程序必須在眾多不同的瀏覽器和平台上經過嚴格的測試。隨著Ajax的成熟,一些簡化Ajax使用方法的程序庫也相繼問世。同樣,也出現了另一種輔助程序設計的技術,為那些不支持JavaScript的用戶提供替代功能。

   對應用Ajax最主要的不足就是,它可能破壞瀏覽器後退(Back)按鈕的正常行為(參見Jakob Nielsen's的《Web設計10大錯誤(1999年)》)。在動態更新頁麵的情況下,用戶無法回到前一個頁麵狀態,這是因為瀏覽器僅能記下曆史記錄中的靜態頁麵。一個被完整讀入的頁麵與一個已經被動態修改過的頁麵之間的差別非常微妙;用戶通常都希望單擊後退按鈕,就能夠取消他們的前一次操作,但是在Ajax應用程序中,卻無法這樣做。不過開發者已想出了種種辦法來解決這個問題,當中大多數都是在用戶單擊後退按鈕訪問曆史記錄時,通過建立或使用一個隱藏的IFRAME來重現頁麵上的變更。(例如,當用戶在Google Maps中單擊後退時,它在一個隱藏的IFRAME中進行搜索,然後將搜索結果反映到Ajax元素上,以便將應用程序狀態恢複到當時的狀態。)

   一個相關的觀點認為,使用動態頁麵更新使得用戶難於將某個特定的狀態保存到收藏夾中。該問題的解決方案也已出現,大部分都使用URL片斷標識符(通常被稱為錨點,即URL中#後麵的部分)來保持跟蹤,允許用戶回到指定的某個應用程序狀態。(許多瀏覽器允許JavaScript動態更新錨點,這使得Ajax應用程序能夠在更新顯示內容的同時更新錨點。)這些解決方案也同時解決了許多關於不支持後退按鈕的爭論。

   進行Ajax開發時,網絡延遲——即用戶發出請求到服務器發出響應之間的間隔——需要慎重考慮。不給予用戶明確的回應[3],沒有恰當的預讀數據[4],或者對XMLHttpRequest的不恰當處理[5],都會使用戶感到延遲,這是用戶不欲看到的,也是他們無法理解的。[6]通常的解決方案是,使用一個可視化的組件來告訴用戶係統正在進行後台操作並且正在讀取數據和內容。

   一些手持設備(如手機、PDA等)現在還不能很好的支持Ajax;
用JavaScript作的Ajax引擎,JavaScript的兼容性和DeBug都是讓人頭痛的事;
Ajax的無刷新重載,由於頁麵的變化沒有刷新重載那麽明顯,所以容易給用戶帶來困擾――用戶不太清楚現在的數據是新的還是已經更新過的;現有的解決有:在相關位置提示、數據更新的區域設計得比較明顯、數據更新後給用戶提示等;
對串流媒體的支持沒有FLASH、Java Applet好;

核心
   Ajax的核心是 JavaScript 對象 XmlHttpRequest。該對象在Internet Explorer 5中首次引入,它是一種支持異步請求的技術。簡而言之,XmlHttpRequest使您可以使用JavaScript向服務器提出請求並處理響應,而不阻塞用戶。 對象創建示例:
 

 


瀏覽器兼容性問題
JavaScript編程的最大問題來自不同的瀏覽器對各種技術和標準的支持。
 

XmlHttpRequest對象在不同瀏覽器中不同的創建方法:
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0");
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP");
xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp_request = new XMLHttpRequest();


開發Ajax應用麵臨的挑戰及解決方案
對程序員而言,開發Ajax應用最頭痛的問題莫過於以下幾點:

   Ajax在本質上是一個瀏覽器端的技術,首先麵臨無可避免的第一個問題即是瀏覽器的兼容性問題。各家瀏覽器對於JavaScript/DOM/CSS的支持總有部分不太相同或是有Bug,甚至同一瀏覽器的各個版本間對於JavaScript/DOM/CSS的支持也有可能部分不一樣。這導致程序員在寫Ajax應用時花大部分的時間在調試瀏覽器的兼容性而非在應用程序本身。因此,目前大部分的Ajax鏈接庫或開發框架大多以js鏈接庫的形式存在,以定義更高階的JavaScript API 、JavaScript對象(模板)、或者JavaScript Widgets來解決此問題。如prototype.js。
    Ajax技術之主要目的在於局部交換客戶端及服務器間之數據。如同傳統之主從架構,無可避免的會有部分的業務邏輯會實現在客戶端,或部分在客戶端部分在服務器。由於業務邏輯可能分散在客戶端及服務器,且以不同之程序語言實現,這導致Ajax應用程序極難維護。如有使用者接口或業務邏輯之更動需求,再加上前一個JavaScript/DOM/CSS之兼容性問題,Ajax應用往往變成程序員的夢靨。針對業務邏輯分散的問題,Ajax開發框架大致可分為兩類:
    將業務邏輯及表現層放在瀏覽器,數據層放在服務器:因為所有的程序以JavaScript執行在客戶端,隻有需要數據時才向服務器要求服務,此法又稱為胖客戶端(fat client)架構。服務器在此架構下通常僅用於提供及儲存數據。此法的好處在於程序員可以充分利用JavaScript搭配業務邏輯來做出特殊的使用者接口,以符合終端使用者的要求。
    但是問題也不少,主因在
第一,JavaScript語言本身之能力可能不足以處理複雜的業務邏輯。
第二,JavaScript的執行效能一向不好。
第三,JavaScript存取服務器數據,仍需適當的服務器端程序之配合。
第四,瀏覽器兼容性的問題又出現。

   有些Ajax開發框架如DWR企圖以自動生成JavaScript之方式來避免兼容的問題,並開立通道使得JavaScript可以直接叫用服務器端的Java程序來簡化數據的存取。但是前述第一及第二兩個問題仍然存在,程序員必須費相當的力氣才能達到應用程序之規格要求,或可能根本無法達到要求。
將表現層、業務邏輯、及數據層放在服務器,瀏覽器僅有使用者接口引擎(User Interface engine);此法又稱為瘦客戶端(thin client)架構,或中心服務器(server-centric)架構。瀏覽器的使用者接口引擎僅用於反映服務器的表現層以及傳達使用者的輸入回到服務器的表現層。由瀏覽器所觸發之事件亦送回服務器處理,根據業務邏輯來更新表現層,然後反映回瀏覽器。因為所有應用程序完全在服務器執行,數據及表現層皆可直接存取,程序員隻需使用服務器端相對較成熟之程序語言(如Java語言)即可,不需再學習JavaScript/DOM/CSS,在開發應用程序時相對容易。缺點在於使用者接口引擎以及表現層通常以標準組件的形式存在,如需要特殊組件(使用者接口)時,往往須待原框架之開發者提供,緩不濟急。如開源碼Ajax開發框架ZK目前支持XUL及XHTML組件,尚無XAML之支持。
  Ajax是以異步的方式向服務器提交需求。對服務器而言,其與傳統的提交窗體需求並無不同,而且由於是以異步之方式提交,如果同時有多個Ajax需求及窗體提交需求,將無法保證哪一個需求先獲得服務器的響應。這會造成應用程序典型的多程序(process)或多線程(thread)的競爭(racing)問題。程序員因此必須自行處理或在JavaScript裏麵動手腳以避免這類競爭問題的發生(如Ajax需求未響應之前,先disable送出按鈕),這又不必要的增加了程序員的負擔。
 

[ 打印 ]
閱讀 ()評論 (0)
評論
目前還沒有任何評論
登錄後才可評論.