目錄列表：

$()
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包含了一些工具函數(shù)來幫助你用javascript數(shù)據(jù)(例如從服務(wù)器返回的數(shù)據(jù))來更新你的web頁面。

你可以在DWR以外使用它，因為它不依賴于DWR的其他部分。

4個基本的操作頁面的函數(shù)：getValue[s]()和setValue[s]()可以操作大部分HTML元素除了table，list和image。getText()可以操作select list。

要修改table可以用addRows()和removeAllRows()。要修改列表(select列表和ul,ol列表)可以用addOptions()和removeAllOptions()。

還有一些其他功能不是DWRUtil的一部分。但它們也很有用，它們可以用來解決一些小問題，但是它們不是對于所有任都通用的。

1、$()
   $() 函數(shù)(它是合法的Javascript名字) 是從Protoype偷來的主意。大略上的講： $ = document.getElementById。 因為在Ajax程序中，你會需要寫很多這樣的語句，所以使用 $() 會更簡潔。
   通過指定的id來查找當(dāng)前HTML文檔中的元素，如果傳遞給它多個參數(shù)，它會返回找到的元素的數(shù)組。所有非String類型的參數(shù)會被原封不動的返回。這個函數(shù)的靈感來至于prototype庫，但是它可以在更多的瀏覽器上運行。
   從技術(shù)角度來講他在IE5.0中是不能使用的，因為它使用了Array.push，盡管如此通常它只是用來同engine.js一起工作。如果你不想要engine.js并且在IE5.0中使用，那么你最好為Array.push找個替代品。

2、DWRUtil.getText(id)
   getText(id)和getValue(id)很相似。它是為select列表設(shè)計的。你可能需要取得顯示的文字，而不是當(dāng)前選項的值。
   例子：getahead.ltd.uk/dwr/browser/util/gettext

3、DWRUtil.getValue(id)
   DWRUtil.getValue(id)是 setValue()對應(yīng)的"讀版本"。它可以從HTML元素中取出其中的值，而你不用管這個元素是select列表還是一個div。
   這個函數(shù)能操作大多數(shù)HTML元素包括select(獲取當(dāng)前選項的值而不是文字)、input元素(包括textarea)、div和span。

4、DWRUtil.setValue(id, value)
   DWRUtil.setValue(id, value)根據(jù)第一個參數(shù)中指定的id找到相應(yīng)元素，并根據(jù)第二個參數(shù)改變其中的值。
   這個函數(shù)能操作大多數(shù)HTML元素包括select(設(shè)置當(dāng)前選項的值而不是文字)、input元素(包括textarea)、div和span。

5、DWRUtil.getValues()
   getValues()和getValue()非常相似，除了輸入的是包含name/value對的javascript對象。name是HTML元素的ID，value會被更改為這些ID對象元素的內(nèi)容。這個函數(shù)不會返回對象，它只更改傳遞給它的值。

【基于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是你想要設(shè)置給相應(yīng)的元素的值。

7、DWRUtil.addOptions and DWRUtil.removeAllOptions
【生成列表】

   DWR的一個常遇到的任務(wù)就是根據(jù)選項填充選擇列表。下面的例子就是根據(jù)輸入填充列表。

   下面將介紹 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 ..."]);然后再下面緊接著加入你真正的選項數(shù)據(jù)。

【DWRUtil.addOptions有5種模式】
  
   簡單數(shù)組: DWRUtil.addOptions(selectid, array) 會創(chuàng)建一堆option，每個option的文字和值都是數(shù)組元素中的值。

   簡單對象數(shù)組 (指定text): DWRUtil.addOptions(selectid, data, prop) 用每個數(shù)組元素創(chuàng)造一個option，option的值和文字都是在prop中指定的對象的屬性。

   高級對象數(shù)組 (指定text和value值): DWRUtil.addOptions(selectid, array, valueprop, textprop) 用每個數(shù)組元素創(chuàng)造一個option，option的值是對象的valueprop屬性，option的文字是對象的textprop屬性。

   對象: DWRUtil.addOptions(selectid, map, reverse)用每個屬性創(chuàng)建一個option。對象屬性名用來作為option的值，對象屬性值用來作為屬性的文字，這聽上去有些不對。但是事實上卻是正確的方式。如果reverse參數(shù)被設(shè)置為true，那么對象屬性值用來作為選項的值。

   對象的Map: DWRUtil.addOptions(selectid, map, valueprop, textprop) 用map中的每一個對象創(chuàng)建一個option。用對象的valueprop屬性做為option的value，用對象的textprop屬性做為 option的文字。

   ol 或 ul 列表: DWRUtil.addOptions(ulid, array) 用數(shù)組中的元素創(chuàng)建一堆li元素，他們的innerHTML是數(shù)組元素中的值。這種模式可以用來創(chuàng)建ul和ol列表。
  
   例子：getahead.ltd.uk/dwr/browser/lists

8、DWRUtil.addRows and DWRUtil.removeAllRows
【生成Table】

   DWR通過這兩個函數(shù)來幫你操作table： DWRUtil.addRows() 和 DWRUtil.removeAllRows() 。這個函數(shù)的第一個參數(shù)都是table、tbody、thead、tfoot的id。一般來說最好使用tbody，因為這樣可以保持你的header和 footer行不變，并且可以防止Internet Explorer的bug。

【DWRUtil.removeAllRows()】
   語法:
DWRUtil.removeAllRows(id);
   描述:
通過id刪除table中所有行。
   參數(shù):
id: table元素的id(最好是tbody元素的id)

【DWRUtil.addRows()】
   語法:
DWRUtil.addRows(id, array, cellfuncs, [options]);
   描述:
向指定id的table元素添加行。它使用數(shù)組中的每一個元素在table中創(chuàng)建一行。然后用cellfuncs數(shù)組中的沒有函數(shù)創(chuàng)建一個列。單元格是依次用cellfunc根據(jù)沒有數(shù)組中的元素創(chuàng)建出來的。

   DWR1.1開始，addRows()也可以用對象做為數(shù)據(jù)。如果你用一個對象代替一個數(shù)組來創(chuàng)建單元格，這個對象會被傳遞給cell函數(shù)。

   你可以寫一些像這樣的偽代碼：

for each member in array
    for each function in cellfuncs
         create cell from cellfunc(array[i])

   參數(shù):
id: table元素的id(最好是tbody元素的id)
array: 數(shù)組(DWR1.1以后可以是對象)，做為更新表格數(shù)據(jù)。
cellfuncs: 函數(shù)數(shù)組，從傳遞過來的行數(shù)據(jù)中提取單元格數(shù)據(jù)。
options: 一個包含選項的對象(見下面)
   高級選項:
rowCreator: 一個用來創(chuàng)建行的函數(shù)(例如，你希望tr加個css). 默認是返回一個document.createElement("tr")
cellCreator: 一個用來創(chuàng)建單元格的函數(shù)(例如，用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

【動態(tài)編輯表格(Dynamically Editing a Table)】

   例子：getahead.org/dwr/examples/table

9、DWRUtil.onReturn
   當(dāng)按下return鍵時，得到通知。

   當(dāng)表單中有input元素，觸發(fā)return鍵會導(dǎo)致表單被提交。當(dāng)使用Ajax時，這往往不是你想要的。而通常你需要的觸發(fā)一些Javscript。

   不幸的是不同的瀏覽器處理這個事件的方式不一樣。所以DWRUtil.onReturn修復(fù)了這個差異。如果你需要一個同表單元素中按回車相同的特性，你可以用這樣代碼實現(xiàn)：

js 代碼
<input type="text" onkeypress="DWRUtil.onReturn(event, submitFunction)">   
<input type="button" onclick="submitFunction()">  

   你也可以使用onkeypress事件或者onkeydown事件，他們做同樣的事情。

   一般來說DWR不是一個Javascript類庫，所以它應(yīng)該試圖滿足這個需求。不管怎樣，這是在使用Ajax過程中一個很有用函數(shù)。

【onSubmit】
   這個函數(shù)的工作原理是onSubmit()事件只存在于form元素上。

   例子：getahead.ltd.uk/dwr/browser/util/onreturn

10、DWRUtil.toDescriptiveString
    DWRUtil.toDescriptiveString()函數(shù)比默認的toString()更好。第一個參數(shù)是要調(diào)試的對象，第二個參數(shù)是可選的，用來指定內(nèi)容深入的層次：

0: 單行調(diào)試
1: 多行調(diào)試，但不深入到子對象。
2: 多行調(diào)試，深入到第二層子對象
以此類推。一般調(diào)試到第二級是最佳的。
    還有第三個參數(shù)，定義初始縮進。這個函數(shù)不應(yīng)該被用于調(diào)式程序之外，因為以后可能會有變化。

11、DWRUtil.useLoadingMessage
    設(shè)置一個Gmail風(fēng)格的加載信息。所有演示頁面
● 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風(fēng)格的加載消息。

    這個方法將來可能被廢棄，因為這個實現(xiàn)實在太專斷了。為什么是紅色，為什么在右上角，等等。唯一的真正答案就是：抄襲GMail。這里的建議是以本頁面中的代碼為模板，根據(jù)你的需求自定義。

    你必須在頁面加載以后調(diào)用這個方法(例如，不要在onload()事件觸發(fā)之前調(diào)用)，因為它要創(chuàng)建一個隱藏的div來容納消息。

    最簡單的做法時在onload事件中調(diào)用DWRUtil.useLoadingMessage，像這樣：

js 代碼
function init() {   
    DWRUtil.useLoadingMessage();   
}  

    可能有些情況下你是不能容易的編輯header和body標(biāo)簽(如果你在使用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;   
}  

    下面這些是這個函數(shù)的代碼，它對于你要實現(xiàn)自己的加載消息很有用。這個函數(shù)的主要內(nèi)容是動態(tài)創(chuàng)建一個div(id是disabledZone)來容納消息。重要的代碼是當(dāng)遠程調(diào)用時使它顯示和隱藏：

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、修補瀏覽器事件
    如果你創(chuàng)建了一個DOM元素，然后用addAttribute在這個元素上創(chuàng)建了一個事件，那么他們不能被正常的觸發(fā)。你可以使用下面的腳本來遍歷一個DOM樹，并重新為他們綁定事件，這樣他們就能正常的觸發(fā)了。

    把'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", , )

現(xiàn)有輸入框 <input type=text id="sel-test" value="0123456789">, 則點擊按鈕時4567被選中: 0123456789