util.js工具包包含了一些實用函數(shù)來幫助你用javascript操作從服務(wù)器返回的數(shù)據(jù)數(shù)據(jù)，以便來更新web頁面。 也可以在DWR以外使用它，因為它不依賴于DWR的其他部分。下面介紹這個工具的主要函數(shù)。
7.13.1 $()函數(shù)
$()
函數(shù)實現(xiàn)的功能相當于 document.getElementById方法。 因為在Ajax程序中，經(jīng)常需要寫很多這樣的語句，所以使用 $()
會更簡潔。它通過指定的id來查找當前HTML文檔中的元素，如果傳遞給它多個參數(shù)，它會返回找到的元素的數(shù)組。所有非String類型的參數(shù)會被原封不
動的返回。這個函數(shù)的靈感來至于prototype庫，但是它可以在更多的瀏覽器上運行。
$() 函數(shù)的使用方法為：
var searchexp = $("searchbox").value
<!—對應(yīng)HTML表單的ID-->
<input id="searchbox"/>
7.12.2 addOptions與 removeAllOptions函數(shù)
在DWR項目應(yīng)用中，經(jīng)常需要根據(jù)所選項來填充選擇列表。這現(xiàn)這種功能可能通過調(diào)用addOptions與 removeAllOptions函數(shù)來填充或移除列表。例如，如果希望在更新了select以后，它仍然保持更新前的選擇項，實現(xiàn)方法如下：
var sel = dwr.util.getValue(id);
dwr.util.removeAllOptions(id);
Array array = new Array[ 'Africa', 'America', 'Asia', 'Australasia', 'Europe' ]；
dwr.util.addOptions("id ",array);
dwr.util.setValue(id, sel);
如果想加入一個初始的"請選擇..." 選項，那么可以直接加入下面的語句：
dwr.util.addOptions(id, \["請選擇 ..."]);
dwr.util.addOptions有5種模式，分別為：
? 數(shù)組模式：dwr.util.addOptions(selectid, array) 會創(chuàng)建多個option，每個option的文字和值都是數(shù)組元素中的值。
? 對象數(shù)組模式：(指定text)： dwr.util.addOptions(selectid, data, prop) 用數(shù)組中的每個元素創(chuàng)造一個option，option的值和文字都是在prop中指定的對象的屬性。例如：
dwr.util.addOptions( "demo",
[{ name:'Africa', id:'AF' },
{ name:'America', id:'AM' },
{ name:'Asia', id:'AS' },
{ name:'Australasia', id:'AU' },
{ name:'Europe', id:'EU' } ],'id','name');
?
對象數(shù)組模式： (指定text和value值)： dwr.util.addOptions(selectid, array,
valueprop, textprop)
用數(shù)組中的每個元素創(chuàng)造一個option，option的值是對象的valueprop屬性，option的文字是對象的textprop屬性。
這種情況下,你需要指定要顯示 beans 的 property 以及 對應(yīng)的 bean 值，例如：
public class Person {
private String name;
private Integer id;
public void set(){……}
public String get(){……}
}
dwr.util.addOptions("demo",array,'id','name');
其中id指向及bean的id屬性，在optiong中對應(yīng)value，name指向bean的name屬性，對應(yīng)下拉框中顯示的哪個值。
?
對象模式： dwr.util.addOptions(selectid, map,
reverse)用每個屬性創(chuàng)建一個option。對象的屬性名用來作為option的值，對象的屬性值用來作為屬性的文字，如果reverse參數(shù)被設(shè)
置為true，那么對象的屬性值用來作為選項的值。
? 對象的Map模式：dwr.util.addOptions(selectid,
map, valueprop, textprop)
用map中的每一個對象創(chuàng)建一個option。用對象的valueprop屬性做為option的value，用對象的textprop屬性做為
option的文字。
? ol 或 ul 列表模式：dwr.util.addOptions(ulid, array) 用數(shù)組中的元素創(chuàng)建多個li元素，它們的innerHTML是數(shù)組元素中的值。這種模式可以用來創(chuàng)建ul和ol列表。
7.13.3 addRows與 removeAllRows函數(shù)
在
DWR應(yīng)用中，通過addRows與
removeAllRows這兩個函數(shù)來操作table表格，這個函數(shù)的第一個參數(shù)都是table、tbody、thead、tfoot的id。一般來說
最好使用tbody，因為這樣可以保持header和footer行不變。它們的用法如下：
? dwr.util.removeAllRows()
dwr.util.removeAllRows(id);
通過table元素的id刪除table中所有行。
如果要刪除表格中的某一行，則可用如下方法：
function deleteRows(id)
{
var tbody=document.getElementById("tb1");// tbody 的id
var trow=document.getElementById(id);//要刪除的行號
if(confirm("確定刪除?"))
{
tbody.removeChild(trow);
}
}
? dwr.util.addRows()
dwr.util.addRows(id, array, cellfuncs, [options]);
這行語句向指定id的table元素添加行。它使用數(shù)組中的每一個元素在table中創(chuàng)建一行。然后用cellfuncs從傳遞過來的行數(shù)據(jù)中提取單元格數(shù)據(jù)。其中參數(shù)：
? id： table元素的id(最好是tbody元素的id)
? array：數(shù)組或?qū)ο?，做為更新表格?shù)據(jù)。
? cellfuncs： 函數(shù)數(shù)組，從傳遞過來的行數(shù)據(jù)中提取單元格數(shù)據(jù)。
?
options： 一個包含選項的對象，選項包括一個用來創(chuàng)建行的函數(shù)rowCreator(例如希望給tr加上css)，
默認值是返回一個document.createElement("tr")。一個用來創(chuàng)建單元格的函數(shù)cellCreator(例如用th代替td)。
默認返回一個document.createElement("td")。下面就是一個向table元素添加行的應(yīng)用例子，代碼如下：
var cellFuncs = [
function(data) { return data; },
function(data) { return data.toUpperCase(); },
function(data) {
return "<input type='button' value='提交' onclick='alert(\"測試\");'/>";
},
function(data) { return count++; }
];
var count = 1;
dwr.util.addRows( "t1", , cellFuncs, { escapeHtml:false });
<!—對應(yīng)的HTML內(nèi)容-->
<table border="1" width="110%" id="table17" name="table17" height="27">
<tbody id="t1" name="t1">
</tbody>
</table>
7.13.4 getText函數(shù)
getText(id)和getValue(id)相似。用它可以得到select列表項目的顯示的文本，而不是當前選項的值。
7.13.5 getValue函數(shù)
dwr.util.getValue(id)
可以從HTML元素中取出其中的值，這個函數(shù)能操作大多數(shù)HTML元素，其中包括select(去處當前選項的值而不是文字)、input元素(包括
textarea)、div和span。下面就是一個getValue函數(shù)的應(yīng)用例子，實現(xiàn)代碼如下：
<html>
<head>
<title></title>
<script type="text/javascript" src="dwr/util.js"></script>
<script type="text/javascript" src="dwr/engine.js"></script>
<script>
function getValue()
{
var cnId = dwr.util.getValue("myId");
var cnValue = dwr.util.getValue("myValue");
alert(dwr.util.getValue("myId"));
}
</script>
</head>
<body>
<input type="text" value="" id="myId" />,
<input type="text" value="" id="myValue" />
<input type="button" value="setValue" onclick="getValue();" />
</body>
</html>
7.13.6 getValues函數(shù)
getValues()
得到的是包含name/value對的javascript對象。name是HTML元素的ID，value會被更改為這些ID對象元素的內(nèi)容。
getValues()可以傳入一個HTML元素(一個DOM對象或者id字符串)象。這個函數(shù)不會返回對象，它只更改傳遞給它的值。下面就是一個
getValues函數(shù)的應(yīng)用例子，實現(xiàn)代碼如下：
var person = { id:1, name:'tfnew21', address:'北京', salary:10000 };
dwr.util.getValues(person);
alert(person.name); //訪問person對象的屬于，運行后會在窗口中顯示’tfnew21’字符串
dwr.util.getValues({textarea:null,select:null,text:null,password:null,button:null})
alert(textarea.value);// 執(zhí)行后textarea.value的值為"test"
//HTML中的代碼
<input type="textarea" id="textarea" value="test" />
<input type="text" id="text" value="tfnew21" />
<input type="password" id="password" value="12345" />
<select id="select">
<option value="1" select>
香蕉
</option>
</select>
7.13.7 onReturn函數(shù)
定
義在輸入框中按回車的響應(yīng)，防止執(zhí)行submit。當使用Ajax時，往往需要的觸發(fā)一些Javscript。
不幸的是不同的瀏覽器處理這個事件的方式不一樣。所以dwr.util.onReturn修復了這個差異。如果需要在一個表單元素中按回車時觸發(fā)一些
Javscript，實現(xiàn)代碼如下：
<input type="text" onkeypress="dwr.util.onReturn(event,submitFunction)"/>
<input type="button" onclick="submitFunction()"/>
這個函數(shù)的工作原理與onSubmit()事件相似，只能存在于<FORM >元素中。
7.13.8 selectRange函數(shù)
selectRange用于選擇一個輸入框中的一定范圍的文字。 調(diào)用方法如下：
dwr.util.selectRange(ele, start, end)//ele輸入ID，start開始位置，end結(jié)尾位置
例如:<input type="text" id="sel-test" value="0123456">
dwr.util.selectRange("sel-test", 2, 5);
7.13.9 setValue函數(shù)
dwr.util.setValue(id,
value)根據(jù)第一個參數(shù)中指定的id找到相應(yīng)元素，并根據(jù)第二個參數(shù)改變其中的值。
這個函數(shù)能操作大多數(shù)HTML元素，包括select、input元素(包括textarea)、div和span。例如：下面就是一個getValue
函數(shù)的應(yīng)用例子，實現(xiàn)代碼如下：
<html>
<head>
<title></title>
<script type="text/javascript" src="dwr/util.js"></script>
<script type="text/javascript" src="dwr/engine.js"></script>
<script>
function setValue()
{
var cnId = dwr.util.getValue("myId");
var cnValue = dwr.util.getValue("myValue");
dwr.util.setValue(cnId, cnValue);
alert(dwr.util.getValue("myId"));
}
</script>
</head>
<body>
dwr.util.setValue(
<input type="text" value="" id="myId" />,
<input type="text" value="" id="myValue" />
)
<input type="button" value="setValue" onclick="setValue();" />
</body>
</html>
7.13.10 setValues函數(shù)
setValues()
和setValue()非常相似，但它傳入的參數(shù)是一個擁有多個屬性的javascript
object，屬性名稱是html頁面元素的id，屬性value為html頁面元素的value。下面就是一個setValues函數(shù)的應(yīng)用例子，實現(xiàn)
代碼如下：
<html>
<head>
<title></title>
<script type="text/javascript" src="dwr/util.js"></script>
<script type="text/javascript" src="dwr/engine.js"></script>
<script>
function setValue()
{
var cnId = {myAreaText:"tfnew21",myDiv:"ddr"};
dwr.util.setValues(cnId);
}
</script>
</head>
<body>
<input type="button" value="setValue" onclick="setValue();" />
<br />
id=myAreaText
<textarea id="myAreaText" value=""></textarea>
<br />
id=myDiv
<div id="myDiv"></div>
</body>
</html>
7.13.11 toDescriptiveString函數(shù)
toDescriptiveString函數(shù)是帶debug信息的toString，第一個為將要debug的對象，第二個參數(shù)為處理等級。等級如下：
0：單行調(diào)試
1：不分析子元素的多行調(diào)試
2： 最多分析到第二層子元素的多行調(diào)試
調(diào)用方法如下：
<input type="text" id="text">
dwr.util.toDescriptiveString("text",0);
7.13.12 useLoadingMessage函數(shù)
useLoadingMessage函數(shù)作用是當發(fā)出ajax請求后,頁面顯示的提示等待信息，調(diào)用方法如下：
function searchUser(){
var loadinfo = "loading....."
try{
regUser.queryAllUser(userList);
dwr.util.useLoadingMessage(loadinfo);
}catch(e){
}
}
以上介紹了DWR的工用原理就實現(xiàn)方法，同時介紹了兩個工具包的常用函數(shù)的用法，有關(guān)DWR的在項目中的具體應(yīng)用，將在后面的在線書店電子商務(wù)系統(tǒng)中詳細介紹，本節(jié)不在介紹。