Rails系統中的AJAX開發技術簡析

來源:互聯網
上載者:User
ajax|rails
   一、 Ajax的簡短曆史

  在短短几個月內,Ajax從一種十分模糊稀罕的技術一下變成最熱門的東西。本文將介紹極其容易使用的Ajax支援-作為Ruby on Rails web應用程式架構的一部分實現。
本文不是一個詳細的教程,所以我假定你已經瞭解一點關於如何組織和構建一個Rails web應用程式的知識。

  最開始出現的是全球資訊網。比較於傳統型應用程式,web應用程式相當緩慢和沉悶。無論如何,人們都喜歡上了web應用程式,因為他們無論在什麼地方都能上網,只要身邊的電腦上安裝一個瀏覽器就行。之後,微軟在Internet Explorer 5中建立了XMLHttpRequest,它使得瀏覽器端JavaScript可以與web伺服器在後台進行通訊而不需要瀏覽器顯示一新的web頁面。這使得人們有可能開發更具有流暢性和響應性的web應用程式。Mozilla不久在它的瀏覽器中也實現了XMLHttpRequest,還有Apple(Safari瀏覽器)和Opera等公司。

  XMLHttpRequest原先一定是Web上的一個被保持得最好的秘密。自從它在1998年初次登場,只有很少幾個網站使用它,而大多數開發人員,如果他們曾經瞭解過它的話,也從未使用過它。Google最終改變了這一現狀-它發行了一系列的高度輪廓性的web應用程式-在XMLHttpRequest支援人員下,它們擁有平滑的新穎的UI。最具有視覺吸引力的是Google Maps,它給你產生這樣的幻想-能夠在它的很小的視窗中圍繞著一個無限大小的地圖拖動滑鼠。

  當Google的突出對XMLHttpRequest的使用的事實戲劇性地表明完全可以大大改進web應用程式UI效果的時候,是Jesse James Garrett的一篇論文最終給了這種技術一個可用的名字:Ajax(非同步JavaScript和XML)。如果還不瞭解它的話,我們的整個業界至今可能還在等待之中。如今新的Ajax名字就象疾風野火迅速傳播開來。我從來沒見過如此迅速和這麼親近地採納一種新技術!

   二、 傳統型Web應用程式與Ajax應用程式的對比

  讓我們通過分析一個使用案例-把一個新項插入到一個列表中-來看一下一個Ajax web應用程式最本質的所在。

  在例中實現了一典型使用者介面-在一個web頁面中顯示當前列表,後面跟著一個輸入欄位-使用者在此可以輸入一個新項的文本。當使用者點擊一個建立項目按鈕時,應用程式實際上創鍵並把一個新項插入到列表中。
 
  在這種情況下,一傳統型web應用程式會發送輸入欄位值到伺服器;然後,伺服器作用於資料(通常通過更新一資料庫)並通過發送回一個新的web頁面-它顯示一個被更新後的包含該新項的列表-作為響應。這種情況佔用了很多頻寬,因為大多數新的頁面內容與原先的完全一樣。這個web應用程式的效能隨著列表的增長而逐漸下降。

  相反,一個Ajax web應用程式在後台發送輸入欄位到伺服器並且只更改當前web頁面受到影響的部分。這大大提高了使用者介面的響應能力,使它感覺起來象一個傳統型應用程式。

  你可以親自實驗一下這些效果。下面是一些到不同部落格的連結,其中的一個使用Ajax來發送評價而另一個沒用。你可以在它們之間相互寄送進行實驗:

  ·傳統型的Web應用程式

  ·Ajax Web應用程式

  注意,Ajax僅僅在於使用性。但是,就象任何技術一樣,你可以高效地使用它,也可能低效地使用。在展示了怎樣使用Ajax之後,我將給出一些關於何時使用Ajax的簡單建議。

   三、 怎樣在Web應用程式中使用Ajax

  在你的web應用程式中使用Ajax技術的較麻煩的方法是建立你自己的定製JavaScript-它直接使用XMLHttpRequest對象的API。為此,你必須處理每種瀏覽器的特性。

  一個較容易些的辦法是使用一個JavaScript庫-它提供了較進階的Ajax服務並且隱藏了瀏覽器之間的差別。象DWR,Prototype,Sajax和Ajax.NET這樣的庫都是很好的選擇。

  最容易的辦法是使用Rails中內建的Ajax工具。事實上,Rails使Ajax變得如此容易,以至於在典型情況下,使用Ajax和不用變得幾乎一樣容易。

   四、 Rails是怎樣實現Ajax的

  Rails擁有一個簡單的一致性模型來實現Ajax操作。

  一旦瀏覽器產生並顯示了起始web頁面,不同的使用者操作要求它顯示一個新的web頁面(就象任何傳統型的web應用程式)或觸發一個Ajax操作:

  1. 發生一個觸發器行動。這可能是使用者點擊一個按鈕或一個超級連結或者使用者改變了表單中的資料或欄位中的資料,或只是一個周期的觸發器(基於一個定時器)。

  2. 與觸發器相聯絡的資料(一個欄位或一個完整的表單)經由XMLHttpRequest被非同步地發送到伺服器上的一個行動處理器。

  3. 伺服器端行動處理器基於這些資料採取一些行動(這就是為什麼稱為一個行動處理器),並且返回一個HTML片斷作為它的響應。

  4. 用戶端JavaScript(由Rails自動地建立)收到該HTML片斷並且使用它更新當前HTML頁面指定的部分,經常是一個<div>標籤的內容。

  一個到伺服器的Ajax請求也可能返回任意的資料,但是我將僅討論一下HTML片斷。真實的美麗在於Rails使得在你的web應用程式中實現這些是多麼地容易。

[1] [2] [3] [4]  下一頁



相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.