茫茫網海中的冷日 - 對這文章發表回應
茫茫網海中的冷日
         
茫茫網海中的冷日
發生過的事,不可能遺忘,只是想不起來而已!
 恭喜您是本站第 1670281 位訪客!  登入  | 註冊
主選單

Google 自訂搜尋

Goole 廣告

隨機相片
IMG_60D_00208.jpg

授權條款

使用者登入
使用者名稱:

密碼:


忘了密碼?

現在就註冊!

對這文章發表回應

發表限制: 非會員 可以發表

發表者: 冷日 發表時間: 2008/3/11 5:19:33

AJAX 全稱為「Asynchronous JavaScript and XML」(非同步 JavaScriptXML ),是一種創建互動式網頁應用的 網頁開發 技術。根據Ajax提出者Jesse James Garrett建議 [1] ,它:

  • 使用 XHTML + CSS 來表示信息;
  • 使用 JavaScript 操作
    DOM (Document Object Model)進行動態顯示及交互;
  • 使用 XMLXSLT 進行數據交換及相關操作;
  • 使用 XMLHttpRequest 對象與Web伺服器進行非同步數據交換;
  • 使用JavaScript將所有的東西綁定在一起。
  • 使用 SOAPXML 的格式來傳送方法名和方法參數。

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

AJAX的應用使用支持以上技術的Web
瀏覽器 作為運行平臺。這些瀏覽器目前包括: Internet ExplorerMozillaFirefoxOperaKonqueror 及Mac OS的 Safari 。但是 Opera 不支持
XSL格式對象 ,也不支持 XSLT [2]

與傳統的Web應用比較

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

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

發展史

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

優點和批評

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

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

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

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

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

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

核心

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


<script type="text/javascript">
var xmlHttp = new XMLHttpRequest();
</script>

瀏覽器兼容性問題

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應用最頭痛的問題莫過於以下幾點:

  1. Ajax在本質上是一個瀏覽器端的技術,首先面臨無可避免的第一個問題即是瀏覽器的兼容性問題。各家瀏覽器對於 JavaScript / DOM / CSS 的支持總有部分不太相同或是有Bug,甚至同一瀏覽器的各個版本間對於JavaScript/DOM/CSS的支持也有可能部分不一樣。這導致程式設計師在寫Ajax應用時花大部分的時間在 調試 瀏覽器的兼容性而非在應用程序本身。因此,目前大部分的Ajax連結庫或開發框架大多以js連結庫的形式存在,以定義更高階的JavaScript API 、JavaScript對象(模板)、或者JavaScript Widgets來解決此問題。如prototype.js。

  2. 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之支持。
  3. Ajax是以非同步的方式向伺服器提交需求。對伺服器而言,其與傳統的提交窗體需求並無不同,而且由於是以非同步之方式提交,如果同時有多個Ajax需求及窗體提交需求,將無法保證哪一個需求先獲得伺服器的響應。這會造成應用程序典型的多程序(process)或多執行緒(thread)的競爭(racing)問題。程式設計師因此必須自行處理或在JavaScript裡面動手腳以避免這類競爭問題的發生(如Ajax需求未響應之前,先disable送出按鈕),這又不必要的增加了程式設計師的負擔。目前已知有自動處理此問題之開發框架似乎只有 ZK

參考資料


  1. ^ (英文) Ajax: 網頁應用程式的新方法 — Jesse James Garrett,最近存取日2007年11月7日
  2. ^ (英文) Opera 9 支援的網頁規格 — XSLT, XPath, and XSL-FO 部分論及不支持 XSL-FO 與 XSLT,最近存取日2007年11月7日
  3. ^
    (英文) 微軟 XML Parser (MSXML) 版本列表 ,最近存取日2007年11月7日
  4. ^ (英文) Web設計10大錯誤(1999年) — Jakob Nielsen 著
  5. ^
    (英文)
    Remote Scripting with AJAX, Part 2
  6. ^ (英文) 延遲必死:預讀資料以降低延遲 — JonathanBoutelle.com
  7. ^ (英文)
    不可靠網路下的非同步要求 — Harry Fuecks 著,2005年2月
  8. ^ (英文) 小朋友們聽著, AJAX 不怎麼酷 — Marcus Baker 著,2005年6月3日

外部連接

工具

  • ASP.NET AJAX Extension (開發階段時代號 Atlas),
    微軟 AJAX工具箱。
  • Dojo工具箱, AJAX/DHTML工具箱。
  • Prototype, 開放原始碼框架。
  • [Buffalo] Web Remoting (based on prototype)
  • [openrico] JS UI component (based on prototype)
  • PHPRPC, 開放原始碼多語言支持的跨平臺的安全的 Web 遠程過程調用框架,讓 Ajax 編程更容易。
  • Sajax, 簡單AJAX工具箱
  • Rialto, Rich Internet AppLication TOolkit.

  • ZK, 開放原始碼AJAX/XUL框架, JAVA 專用。
  • MochiKit 一個不自稱AJAX的輕量級js庫,支持 Json
  • OpenLaszlo 原本專注在 Flash 作為表現層的 Laszlo 將方向轉至AJAX。

  • script.aculo.usRuby on Rails 量身打造的AJAX函式庫,跨平臺支援。
  • Rico 知名的開源碼的AJAX函式庫,跨平臺支援。
  • Xajax 知名的開源碼開發AJAX用PHP函式庫。
  • DWR Web Remoting
  • qooxdoo JS UI component (C/S Style)
  • jsLINB 完全OOP,帶有執行緒模擬的ajax RIA框架。

  • Yahoo! UI Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX.
  • jQuery 用於簡化AJAX開發的Javascript庫

門戶

圖書

  • 《Ajax基礎教程》, Foundations Of Ajax 中文版,人民郵電出版社圖靈公司出版。 ISBN 7-115-14481-8
  • 《Ajax實戰》, Ajax in Action 中文版,人民郵電出版社圖靈公司出版。
    ISBN 7-115-14717-5
  • 《Head Rush Ajax》O'Reilly出版社
  • 《Ajax 實戰手冊》碁峰 ISBN 9861810366
  • 《Ajax技術手冊》碁峰 ISBN 9861810196
  • 《Professional Ajax, 2 edition》Wrox (March 12, 2007) ISBN 0470109491

其他資源

內容圖示
url email imgsrc image code quote
樣本
bold italic underline linethrough   












 [詳情...]
validation picture

注意事項:
預覽不需輸入認證碼,僅真正發送文章時才會檢查驗證碼。
認證碼有效期10分鐘,若輸入資料超過10分鐘,請您備份內容後,重新整理本頁並貼回您的內容,再輸入驗證碼送出。

選項

Powered by XOOPS 2.0 © 2001-2008 The XOOPS Project|