Ajax 新浪潮

最近在 Adaptive Path 看到一個新的名詞:Ajax,究竟是什麼來的呢?原來在上一年漸露鋒芒的 XMLHttpRequest,也就是這一年來 Google 不停在玩的技術,用在 GMail , Google Suggests , Google Map 上。Ajax 的全寫是 Asynchronous JavaScript + XML,這個寫法是 Adaptive Path 所自創的縮寫,他們形容一個 Ajax 的網絡應用程式,有以下的特質:

  • XHTML + CSS 作合符標準的表達
  • 用 Document Object Model (DOM) 作動態顯示和互動
  • XML and XSLT 作為資料交換和操作
  • 用 XMLHttpRequest 取得非同步資料
  • 用 Javascript 將以上種種結合在一起

ajax.jpg

這個技術的主角 XMLHttpRequest 的最主要特點,在於能夠不用重新載入整個版面來更新資料,也就是所謂的 Refresh without Reload。因為與伺服器之間的溝通,完全是透過 Javascript 來實行,也就沒有傳統網頁的表單發送而引至的整版重載的 overhead,帶給用戶很慢的感覺。又因為使用 XMLHttpRequest 本身傳送的資料量很小,所以反應會更快,也就讓網絡程式更像一個桌面程式。


Ajax 的技術表明了要使用 XML + XSLT 作為資料格式,其實並非必要, XMLHttpRequest 本身並沒有限制資料格式,可以是 XML 又或是純文字格式的文字,然後到 Javscript 的時候就可以隨自己的喜歡來操作了。例如在 Google Suggests 裏,回傳的資料其實本身就是 Javscript 。

其中一個 Ajax 的應用,可用於表單的資料核對。表單核對是每一個網絡應用程式必需一環,確保使用者輸入正確的資料後,才真正的進行動作。以往的做法是用 Javascript 或伺服器來做,如果兩邊都寫,那麼就會產生兩堆不同的核對程式碼,管理很不方便。用了 Ajax 的方法,就可以完全將核對邏輯放在伺服器端,客戶端的 Javascript 程式,則只是傳送用戶所輸入的資料給伺服器核對,如果有錯誤的話,則回傳錯誤訊息。

不過,用 Ajax 的方法究竟要如何傳送整個表單呢?如果只是單純的一、兩個輸入的話,則可以用簡單的 GET 的方法來傳送這一、兩個輸入資料。但如果表單上面有很多不同的輸入,可以有自動的方法去取得表單上的各個資料然後送出,而不是要逐個輸入值寫入 GET 的 url 裏?這要看看發展下去有沒有好用的 library 代勞。

另一個問題是,用戶可能基於安全的理由而將瀏覽器的 Javascript 關掉,所以設計時要考慮到此一點:究竟是要讓用戶必需開啟 Javascript 才可以用,還是設計到表單可以單獨的運作, Javascript 則只是增加實用性 ( Unobtrusive Javascript )?這當中又會有很多考慮,開發上有一定的難度。

雖然如此, 在這一年有關 Ajax 技術的發展會更多,我們會看到很多不同的網站,運用這種技術來增加頁面的互動性和實用性,大家拭目以待。

相關連結:

Updated

  • 發覺應該用 “refresh without reload” 比較恰當….
  • 加入新的 JPSPAN 於相關資料,相當豐富的 xmlhttprequest 的資源庫

“Ajax 新浪潮” - 14 個回應

  1. gr marky 說:

    Reload without refresh <- 好正!
    有機會都想學
    (預覽時低部出現: MT::App::Comments=HASH Use of uninitialized value in sprintf at lib/MT/Template/Context.pm line 1187.)

  2. gr Jacky 說:

    其實並不難實現… 只要略懂 Javascript 就可以了 , 問題是如何有效地寫…
    預覽那個問題我也不知怎解決…. 其實應該會搬去另一個 blog engine..

  3. gr 鬼畜之道 ~地獄人間紀實~ 說:

    Ajax – Web Application 新路向

    <IT 新知引用自-網絡暴民Jacky’s BLOG><Ajax 名詞來源-Adaptive Path> 相信大家使用GMail 的時候也感受到這個Web Application 的過人之處-為甚麼Google 可以做到「Reload without refresh」的效果?明明

  4. gr Pan Admun Republic of Western Blog 說:

    The Asynchronous Web Experience

    I know there was something special there when I first got my Gmail account; A list of matching email addresses popup as I’m typing the email address in the to: box; A little name is showing up on…

  5. gr Pan Admun Republic of Western Blog 說:

    The Asynchronous Web Experience

    I know there was something special there when I first got my Gmail account; A list of matching email addresses popup as I’m typing the email address in the to: box; A little name is showing up on…

  6. gr 歪歪凍的技術網誌 說:

    Ajax.NET- A free library for .NET

  7. gr 喵爸爸的窩 說:

    Ajax

    Browser端一直都沒有 HTTP通訊的物件(更嚴格一點講是「落實」或者是「普及」),因此,往常要用程式在Browser中與Server溝通,通常需自行撰寫Applet、ActiveX或更龐大的物件、架構

  8. gr 貝蒂之愛 說:

    一個簡單的 Ajax 即時英文翻譯的 Demo

    var dict_width = ‘350px’
    var dict_height = ‘auto’
    var dict_background = ‘#333333’
    var dict_border = ‘1px dotted #000000’
    var dict_textColor = ‘#ffcc00’
    var dict_fontSize = ’100%’
    var dict_encoding = ‘utf8’

  9. gr UXBlog-使用者經驗部落^^--優使性(Usability) 說:

    Ajax在表單填寫上的應用

    相信每個人都有填寫表單的經驗,在郵局、銀行、學校等等不同的場合都可能會需要填寫各種不同形式的表單。在日常生活中除了有字不會寫之外,填表單是件再簡單不過的事,但同樣

  10. gr Whatup 的 Blog 說:

    [資訊] Ajax 顛覆傳統的 Web 介面

    Ajax 是什麼?AJAX (Asynchronous JavaScript and XML, 非同步 JavaScript 及 XML 技術)我們可以看到 gmail ,google maps 如果依照以前的寫法,應該要不停的 refresh 畫面,可是他們只會在右上角出現載入

  11. gr Kiwi & Sophia's Life 說:

    Web 介面設計新趨勢 – AJAX

    Web 介面設計新趨勢 – AJAX Ajax 新浪潮 Ajax: A New Approach to Web Applications

  12. gr 達MiNG 說:

    岩岩search AJAX 時,搵到你網站,睇完後了解左好多
     

  13. gr Henri 說:

    Write AJAX web applications with XUL-like pages and pure java.http://zk1.sf.netLive demo:http://www.potix.com/zkdemo/userguide
    We welcome your input…
    Henri Chen

  14. gr whatup 說:

    [

回覆

*必需
*必需 (不會公開)