目錄列表：
$()
DWRUtil.getText(id)
DWRUtil.getValue(id)
DWRUtil.setValue(id, value)
DWRUtil.getValues()
DWRUtil.setValues()
DWRUtil.addOptions and DWRUtil.removeAllOptions
DWRUtil.addRows and DWRUtil.removeAllRows
DWRUtil.onReturn
DWRUtil.toDescriptiveString
DWRUtil.useLoadingMessage
修補瀏覽器事件
util.js包含了一些工具函數來幫助你用javascript數據(例如從服務器返回的數據)來更新你的web頁面。
你可以在DWR以外使用它，因爲它不依賴於DWR的其他部分。
4個基本的操作頁面的函數：getValue[s]()和setValue[s]()可以操作大部分HTML元素除了table，list和image。getText()可以操作select list。
要修改table可以用addRows()和removeAllRows()。要修改列表(select列表和ul,ol列表)可以用addOptions()和removeAllOptions()。
還有一些其他功能不是DWRUtil的一部分。但它們也很有用，它們可以用來解決一些小問題，但是它們不是對於所有任都通用的。
1、$()
$() 函數(它是合法的Javascript名字) 是從Protoype偷來的主意。大略上的講： $ = document.getElementById。 因爲在Ajax程序中，你會需要寫很多這樣的語句，所以使用 $() 會更簡潔。
通過指定的id來查找當前HTML文檔中的元素，如果傳遞給它多個參數，它會返回找到的元素的數組。所有非String類型的參數會被原封不動的返回。這個函數的靈感來至於prototype庫，但是它可以在更多的瀏覽器上運行。
從技術角度來講他在IE5.0中是不能使用的，因爲它使用了Array.push，儘管如此通常它只是用來同engine.js一起工作。如果你不想要engine.js並且在IE5.0中使用，那麼你最好爲Array.push找個替代品。
2、DWRUtil.getText(id)
getText(id)和getValue(id)很相似。它是爲select列表設計的。你可能需要取得顯示的文字，而不是當前選項的值。
例子：getahead.ltd.uk/dwr/browser/util/gettext
3、DWRUtil.getValue(id)
DWRUtil.getValue(id)是 setValue()對應的"讀版本"。它可以從HTML元素中取出其中的值，而你不用管這個元素是select列表還是一個div。
這個函數能操作大多數HTML元素包括select(獲取當前選項的值而不是文字)、input元素(包括textarea)、div和span。
4、DWRUtil.setValue(id, value)
DWRUtil.setValue(id, value)根據第一個參數中指定的id找到相應元素，並根據第二個參數改變其中的值。
這個函數能操作大多數HTML元素包括select(設置當前選項的值而不是文字)、input元素(包括textarea)、div和span。
5、DWRUtil.getValues()
getValues()和getValue()非常相似，除了輸入的是包含name/value對的javascript對象。name是HTML元素的ID，value會被更改爲這些ID對象元素的內容。這個函數不會返回對象，它只更改傳遞給它的值。
【基於Form的getValues()】
從DWR1.1開始getValues()可以傳入一個HTML元素(一個DOM對象或者id字符串)，然後從它生成一個reply對象。例子：getahead.ltd.uk/dwr/browser/util/getvalues
6、DWRUtil.setValues()
setValues()和setValue()非常相似，除了輸入的是包含name/value對的javascript對象。name是HTML元素的ID，value是你想要設置給相應的元素的值。
7、DWRUtil.addOptions and DWRUtil.removeAllOptions
【生成列表】
DWR的一個常遇到的任務就是根據選項填充選擇列表。下面的例子就是根據輸入填充列表。
下面將介紹 DWRUtil.addOptions() 的幾種是用方法。
如果你希望在你更新了select以後，它仍然保持運來的選擇，你要像下面這樣做：
var sel = DWRUtil.getValue(id);
DWRUtil.removeAllOptions(id);
DWRUtil.addOptions(id, ...);
DWRUtil.setValue(id, sel);如果你想加入一個初始的"Please select..." 選項那麼你可以直接加入下面的語句：
DWRUtil.addOptions(id, /["Please select ..."]);然後再下面緊接着加入你真正的選項數據。
【DWRUtil.addOptions有5種模式】
簡單數組: DWRUtil.addOptions(selectid, array) 會創建一堆option，每個option的文字和值都是數組元素中的值。
簡單對象數組 (指定text): DWRUtil.addOptions(selectid, data, prop) 用每個數組元素創造一個option，option的值和文字都是在prop中指定的對象的屬性。
高級對象數組 (指定text和value值): DWRUtil.addOptions(selectid, array, valueprop, textprop) 用每個數組元素創造一個option，option的值是對象的valueprop屬性，option的文字是對象的textprop屬性。
對象: DWRUtil.addOptions(selectid, map, reverse)用每個屬性創建一個option。對象屬性名用來作爲option的值，對象屬性值用來作爲屬性的文字，這聽上去有些不對。但是事實上卻是正確的方式。如果reverse參數被設置爲true，那麼對象屬性值用來作爲選項的值。
對象的Map: DWRUtil.addOptions(selectid, map, valueprop, textprop) 用map中的每一個對象創建一個option。用對象的valueprop屬性做爲option的value，用對象的textprop屬性做爲 option的文字。
ol 或 ul 列表: DWRUtil.addOptions(ulid, array) 用數組中的元素創建一堆li元素，他們的innerHTML是數組元素中的值。這種模式可以用來創建ul和ol列表。
例子：getahead.ltd.uk/dwr/browser/lists
8、DWRUtil.addRows and DWRUtil.removeAllRows
【生成Table】
DWR通過這兩個函數來幫你操作table： DWRUtil.addRows() 和 DWRUtil.removeAllRows() 。這個函數的第一個參數都是table、tbody、thead、tfoot的id。一般來說最好使用tbody，因爲這樣可以保持你的header和 footer行不變，並且可以防止Internet Explorer的bug。
【DWRUtil.removeAllRows()】
語法:
DWRUtil.removeAllRows(id);
描述:
通過id刪除table中所有行。
參數:
id: table元素的id(最好是tbody元素的id)
【DWRUtil.addRows()】
語法:
DWRUtil.addRows(id, array, cellfuncs, [options]);
描述:
向指定id的table元素添加行。它使用數組中的每一個元素在table中創建一行。然後用cellfuncs數組中的沒有函數創建一個列。單元格是依次用cellfunc根據沒有數組中的元素創建出來的。
DWR1.1開始，addRows()也可以用對象做爲數據。如果你用一個對象代替一個數組來創建單元格，這個對象會被傳遞給cell函數。
你可以寫一些像這樣的僞代碼：
for each member in array
for each function in cellfuncs
create cell from cellfunc(array[i])
參數:
id: table元素的id(最好是tbody元素的id)
array: 數組(DWR1.1以後可以是對象)，做爲更新表格數據。
cellfuncs: 函數數組，從傳遞過來的行數據中提取單元格數據。
options: 一個包含選項的對象(見下面)
高級選項:
rowCreator: 一個用來創建行的函數(例如，你希望tr加個css). 默認是返回一個document.createElement("tr")
cellCreator: 一個用來創建單元格的函數(例如，用th代替td). 默認返回一個document.createElement("td")
rowData: the element value from the array (the same for all cells in a row)
rowIndex: the key (if map) or index (if array) from the collection
rowNum: The row number counting from 0 in this section (so if you are using tbody, it counts rows in the tbody and not the whole table)
data: The 'computed' data value for the cell (cellCreators only)
cellNum: The cell number that we are altering counting from 0 (cellCreators only
例子：getahead.ltd.uk/dwr/browser/tables
【動態編輯表格(Dynamically Editing a Table)】
例子：getahead.org/dwr/examples/table
9、DWRUtil.onReturn
當按下return鍵時，得到通知。
當表單中有input元素，觸發return鍵會導致表單被提交。當使用Ajax時，這往往不是你想要的。而通常你需要的觸發一些Javscript。
不幸的是不同的瀏覽器處理這個事件的方式不一樣。所以DWRUtil.onReturn修復了這個差異。如果你需要一個同表單元素中按回車相同的特性，你可以用這樣代碼實現：
js 代碼
<input type="text" onkeypress="DWRUtil.onReturn(event, submitFunction)">
<input type="button" onclick="submitFunction()">
你也可以使用onkeypress事件或者onkeydown事件，他們做同樣的事情。
一般來說DWR不是一個Javascript類庫，所以它應該試圖滿足這個需求。不管怎樣，這是在使用Ajax過程中一個很有用函數。
【onSubmit】
這個函數的工作原理是onSubmit()事件只存在於form元素上。
例子：getahead.ltd.uk/dwr/browser/util/onreturn
10、DWRUtil.toDescriptiveString
DWRUtil.toDescriptiveString()函數比默認的toString()更好。第一個參數是要調試的對象，第二個參數是可選的，用來指定內容深入的層次：
0: 單行調試
1: 多行調試，但不深入到子對象。
2: 多行調試，深入到第二層子對象
以此類推。一般調試到第二級是最佳的。
還有第三個參數，定義初始縮進。這個函數不應該被用於調式程序之外，因爲以後可能會有變化。
11、DWRUtil.useLoadingMessage
設置一個Gmail風格的加載信息。所有演示頁面
● dynamic text getahead.ltd.uk/dwr/examples/text
● selection lists getahead.ltd.uk/dwr/examples/lists
● live tables getahead.ltd.uk/dwr/examples/table
● live forms getahead.ltd.uk/dwr/examples/form
● dynamic validation getahead.ltd.uk/dwr/examples/validation
● address entry
都使用了GMail風格的加載消息。
這個方法將來可能被廢棄，因爲這個實現實在太專斷了。爲什麼是紅色，爲什麼在右上角，等等。唯一的真正答案就是：抄襲GMail。這裏的建議是以本頁面中的代碼爲模板，根據你的需求自定義。
你必須在頁面加載以後調用這個方法(例如，不要在onload()事件觸發之前調用)，因爲它要創建一個隱藏的div來容納消息。
最簡單的做法時在onload事件中調用DWRUtil.useLoadingMessage，像這樣：
js 代碼
function init() {
DWRUtil.useLoadingMessage();
}
可能有些情況下你是不能容易的編輯header和body標籤(如果你在使用CMS，這很正常)，在這樣的情況下你可以這樣做：
js 代碼
function init() {
DWRUtil.useLoadingMessage();
}
if (window.addEventListener) {
window.addEventListener("load", init, false);
}
else if (window.attachEvent) {
window.attachEvent("onload", init);
}
else {
window.onload = init;
}
下面這些是這個函數的代碼，它對於你要實現自己的加載消息很有用。這個函數的主要內容是動態創建一個div(id是disabledZone)來容納消息。重要的代碼是當遠程調用時使它顯示和隱藏：
js 代碼
DWREngine.setPreHook(function() {
$('disabledZone').style.visibility = 'visible';
});
DWREngine.setPostHook(function() {
$('disabledZone').style.visibility = 'hidden';
});
This is fairly simple and makes it quite easy to implement your own "loading" message.
function useLoadingMessage(message) {
var loadingMessage;
if (message) loadingMessage = message;
else loadingMessage = "Loading";
DWREngine.setPreHook(function() {
var disabledZone = $('disabledZone');
if (!disabledZone) {
disabledZone = document.createElement('div');
disabledZone.setAttribute('id', 'disabledZone');
disabledZone.style.position = "absolute";
disabledZone.style.zIndex = "1000";
disabledZone.style.left = "0px";
disabledZone.style.top = "0px";
disabledZone.style.width = "100%";
disabledZone.style.height = "100%";
document.body.appendChild(disabledZone);
var messageZone = document.createElement('div');
messageZone.setAttribute('id', 'messageZone');
messageZone.style.position = "absolute";
messageZone.style.top = "0px";
messageZone.style.right = "0px";
messageZone.style.background = "red";
messageZone.style.color = "white";
messageZone.style.fontFamily = "Arial,Helvetica,sans-serif";
messageZone.style.padding = "4px";
disabledZone.appendChild(messageZone);
var text = document.createTextNode(loadingMessage);
messageZone.appendChild(text);
}
else {
$('messageZone').innerHTML = loadingMessage;
disabledZone.style.visibility = 'visible';
}
});
DWREngine.setPostHook(function() {
$('disabledZone').style.visibility = 'hidden';
});
}
下面的做法能簡單的使用有加載消息圖片：
js 代碼
function useLoadingImage(imageSrc) {
var loadingImage;
if (imageSrc) loadingImage = imageSrc;
else loadingImage = "ajax-loader.gif";
DWREngine.setPreHook(function() {
var disabledImageZone = $('disabledImageZone');
if (!disabledImageZone) {
disabledImageZone = document.createElement('div');
disabledImageZone.setAttribute('id', 'disabledImageZone');
disabledImageZone.style.position = "absolute";
disabledImageZone.style.zIndex = "1000";
disabledImageZone.style.left = "0px";
disabledImageZone.style.top = "0px";
disabledImageZone.style.width = "100%";
disabledImageZone.style.height = "100%";
var imageZone = document.createElement('img');
imageZone.setAttribute('id','imageZone');
imageZone.setAttribute('src',imageSrc);
imageZone.style.position = "absolute";
imageZone.style.top = "0px";
imageZone.style.right = "0px";
disabledImageZone.appendChild(imageZone);
document.body.appendChild(disabledImageZone);
}
else {
$('imageZone').src = imageSrc;
disabledImageZone.style.visibility = 'visible';
}
});
DWREngine.setPostHook(function() {
$('disabledImageZone').style.visibility = 'hidden';
});
}
然後你就可以這樣使用:useLoadingImage("images/loader.gif");
12、修補瀏覽器事件
如果你創建了一個DOM元素，然後用addAttribute在這個元素上創建了一個事件，那麼他們不能被正常的觸發。你可以使用下面的腳本來遍歷一個DOM樹，並重新爲他們綁定事件，這樣他們就能正常的觸發了。
把'click'改成你希望的事件。
js 代碼
DWREngine._fixExplorerEvents = function(obj) {
for (var i = 0; i < obj.childNodes.length; i++) {
var childObj = obj.childNodes [i];
if (childObj.nodeValue == null) {
var onclickHandler = childObj.getAttribute('onclick');
if (onclickHandler != null) {
childObj.removeAttribute('onclick');
// If using prototype:
// Event.observe(childObj, 'click', new Function(onclickHandler));
// Otherwise (but watch out for memory leaks):
if (element.attachEvent) {
element.attachEvent("onclick", onclickHandler);
}
else {
element.addEventListener("click", onclickHandler, useCapture);
}
}
DWREngine._fixExplorerEvents(childObj);
}
}
}
13.
DWRUtil.selectRange("sel-test", , )
現有輸入框 <input type=text id="sel-test" value="0123456789">, 則點擊按鈕時4567被選中: 0123456789