util.js util.js包含了一些使用的方法,從而幫助你利用j avascript(可能)從服務(wù)器端更新你的web數(shù)據(jù)。
你可以在DWR之外的地方使用它,因?yàn)樗⒉灰蕾嚺cDWR而實(shí)現(xiàn)。
它包含四個(gè)頁(yè)面處理函數(shù):getValue[s]()、setValue[s]()作用于除tables、lists和images以外的大多數(shù)html元素。getText()作用于select lists。
addRows()和removeAllRows()用于編輯tables。addOptions()和removeAllOptions()用于編輯lists(如:select lists、ul、ol)。
$()
$函數(shù)(在j avascript中,他的名字是合法的)的思想是從prototype引進(jìn)的。一般說(shuō)來(lái),$ = document.getElementById。在以后你花大量時(shí)間進(jìn)行ajax編程的時(shí)候,在合適的地方使用這種格式是很有益的。
'$'通過(guò)給定的ID在當(dāng)前HTML頁(yè)面找到元素,如果多于一個(gè)的參數(shù)被提交,它就會(huì)返回一個(gè)包含已找到元素的數(shù)組。這個(gè)函數(shù)從prototype的library中得到的靈感,而且,它還能更好的工作在不同的瀏覽器中。
Generating Lists
DWR的一個(gè)功能可以給一個(gè)下拉列表(select list)添加選項(xiàng),只需使用DWRUtil.addOptions()。
如果你在更新列表之前,希望保留一些選項(xiàng),你需要寫(xiě)以下一些代碼:
var sel = DWRUtil.getValue(id);
DWRUtil.removeAllOptions(id);
DWRUtil.addOptions(id, ...);
DWRUtil.setValue(id, sel);
如果你想有個(gè)初始化選項(xiàng),如:“please select”,你可以直接使用:
DWRUtil.addOptions(id, ["Please select"]);
DWRUtil.addOptions 有5種調(diào)用方法:Array: DWRUtil.addOptions(selectid, array) 。selectid為目標(biāo)ID,array為每一項(xiàng)的text。
Array of objects (option text = option value): DWRUtil.addOptions(selectid, data, prop) 用text和value的集合來(lái)為每一個(gè)數(shù)組元素創(chuàng)建一個(gè)選項(xiàng),pro參數(shù)指定text和value的值。
Array of objects (with differing option text and value): DWRUtil.addOptions(selectid, array, valueprop, textprop) 用text和value的集合來(lái)為每一個(gè)數(shù)組元素創(chuàng)建一個(gè)選項(xiàng),valueprop確定value,textprop確定text。
Object: DWRUtil.addOptions(selectid, map, reverse) 為map中每一個(gè)屬性(property)創(chuàng)建一個(gè)選項(xiàng),屬性名作為選項(xiàng)的value,屬性的value作為選項(xiàng)的text。這樣做看起來(lái)是錯(cuò)的,但實(shí)際上這種做法的確是正確的。如果reverse參數(shù)被設(shè)置為true,則屬性的value還是被用做選項(xiàng)的value。
Map of objects: DWRUtil.addOptions(selectid, map, valueprop, textprop) 為map中的每一個(gè)對(duì)象創(chuàng)建一個(gè)選項(xiàng),valueprop指定選項(xiàng)的value,textprop指定選項(xiàng)的text。
Generating Tables
DWRUtil.addRows() 從一個(gè)數(shù)組(第二個(gè)參數(shù))取得值,創(chuàng)建table的每一行。從另一個(gè)數(shù)組(第三個(gè)參數(shù))去得值,為table的每一行創(chuàng)建若干列。
DWRUtil.getText(id)
可以根據(jù)id取得text的值,這個(gè)方法只能用于select list
DWRUtil.getValue(id)
可以根據(jù)id取得value,使用這個(gè)方法,你不必在意div和select list的不同。
DWRUtil.getValues()
getValues() is similar to getValue() except that the input is a Javascript object that contains name/value pairs. The names are assumed to be the IDs of HTML elements, and the values are altered to reflect the contents of those IDs. This method does not return the object in question, it alters the value that you pass to it.
這個(gè)方法和getValue()一樣,只是它傳入的是一個(gè)包含名字和數(shù)值的j avascript對(duì)象.這個(gè)名字就是HTML元素的ID。這個(gè)方法不會(huì)返回任何對(duì)象,它只會(huì)將ID的value映射給傳入的value。例:
function doGetValues() {
var text= "{
div:null,
textarea:null,
select:null,
text:null,
password:null,
formbutton:null,
button:null
}";
var object = objectEval(text); //j avascript對(duì)象
DWRUtil.getValues(object);
var reply = DWRUtil.toDescriptiveString(object, 2); //toString
reply = reply.replace(/n/g, "<br/>"); //轉(zhuǎn)意
DWRUtil.setValue("getvaluesret", reply); //顯示
}
DWRUtil.onReturn
貼一段代碼,暫時(shí)不理解,用onReturn和不用有什么區(qū)別
<script>
function submitFunction()
{
$("alert").style.display = "inline";
setTimeout("unsubmitFunction();", 1000);
}
function unsubmitFunction()
{
$("alert").style.display = "none";
}
</script>
<p><input type="text" onkeydown="DWRUtil.onReturn(event, submitFunction)"/>
<input type="button" onclick="submitFunction()" value="GO"/>
<span id="alert" style="display:none; background:#FFFFDD; font-weight:bold;">submitFunction called</span>
</p>
DWRUtil.selectRange
在一個(gè)input box里選一個(gè)范圍
DWRUtil.selectRange("sel-test", $("start").value, $("end").value);
DWRUtil.setValue(id, value)
用ID找到元素,并更新value
DWRUtil.setValues()
和setValue(id,value)一樣,只是它需要的參數(shù)是個(gè)j avascript對(duì)象,如:
DWRUtil.setValues({
div: "new div content",
password: "1234567890"
});
DWRUtil.toDescriptiveString
帶debug信息的toString,第一個(gè)為將要debug的對(duì)象,第二個(gè)參數(shù)為處理等級(jí)。等級(jí)如下:
0: Single line of debug 單行調(diào)試
1: Multi-line debug that does not dig into child objects 不分析子元素的多行調(diào)試
2: Multi-line debug that digs into the 2nd layer of child objects 最多分析到第二層子元素的多行調(diào)試
And so on. Level 2 and greater probably produce too much output.
總結(jié):DWR不但屏蔽了許多client與server交互的重復(fù)且復(fù)雜的代碼,而且還提供了一些常用的方法,一些思想還是從prototype繼承而來(lái),并有一定的改進(jìn)。同時(shí),它也考慮到了與struts、hibernate、spring的結(jié)合問(wèn)題。
需要注意的是,DWR是一種把服務(wù)器端的java代碼通過(guò)j avascript直接從瀏覽器調(diào)用的方法(DWR is a way of calling Java code on the server directly from Javascript in the browser.),而不是一個(gè)j avascript的庫(kù)(Generally speaking DWR is not a generic JavaScript library so it does not attempt to provide fill this need. However this is one of these really useful functions to have around if you are doing Ajax work.)能做到怎么多,已經(jīng)很難得了。
DWR自04年11月草案提出到現(xiàn)在的Version 1.1 beta 3(2005-12-29),已經(jīng)更新發(fā)布了20多次了,但愿在ajax的發(fā)展大路上,能始終看見(jiàn)DWR的身影。