當前位置:才華齋>設計>網頁設計>

Rails中的Ajax初體驗分析

網頁設計 閱讀(1.2W)

首先要糾正一個上篇博文《Rails中的Ajax初體驗》中的一個錯誤:上篇博文中,我說“要在Rails中使用Ajax,區域性模板是必須的”,經實踐檢驗,是錯誤的,特此更正。實踐是檢驗真理的唯一標準,此言不虛。經過專案中真正通過RJS實現AJAX樹,可知,通過使用_html、replace_html等輔助方法,可直接操作頁面上的元素,無須使用區域性模板。

Rails中的Ajax初體驗分析

整個的實現過程還是有點曲折:

之前使用的生成樹結構的頁面,是利用從伺服器獲取的所有資料,通過一系列javascript指令碼函式,一次性地生成整個樹結構目錄。這種方式對付系統的功能選單還遊刃有餘,但是要生成包含上千條資料的樹結構時,客戶端的瀏覽器需要十幾秒鐘才能把整個樹結構建立起來、顯示在頁面上,這對於使用者來說是不可忍受的——其實對於我們開發者來說,也是不可忍受的。那麼一個可行的辦法就是,利用AJAX技術,先顯示樹結構的第一級節點,當點選某個節點時,再從伺服器獲取該節點的子節點,顯示出來。這樣,每次與伺服器互動的資料量不大,加快了頁面響應。

一開始我打算利用RAILS中的AJAX機制,配合使用之前那個版本中的javascript函式。但是那個版本的思路,是基於從伺服器獲取的樹結構資料,通過迴圈、遞迴,在伺服器端生成好要在客戶端頁面執行的一系列javascript函式呼叫,以生成樹結構。至此,還算是比較符合AJAX的思路,但是下一步就大相徑庭了:舊版本的是將生成的那一大串javascript函式呼叫的字串,一次性地完全返回給客戶端頁面,客戶端頁面在載入前,已經獲得了這一大串字串,只需簡單地把它載入,就一次性的執行它、生成樹結構了。這種方式,等於沒有給AJAX留下插足的任何機會。

此路不通,於是我轉而尋找網上別人做的AJAX樹,試圖將其移植過來,為我所用。之前就找到過一個版的,用C#寫的,還沒仔細看過。於是開啟VS2005,建好了ASPX工程,研究了一下這個版的AJAX樹。這個版本自帶了一個ACCESS資料庫,裡面有一些演示資料。把IIS架起來後,執行得還真挺順暢。這個AJAX樹的功能做得還挺強,可以實現在頁面上對樹節點的新增、刪除、編輯、拖拽移動操作。程式碼也比較清晰:一個htm頁面和一個aspx頁面,其中aspx頁面中定義了一些伺服器端函式,組織出相應的要返回給htm頁面的html程式碼段。然而,要把這個移植過來也不容易,首先是對其生成html程式碼段的思路不熟悉,不好控制,另外一點,它是通過e返回所生成的html程式碼段,與RJS中直接指定頁面元素進行控制的思路又不一樣。

也是由於通過對以上兩種方式的探索,使得我對做AJAX樹的思路更加清晰的原因吧,我最終決定還是自己動手,完全自己做一個RAILS下的出來吧。儘管最終從核心內容到細節控制,總算是把這棵樹給搗騰出來了,但中間遇到幾個問題,有的不知道是否RAILS本身就不支援,還有的明明書上、別人都行得通,但我這就是不行。不知箇中緣由,列在這裡,若有人能夠解答,還望不吝賜教!謝過先!

問題一:用RJS的_html輔助方法,無法在一個table最後新增一行(即

),即使寫一個簡單的測試程式也不行。最後,我是用div和span做容器,向其中新增table來解決的.,即樹的每個節點都用一個只有一行的table來裝載。


問題二:在使用RJS時,在“render :update”程式碼段,只能是單純的一句呼叫輔助方法的語句,其它的,無論是加點if判斷,還是再使用另外一個輔助方法,程式碼全都失效。本想先用_html新增元素,再用call呼叫javascript函式之類,完全行不通,最終是預先在要插入元素的地方放置一個空的容器,然後換用replace_html,將容器中的空內容“換”成返回的html程式碼段,也達到了新增頁面元素的效果。

問題三:這個是最為奇怪的問題了。當我組合待返回的html元素的程式碼時,由於該元素還要繼續帶有AJAX連結,故本想用“#{}”將Ruby程式碼嵌入——這種方法理論上講是可行的,可我在實際操作中,記得好像只成功了一兩次,基本上都實現不了AJAX效果(實際上是沒效果)。無奈之下,我根據頁面初始顯示的第一級樹節點,查看了頁面程式碼,看到了生成的AJAX程式碼,再依照它的樣子,替換掉我本來想用Ruby程式碼的部分——也就是說,我最終不是用嵌入的Ruby程式碼,而是直接寫出將要生成的AJAX程式碼——這樣的程式碼是多麼的醜陋啊!

不過,整個過程下來,還是略有一些可以總結的東西:

總結一:由於樹節點中要顯示的文字中,有的會有加號“+”,而恰巧該文字還是要向伺服器傳送的引數,這種情況下,在組合要返回的html程式碼段時,加號會被當作連線字串的操作,那麼在必要的地方,則把加號替換成其它不會被誤解的符號,如下劃線“_”,而在傳給資料庫做查詢用時,再替換回來。Ruby中將字串中的模式替換成指定內容的函式是gsub,如:str.gsub("+","_"),就是把str中的加號替換成下劃線。該函式的第一個引數也可以是正則表示式。

總結二:對於頁面上要顯示的每一個樹節點,都用一個只有一行的table來控制,這樣做有一個好處,就是每個節點都可以獨立地控制顯示位置,而不用考慮colspan屬性,只需在前面新增指定個數的td即可,具體做法見“總結三”。

總結三(控制樹節點的顯示級別位置的方法):點選樹節點,向伺服器傳送該節點的ID,從而獲取該節點的子節點。與此同時,還要返回一個本節點的級別(頁面初始顯示的第一級節點的級別為0)。在生成子節點的html程式碼段時,得到父節點的級別,加上1,即為子節點的級別。根據級別數做迴圈,向包含子節點內容的table中新增相應個數的td。在所新增的td中,填入若干空格()(數量自定,一般2~3個為宜),但是空格只有與td配合使用效果才好,否則容易錯位。或者事先用windows的畫圖工具做一個白色小方塊的bmp檔案(方塊大小根據已有的在樹的節點前面表示展開、收攏節點的圖片設定),然後在td中嵌入這個小方塊圖片也行。如某個二級節點,其html程式碼段為: