- 相關(guān)推薦
Rails中的Ajax初體驗(yàn)分析
首先要糾正一個(gè)上篇博文《Rails中的Ajax初體驗(yàn)》中的一個(gè)錯(cuò)誤：上篇博文中，我說(shuō)“要在Rails中使用Ajax，局部模板是必須的”，經(jīng)實(shí)踐檢驗(yàn)，是錯(cuò)誤的，特此更正。實(shí)踐是檢驗(yàn)真理的唯一標(biāo)準(zhǔn)，此言不虛。經(jīng)過(guò)項(xiàng)目中真正通過(guò)RJS實(shí)現(xiàn)AJAX樹(shù)，可知，通過(guò)使用_html、replace_html等輔助方法，可直接操作頁(yè)面上的元素，無(wú)須使用局部模板。
整個(gè)的實(shí)現(xiàn)過(guò)程還是有點(diǎn)曲折：
之前使用的生成樹(shù)結(jié)構(gòu)的頁(yè)面，是利用從服務(wù)器獲取的所有數(shù)據(jù)，通過(guò)一系列javascript腳本函數(shù)，一次性地生成整個(gè)樹(shù)結(jié)構(gòu)目錄。這種方式對(duì)付系統(tǒng)的功能菜單還游刃有余，但是要生成包含上千條數(shù)據(jù)的樹(shù)結(jié)構(gòu)時(shí)，客戶端的瀏覽器需要十幾秒鐘才能把整個(gè)樹(shù)結(jié)構(gòu)建立起來(lái)、顯示在頁(yè)面上，這對(duì)于用戶來(lái)說(shuō)是不可忍受的——其實(shí)對(duì)于我們開(kāi)發(fā)者來(lái)說(shuō)，也是不可忍受的。那么一個(gè)可行的辦法就是，利用AJAX技術(shù)，先顯示樹(shù)結(jié)構(gòu)的第一級(jí)節(jié)點(diǎn)，當(dāng)點(diǎn)擊某個(gè)節(jié)點(diǎn)時(shí)，再?gòu)姆⻊?wù)器獲取該節(jié)點(diǎn)的子節(jié)點(diǎn)，顯示出來(lái)。這樣，每次與服務(wù)器交互的數(shù)據(jù)量不大，加快了頁(yè)面響應(yīng)。
一開(kāi)始我打算利用RAILS中的AJAX機(jī)制，配合使用之前那個(gè)版本中的javascript函數(shù)。但是那個(gè)版本的思路，是基于從服務(wù)器獲取的樹(shù)結(jié)構(gòu)數(shù)據(jù)，通過(guò)循環(huán)、遞歸，在服務(wù)器端生成好要在客戶端頁(yè)面執(zhí)行的一系列javascript函數(shù)調(diào)用，以生成樹(shù)結(jié)構(gòu)。至此，還算是比較符合AJAX的思路，但是下一步就大相徑庭了：舊版本的是將生成的那一大串javascript函數(shù)調(diào)用的字符串，一次性地完全返回給客戶端頁(yè)面，客戶端頁(yè)面在加載前，已經(jīng)獲得了這一大串字符串，只需簡(jiǎn)單地把它加載，就一次性的執(zhí)行它、生成樹(shù)結(jié)構(gòu)了。這種方式，等于沒(méi)有給AJAX留下插足的任何機(jī)會(huì)。
此路不通，于是我轉(zhuǎn)而尋找網(wǎng)上別人做的AJAX樹(shù)，試圖將其移植過(guò)來(lái)，為我所用。之前就找到過(guò)一個(gè).NET版的，用C#寫的，還沒(méi)仔細(xì)看過(guò)。于是打開(kāi)VS2005，建好了ASPX工程，研究了一下這個(gè).NET版的AJAX樹(shù)。這個(gè)版本自帶了一個(gè)ACCESS數(shù)據(jù)庫(kù)，里面有一些演示數(shù)據(jù)。把IIS架起來(lái)后，運(yùn)行得還真挺順暢。這個(gè)AJAX樹(shù)的功能做得還挺強(qiáng)，可以實(shí)現(xiàn)在頁(yè)面上對(duì)樹(shù)節(jié)點(diǎn)的添加、刪除、編輯、拖拽移動(dòng)操作。代碼也比較清晰：一個(gè)htm頁(yè)面和一個(gè)aspx頁(yè)面，其中aspx頁(yè)面中定義了一些服務(wù)器端函數(shù)，組織出相應(yīng)的要返回給htm頁(yè)面的html代碼段。然而，要把這個(gè)移植過(guò)來(lái)也不容易，首先是對(duì)其生成html代碼段的思路不熟悉，不好控制，另外一點(diǎn)，它是通過(guò)response.write返回所生成的html代碼段，與RJS中直接指定頁(yè)面元素進(jìn)行控制的思路又不一樣。
也是由于通過(guò)對(duì)以上兩種方式的探索，使得我對(duì)做AJAX樹(shù)的思路更加清晰的原因吧，我最終決定還是自己動(dòng)手，完全自己做一個(gè)RAILS下的出來(lái)吧。盡管最終從核心內(nèi)容到細(xì)節(jié)控制，總算是把這棵樹(shù)給搗騰出來(lái)了，但中間遇到幾個(gè)問(wèn)題，有的不知道是否RAILS本身就不支持，還有的明明書上、別人都行得通，但我這就是不行。不知個(gè)中緣由，列在這里，若有人能夠解答，還望不吝賜教！謝過(guò)先！
問(wèn)題一：用RJS的_html輔助方法，無(wú)法在一個(gè)table最后添加一行（即
�。词箤懸粋�(gè)簡(jiǎn)單的測(cè)試程序也不行。最后，我是用div和span做容器，向其中添加table來(lái)解決的，即樹(shù)的每個(gè)節(jié)點(diǎn)都用一個(gè)只有一行的table來(lái)裝載。
問(wèn)題二：在使用RJS時(shí)，在“render :update”代碼段，只能是單純的一句調(diào)用輔助方法的語(yǔ)句，其它的，無(wú)論是加點(diǎn)if判斷，還是再使用另外一個(gè)輔助方法，代碼全都失效。本想先用_html添加元素，再用call調(diào)用javascript函數(shù)之類，完全行不通，最終是預(yù)先在要插入元素的地方放置一個(gè)空的容器，然后換用replace_html，將容器中的空內(nèi)容“換”成返回的html代碼段，也達(dá)到了添加頁(yè)面元素的效果。
問(wèn)題三：這個(gè)是最為奇怪的問(wèn)題了。當(dāng)我組合待返回的html元素的代碼時(shí)，由于該元素還要繼續(xù)帶有AJAX鏈接，故本想用“#{}”將Ruby代碼嵌入——這種方法理論上講是可行的，可我在實(shí)際操作中，記得好像只成功了一兩次，基本上都實(shí)現(xiàn)不了AJAX效果（實(shí)際上是沒(méi)效果）。無(wú)奈之下，我根據(jù)頁(yè)面初始顯示的第一級(jí)樹(shù)節(jié)點(diǎn)，查看了頁(yè)面代碼，看到了生成的AJAX代碼，再依照它的樣子，替換掉我本來(lái)想用Ruby代碼的部分——也就是說(shuō)，我最終不是用嵌入的Ruby代碼，而是直接寫出將要生成的AJAX代碼——這樣的代碼是多么的丑陋啊！
不過(guò)，整個(gè)過(guò)程下來(lái)，還是略有一些可以總結(jié)的東西：
總結(jié)一：由于樹(shù)節(jié)點(diǎn)中要顯示的文本中，有的會(huì)有加號(hào)“+”，而恰巧該文本還是要向服務(wù)器發(fā)送的參數(shù)，這種情況下，在組合要返回的html代碼段時(shí)，加號(hào)會(huì)被當(dāng)作連接字符串的操作，那么在必要的地方，則把加號(hào)替換成其它不會(huì)被誤解的符號(hào)，如下劃線“_”，而在傳給數(shù)據(jù)庫(kù)做查詢用時(shí)，再替換回來(lái)。Ruby中將字符串中的模式替換成指定內(nèi)容的函數(shù)是gsub，如：str.gsub("+","_")，就是把str中的加號(hào)替換成下劃線。該函數(shù)的第一個(gè)參數(shù)也可以是正則表達(dá)式。
總結(jié)二：對(duì)于頁(yè)面上要顯示的每一個(gè)樹(shù)節(jié)點(diǎn)，都用一個(gè)只有一行的table來(lái)控制，這樣做有一個(gè)好處，就是每個(gè)節(jié)點(diǎn)都可以獨(dú)立地控制顯示位置，而不用考慮colspan屬性，只需在前面添加指定個(gè)數(shù)的td即可，具體做法見(jiàn)“總結(jié)三”。
總結(jié)三（控制樹(shù)節(jié)點(diǎn)的顯示級(jí)別位置的方法）：點(diǎn)擊樹(shù)節(jié)點(diǎn)，向服務(wù)器發(fā)送該節(jié)點(diǎn)的ID，從而獲取該節(jié)點(diǎn)的子節(jié)點(diǎn)。與此同時(shí)，還要返回一個(gè)本節(jié)點(diǎn)的級(jí)別（頁(yè)面初始顯示的第一級(jí)節(jié)點(diǎn)的級(jí)別為0）。在生成子節(jié)點(diǎn)的html代碼段時(shí)，得到父節(jié)點(diǎn)的級(jí)別，加上1，即為子節(jié)點(diǎn)的級(jí)別。根據(jù)級(jí)別數(shù)做循環(huán)，向包含子節(jié)點(diǎn)內(nèi)容的table中添加相應(yīng)個(gè)數(shù)的td。在所添加的td中，填入若干空格（）（數(shù)量自定，一般2~3個(gè)為宜），但是空格只有與td配合使用效果才好，否則容易錯(cuò)位�；蛘呤孪扔脀indows的畫圖工具做一個(gè)白色小方塊的bmp文件（方塊大小根據(jù)已有的在樹(shù)的節(jié)點(diǎn)前面表示展開(kāi)、收攏節(jié)點(diǎn)的圖片設(shè)定），然后在td中嵌入這個(gè)小方塊圖片也行。如某個(gè)二級(jí)節(jié)點(diǎn)，其html代碼段為：
【Rails中的Ajax初體驗(yàn)分析】相關(guān)文章：
團(tuán)隊(duì)中的沖突問(wèn)題分析02-06
原生ajax調(diào)用數(shù)據(jù)實(shí)例簡(jiǎn)單講解07-19
《天使愛(ài)美麗》中的色彩與光線分析05-14
國(guó)有企業(yè)績(jī)效管理中存在的問(wèn)題分析04-15
以《當(dāng)幸福來(lái)敲門》為例分析電影中鏡頭的運(yùn)用01-08
論壇營(yíng)銷分析02-02
溝通案例分析精選04-09
《平行》故事分析08-13
美的集團(tuán)戰(zhàn)略分析02-07