1 概述
1.1 查詢助手功能介紹
在通常的BS軟件項目中，查詢助手使用頻率非常高，其功能是點擊圖標，頁面上元素的值為條件，到后臺查詢結(jié)果，彈出查詢結(jié)果對話框，選擇紀錄，關(guān)閉對話框，并且把你選擇的有關(guān)內(nèi)容顯示到父頁面中指定的元素中。由于其友好的界面設(shè)計和操作性能，對用戶和設(shè)計開發(fā)人員都有很大的吸引力，但存在開發(fā)效率低，復用性差，復雜度較高等問題。
1.2 Ajax現(xiàn)狀和項目實踐
隨著Ajax的風靡全球，Google的推波助瀾，優(yōu)秀的界面風格，局部刷新的全新感受，給人耳目一新的印象。但由于Ajax諸多javascript腳本和后臺應用的復雜性，使ajax的推廣困難重重，國內(nèi)的應用大多都是玩具級，距項目實用還有不小的差距，包括Microsoft，IBM，SUN都在積極攻關(guān)研發(fā)，以提高項目開發(fā)的實用性，降低開發(fā)難度。為了使用ajax在項目的實用性，針對查詢助手功能的Ajax做了一些有益的嘗試，特別愿意和大家分享。
1.3 Ajax簡介
網(wǎng)上關(guān)于Ajax的文章汗牛充棟，具體的Ajax理論可以到網(wǎng)上搜索，這兒只做簡單介紹：
Ajax是Asynchronous JavaScript and XML的縮寫。Ajax并不是一門新的語言或技術(shù),它實際上是幾項技術(shù)按一定的方式組合在一在同共的協(xié)作中發(fā)揮各自的作用，它包括：
Ø 使用XHTML和CSS標準化呈現(xiàn)
Ø 使用DOM實現(xiàn)動態(tài)顯示和交互
Ø 使用XML和XSLT進行數(shù)據(jù)交換與處理
Ø 使用XMLHttpRequest進行異步數(shù)據(jù)讀取;
Ø 使用JavaScript綁定和處理所有數(shù)據(jù)
Ajax的工作原理相當于在用戶和服務(wù)器之間加了—個中間層,使用戶操作與服務(wù)器響應異步化。并不是所有的用戶請求都提交給服務(wù)器,像—些數(shù)據(jù)驗證和數(shù)據(jù)處理等都交給Ajax引擎自己來做,只有確定需要從服務(wù)器讀取新數(shù)據(jù)時再由Ajax引擎代為向服務(wù)器提交請求。
2 Ajax查詢助手功能設(shè)計理念
查詢助手功能設(shè)計的的Ajax的設(shè)計主要集中在從前臺的jsp頁面提出Ajax請求，所有的Ajax請求都提交給查詢助手中間層，查詢助手中間層自動創(chuàng)建查詢助手具體實現(xiàn)類來實現(xiàn)查詢助手的具體查詢功能，查詢助手具體實現(xiàn)類實現(xiàn)數(shù)據(jù)庫查詢并組織傳回前臺數(shù)據(jù)文本。傳到前臺后自動選擇不同的JavaScript函數(shù)來解析數(shù)據(jù)，并顯示到頁面的Div或者直接顯示到頁面元素中。
3 Ajax實現(xiàn)詳述
3.1 Jsp前臺
在Jsp中，點擊查詢助手圖標，或者在輸入框中打回車鍵，則顯示如圖3-1界面，Ajax從后臺獲取數(shù)據(jù)顯示在前臺頁面上方，但此時頁面并未刷新，并且缺省單選按鈕選中第一行，第一行背景色為綠色。有兩種操作可以選擇：
1） 選擇是使用上下方向鍵來選擇紀錄，上下鍵移動時紀錄背景色自動改變，單選按鈕也自動選擇。當決定選擇某一行紀錄時，點擊回車鍵。
2） 選擇使用鼠標，當鼠標移動時，紀錄的背景色發(fā)生改變。
3） 當點擊回車鍵，或者點擊鼠標左鍵時則相關(guān)內(nèi)容填充到具體的頁面元素中，并把輸入焦點自動下移到指定的輸入框，并關(guān)閉選擇界面。
4） 如果你不想選擇，也可以直接點擊選擇界面右上角的關(guān)閉圖標
具體代碼如下：
3.1.1 引入js，css文件
<link rel="stylesheet" href="<%=request.getContextPath()%>/tplife/css/maginfier.css" type="text/css">
<script type="text/javascript" src="<%=request.getContextPath()%>/js/ajax/maginfier.js"></script>
組織機構(gòu)查詢助手：<br/><img src = "<%=request.getContextPath()%>/images/magifiericon.gif" onclick="orgMaginfier(´<%=request.getContextPath()%>´,´selOrg´,´DivShim´,´orgId,orgCode,orgName´,´0,2,1´,´message´,´´,´´);">
<input type="text" id = "orgCode" style="width:300px" onkeydown="if(event.keyCode == 13){orgMaginfier(´<%=request.getContextPath()%>´,´selOrg´,´DivShim´,´orgId,orgCode,orgName´,´0,2,1´,´message´); gnIsSelectCtrl = 1;}else{}">
<input type="text" id = "orgName" style="width:300px">
<input type="hidden" id = "orgId">
<br/>
<div id="selOrg" style="display:none; z-index:100" class="termFrame" ></div>
<iframe
id="DivShim"
src="javascript:false;"
scrolling="no"
frameborder="0"
style="position:absolute; top:0px; left:0px; display:none;">
</iframe>
3.1.1.1 Js文件內(nèi)容：
var xmlHttp;
var maginfierName ;
var displayName ;//顯示結(jié)果Div
var displayIFrame;//顯示結(jié)果IFrame
var posNames ;//回填頁面元素數(shù)組，如currencyId,currencyAbbrName,currencyName
var valueIndexs;//回填所需值的列號，如0,1,2
var nextPos; //回填后focus的元素名
var serverPath;
var maginfierFunction;
var tableHead = new Array();
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function keyDowm(obj, pos, value, maginfierName0, maginfierDisplayName, maginfierDisplayIFrame)
{
if(event.keyCode == 13)//回車鍵
{
filled(pos, value, maginfierDisplayName, maginfierDisplayIFrame);
}
else if(event.keyCode == 40)//上移鍵
{
document.getElementById(maginfierName0+"divrow" + obj).bgColor=´´;
var t = eval(obj) + 1;
if(document.getElementById(maginfierName0+"divrow" + t) != null)
{
document.getElementById(maginfierName0+"divrow" + t).bgColor=´#CCFF99´;
}
}
else if(event.keyCode == 38)//下移鍵
{
document.getElementById(maginfierName0+"divrow" + obj).bgColor=´´;
var t = eval(obj) - 1;
if(t >= 0)
{
document.getElementById(maginfierName0+"divrow" + t).bgColor=´#CCFF99´;
}
}
}
function closeDiv(maginfierDisplayName, maginfierDisplayIFrame)
{
_termFrame=getElement(maginfierDisplayName);
_termFrame.style.display = ´none´
getElement(maginfierDisplayIFrame).style.display = ´none´;
}
function operationRequest(queryString, postBlock) {
var url = serverPath + "/AjaxMaginfier?" + queryString;
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("POST", url, true);
// postBlock = "獲得界面元素";
//設(shè)置大塊數(shù)據(jù)傳輸postBlock，這樣可以解決大數(shù)據(jù)量傳向后臺。
xmlHttp.send(postBlock);
}
// 獲得界面元素
function getElement(idString)
{
return(document.all?document.all[idString]:document.getElementById(idString));
}
// 鼠標移動
function rollover(tdObject)
{
tdObject.bgColor=´#CCFF99´;
}
function rollout(tdObject)
{
tdObject.bgColor=´´;
}
function filled(keyStr, valueStr, maginfierDisplayName, maginfierDisplayIFrame)
{
keys = keyStr.split(",");
values = valueStr.split("<c>");
for(i = 0; i < keys.length; i++)
{
_test = getElement(keys[i]);
_test.value = values[i];
}
_termFrame=getElement(maginfierDisplayName);
_termFrame.style.display = ´none´
getElement(maginfierDisplayIFrame).style.display = ´none´;
if(document.getElementById(nextPos) != null)
{
document.getElementById(nextPos).focus();
}
}
function responseDisplay() {
var responseText = xmlHttp.responseText;
var responseContent = responseText.split("|");
var dataText = responseContent[0];
if(dataText.length == 0)
{
var displayStr = ´<table width="98%"><tr><td align="right" style="border-bottom:0px"><img src = "/fs/graphics/closeMaginfier.jpg" onclick="closeDiv(\´´+displayName+´\´,\´´+displayIFrame+´\´)"></td></tr></table><input type="radio" id="´+maginfierName+´rdoAlert" name="rdo" onkeydown=" closeDiv(\´´+displayName+´\´,\´´+displayIFrame+´\´)">´ + ´<font class="sfont" color="red">沒有符合條件的記錄，點任意鍵返回</font>´;
displayAlert(displayStr);
return;
}
var rows = dataText.split("<r>");
var _t=[];
var cols;
var pos = "\´" + posNames + "\´";
for(var i = 0; i < rows.length; i++) {
cols = rows[i].split("<c>");
values = "\´" ;
valuesIndexArray = valueIndexs.split(",");
for( j = 0; j < valuesIndexArray.length; j++)
{
var temp = cols[eval(valuesIndexArray[j])];
//回填時把null置換成空字符串
if(temp == ´null´)
{
temp = ´´;
}
if(j < valuesIndexArray.length - 1)
{
values = values + temp + "<c>";
}
else
{
values = values + temp + "\´";
}
}
if(i == 0)
{
_t[i] = ´<tr class="maginfierBody" id = "´+maginfierName+´divrow0" onmouseover="rollover(this)" onmouseout="rollout(this)" ><td width="5" align="center"><input type="radio" id="´+maginfierName+´rdo" name="rdo" onkeydown=" keyDowm(´+i+´, ´+pos+´, ´+values+´,\´´+maginfierName+´\´,\´´+displayName+´\´,\´´+displayIFrame+´\´);" ></td>´;
}
else
{
_t[i] = ´<tr class="maginfierBody" id = "´+maginfierName+´divrow´+i+´" onmouseover="rollover(this)" onmouseout="rollout(this)" ><td width="5" align="center"><input type="radio" name="rdo" onkeydown=" keyDowm(´+i+´, ´+pos+´, ´+values+´,\´´+maginfierName+´\´,\´´+displayName+´\´,\´´+displayIFrame+´\´);" ></td>´;
}
//根據(jù)表頭顯示相關(guān)數(shù)據(jù)
for(var j = 1 ; j < tableHead.length ; j++)
{
//在放大鏡表格顯示時，把null置換成空格顯示
if(cols[j] == ´null´)
{
cols[j] = " ";
}
_t[i] = _t[i] + ´<td onclick="filled(´+pos+´, ´+values+´,\´´+displayName+´\´,\´´+displayIFrame+´\´)"><span class="rs">´+cols[j]+´</span></td>´;
}
_t[i] = _t[i] + ´</tr>´;
}
var tableHeadStr = addMaginfierHeader();
displayStr = ´<table width="98%"><tr><td align="right" style="border-bottom:0px"><img src = "/fs/graphics/closeMaginfier.jpg" onclick="closeDiv(\´´+displayName+´\´,\´´+displayIFrame+´\´)"></td></tr></table><table cellspacing="1" width="98%" cellpadding="1" class="ItemList">´+ tableHeadStr +_t.join(´´)+´</table> ´;
if(responseContent[1] != null)
{
pageParams = responseContent[1].split(",");
prePageNo = parseInt(pageParams[2]) - 1;
prePageFunction = maginfierFunction + "," +prePageNo+")";
nextPageNo = parseInt(pageParams[2]) + 1;
nextPageFunction = maginfierFunction + ", "+nextPageNo+")";
displayStr += ´<br> <a href="javascript:if(´+prePageNo+´ == 0){alert(\´已經(jīng)是第一頁了\´);}else{´+prePageFunction+´} ">上一頁</a>´;
displayStr += ´<font class="sfont"> | 第´+pageParams[2]+´頁 | </font> ´;
displayStr += ´<a href="javascript:if(´+nextPageNo+´ > ´+pageParams[1]+´){alert(\´已經(jīng)是最后一頁了\´); }else{´+nextPageFunction+´}">下一頁</a>´;
displayStr += ´<font class="sfont"> | 共´+pageParams[1]+´頁 | 共´+pageParams[0]+´行</font>´;
}
displayMaginfier(displayStr);
}
function test()
{
var a = ´23,,,43,23´;
var b = a.split(",");
alert(b.length);
}
function addMaginfierHeader()
{
var tableHeadStr = ´<tr class="maginfierTitle"><td width="5" align="center" ></td>´;
for(i = 1 ; i < tableHead.length ; i++)
{
tableHeadStr = tableHeadStr + ´<td align="center" >´ + tableHead[i] + "</td>"
}
tableHeadStr = tableHeadStr + "</tr>";
return tableHeadStr;
}
function displayAlert(displayStr)
{
displayDiv = getElement(displayName);
displayDiv.innerHTML = displayStr;
displayDiv.style.display=´block´;
IfrRef = getElement(displayIFrame);
IfrRef.style.width = displayDiv.offsetWidth;
IfrRef.style.height = displayDiv.offsetHeight;
IfrRef.style.top = displayDiv.style.top;
IfrRef.style.left = displayDiv.style.left;
IfrRef.style.zIndex = displayDiv.style.zIndex - 1;
IfrRef.style.display = "block";
document.getElementById(maginfierName+"rdoAlert").checked = true;
document.getElementById(maginfierName+"rdoAlert").focus();
}
function displayMaginfier(displayStr)
{
displayDiv = getElement(displayName);
displayDiv.innerHTML = displayStr;
displayDiv.style.display=´block´;
IfrRef = getElement(displayIFrame);
IfrRef.style.width = displayDiv.offsetWidth;
IfrRef.style.height = displayDiv.offsetHeight;
IfrRef.style.top = displayDiv.style.top;
IfrRef.style.left = displayDiv.style.left;
IfrRef.style.zIndex = displayDiv.style.zIndex - 1;
IfrRef.style.display = "block";
document.getElementById(maginfierName+"divrow0").bgColor=´#CCFF99´;
document.getElementById(maginfierName+"rdo").checked = true;
document.getElementById(maginfierName+"rdo").focus();
}
/*具體放大鏡頁面處理方法*/
function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
responseDisplay();
}
}
}
function initMaginfierParas(serverPath0, divName, iFrameName, posNames0, valueIndexs0, nextPos0)
{
serverPath = serverPath0;
displayName = divName;
displayIFrame = iFrameName;
posNames = posNames0;
valueIndexs = valueIndexs0
nextPos = nextPos0;
}
/*具體放大鏡JavaScript*/
//組織機構(gòu)放大鏡
function orgMaginfier(serverPath0, divName, iFrameName, posNames0,valueIndexs0, nextPos0, orgCode, orgId, transTypeId, maginfierType, pageNo)
{
initMaginfierParas(serverPath0, divName, iFrameName, posNames0, valueIndexs0, nextPos0);
maginfierName = ´OrgMaginfier´ + divName;
maginfierFunction = "orgMaginfier(\´"+serverPath0+"\´, \´"+divName+"\´, \´"+iFrameName+"\´, \´"+posNames0+"\´,\´"+valueIndexs0+"\´, \´"+nextPos0+"\´, \´"+orgCode+"\´, \´"+orgId+"\´, \´"+transTypeId+"\´, \´"+maginfierType+"\´";
len = tableHead.length;
tableHead.splice(0, len);
tableHead[0] = "單位ID";
tableHead[1] = "單位編號";
tableHead[2] = "單位名稱";
tableHead[3] = "單位英文名稱";
queryString = "maginfierClassName=OrgMaginfier&orgCode="+orgCode+"&orgId="+orgId+"&maginfierType="+maginfierType+"&transTypeId="+transTypeId+"&pageNo="+pageNo;
operationRequest(queryString);
}
3.1.1.2 Css文件內(nèi)容：
/* 界面樣式 */
.termFrame{
width:298px !important;
width:500px;
overflow:auto;
height:360px;
scrollbar-face-color: #FFFFCC; scrollbar-shadow-color: #FFFFCC; scrollbar-highlight-color: #FFFFCC; scrollbar-3dlight-color: #FFFFCC; scrollbar-darkshadow-color: #6699CC; scrollbar-track-color: #FFFFCC; scrollbar-arrow-color: #99CCFF;
margin-top:1px !important;
margin-top:0;
border:1px solid #999999;
background-color:#FFFFFF;
position:absolute;
cursor:hand;
padding:2px;
font-size:70%;
z-index:100
}
.maginfierTitle {
BORDER-RIGHT: 1px; BORDER-TOP: 1px;BORDER-LEFT: 1px; BORDER-BOTTOM: 1px;BACKGROUND-COLOR: #456795; color: #FFFFFF;
}
.maginfierBody {
BORDER-RIGHT: 1px;BORDER-TOP: 1px;BORDER-LEFT: 1px;BORDER-BOTTOM: 1px;
}
3.1.2 當點擊查詢助手圖標時（例如查詢組織機構(gòu)）：
function orgMaginfier(serverPath0, divName, iFrameName, posNames0,valueIndexs0, nextPos0, orgCode, orgId, transTypeId, maginfierType, pageNo)
{
initMaginfierParas(serverPath0, divName, iFrameName, posNames0, valueIndexs0, nextPos0);
maginfierName = ´OrgMaginfier´ + divName;
maginfierFunction = "orgMaginfier(\´"+serverPath0+"\´, \´"+divName+"\´, \´"+iFrameName+"\´, \´"+posNames0+"\´,\´"+valueIndexs0+"\´, \´"+nextPos0+"\´, \´"+orgCode+"\´, \´"+orgId+"\´, \´"+transTypeId+"\´, \´"+maginfierType+"\´";
len = tableHead.length;
tableHead.splice(0, len);
tableHead[0] = "單位ID";
tableHead[1] = "單位編號";
tableHead[2] = "單位名稱";
tableHead[3] = "單位英文名稱";
queryString = "maginfierClassName=OrgMaginfier&orgCode="+orgCode+"&orgId="+orgId+"&maginfierType="+maginfierType+"&transTypeId="+transTypeId+"&pageNo="+pageNo;
operationRequest(queryString);
}
3.1.3 Js中的處理請求的函數(shù)
function operationRequest(queryString, postBlock) {
var url = serverPath + "/AjaxMaginfier?" + queryString;
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("POST", url, true);
// postBlock = "獲得界面元素";
//設(shè)置大塊數(shù)據(jù)傳輸postBlock，這樣可以解決大數(shù)據(jù)量傳向后臺。
xmlHttp.send(postBlock);
}
3.1.4 當數(shù)據(jù)傳回前臺后
//該函數(shù)的名稱不要改變，因為我在js文件中決定了用該函數(shù)來處理傳回的數(shù)據(jù)
function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
responseDisplay();
}
}
}
3.1.5 具體處理傳回的數(shù)據(jù)：
function responseDisplay() {
var responseText = xmlHttp.responseText;
var responseContent = responseText.split("|");
var dataText = responseContent[0];
if(dataText.length == 0)
{
var displayStr = rightSpace + ´<img src = "/fs/graphics/closeMaginfier.jpg" onclick="closeDiv(\´´+displayName+´\´,\´´+displayIFrame+´\´)"><br><input type="radio" id="´+maginfierName+´rdoAlert" name="rdo" onkeydown=" closeDiv(\´´+displayName+´\´,\´´+displayIFrame+´\´)">´ + ´<font class="sfont" color="red">沒有符合條件的記錄，點任意鍵返回</font>´;
displayAlert(displayStr);
return;
}
var rows = dataText.split(";");
var _t=[];
var cols;
var pos = "\´" + posNames + "\´";
for(var i = 0; i < rows.length; i++) {
cols = rows[i].split(",");
values = "\´" ;
valuesIndexArray = valueIndexs.split(",");
for( j = 0; j < valuesIndexArray.length; j++)
{
var temp = cols[eval(valuesIndexArray[j])];
//回填時把null置換成空字符串
if(temp == ´null´)
{
temp = ´´;
}
if(j < valuesIndexArray.length - 1)
{
values = values + temp + ",";
}
else
{
values = values + temp + "\´";
}
}
if(i == 0)
{
_t[i] = ´<tr class="maginfierBody" id = "´+maginfierName+´divrow0" onmouseover="rollover(this)" onmouseout="rollout(this)" ><td width="5" align="center"><input type="radio" id="´+maginfierName+´rdo" name="rdo" onkeydown=" keyDowm(´+i+´, ´+pos+´, ´+values+´,\´´+maginfierName+´\´,\´´+displayName+´\´,\´´+displayIFrame+´\´);" ></td>´;
}
else
{
_t[i] = ´<tr class="maginfierBody" id = "´+maginfierName+´divrow´+i+´" onmouseover="rollover(this)" onmouseout="rollout(this)" ><td width="5" align="center"><input type="radio" name="rdo" onkeydown=" keyDowm(´+i+´, ´+pos+´, ´+values+´,\´´+maginfierName+´\´,\´´+displayName+´\´,\´´+displayIFrame+´\´);" ></td>´;
}
//根據(jù)表頭顯示相關(guān)數(shù)據(jù)
for(var j = 0 ; j < tableHead.length ; j++)
{
//在查詢助手表格顯示時，把null置換成空格顯示
if(cols[j] == ´null´)
{
cols[j] = " ";
}
_t[i] = _t[i] + ´<td onclick="filled(´+pos+´, ´+values+´,\´´+displayName+´\´,\´´+displayIFrame+´\´)"><span class="rs">´+cols[j]+´</span></td>´;
}
_t[i] = _t[i] + ´</tr>´;
} //顯示表頭內(nèi)容
function addMaginfierHeader()
{
var tableHeadStr = ´<tr class="maginfierTitle"><td width="5" align="center" ></td>´;
for(i = 0 ; i < tableHead.length ; i++)
{
tableHeadStr = tableHeadStr + ´<td align="center" >´ + tableHead[i] + "</td>"
}
tableHeadStr = tableHeadStr + "</tr>";
return tableHeadStr;
}
//如果未查詢到紀錄，顯示提示信息
function displayAlert(displayStr)
{
_termFrame=getElement(displayName);
_termFrame.innerHTML = displayStr;
// 顯示結(jié)果
_termFrame.style.display=´block´;
IfrRef = getElement(displayIFrame);
IfrRef.style.width = _termFrame.offsetWidth;
IfrRef.style.height = _termFrame.offsetHeight;
IfrRef.style.top = _termFrame.style.top;
IfrRef.style.left = _termFrame.style.left;
IfrRef.style.zIndex = _termFrame.style.zIndex - 1;
IfrRef.style.display = "block";
document.getElementById(maginfierName+"rdoAlert").checked = true;
document.getElementById(maginfierName+"rdoAlert").focus();
}
//顯示查詢助手
function displayMaginfier(displayStr)
{
_termFrame=getElement(displayName);
_termFrame.innerHTML = displayStr;
// 顯示結(jié)果
_termFrame.style.display=´block´;
//setHidden(overlaySelEles);
//_termFrame.style.visibility="visible";
IfrRef = getElement(displayIFrame);
IfrRef.style.width = _termFrame.offsetWidth;
IfrRef.style.height = _termFrame.offsetHeight;
IfrRef.style.top = _termFrame.style.top;
IfrRef.style.left = _termFrame.style.left;
IfrRef.style.zIndex = _termFrame.style.zIndex - 1;
IfrRef.style.display = "block";
document.getElementById(maginfierName+"divrow0").bgColor=´#CCFF99´;
document.getElementById(maginfierName+"rdo").checked = true;
document.getElementById(maginfierName+"rdo").focus();
}
3.2 Servlet后臺
選擇Servlet作為后臺，是因為如果采用Struts Action為后臺處理程序，則必須指定要返回的頁面。而使用Servlet則沒有這個要求。默認返回到請求頁面。而這個查詢助手Servlet接受所有的查詢助手請求，根據(jù)前臺傳來的查詢助手實現(xiàn)類名稱參數(shù)，由Spring創(chuàng)建查詢助手實現(xiàn)類對象，該對象實現(xiàn)了查詢助手接口（MaginfierInterface），從而獲取返回值文本。返回到前臺。
3.2.1 具體代碼如下：
3.2.1.1 查詢助手Servlet
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String maginfierClassName = request.getParameter("maginfierClassName");
MaginfierFactory factory = MaginfierFactory.getInstance();
MaginfierInterface maginfier = factory.createMaginfier(maginfierClassName);
String ret = maginfier.getReturnValue(request);
System.out.println("ret = " + ret);
response.setContentType("text/xml;charset=GBK");
PrintWriter out = response.getWriter();
out.write(ret);
out.close();
}
3.2.1.2 Web.xml配置
3.2.1.2.1 在Ｗｅｂ．ｘｍｌ中配置查詢助手Servlet
<servlet>
<servlet-name>AjaxMaginfier</servlet-name>
<servlet-class>com.iss.fs.web.module.example.AjaxMaginfier</servlet-class>
<!—在系統(tǒng)初次啟動時，初始化1次-->
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>AjaxMaginfier</servlet-name>
<url-pattern>/AjaxMaginfier</url-pattern>
</servlet-mapping>
3.2.1.3 查詢助手具體實現(xiàn)類
3.2.1.3.1 實現(xiàn)查詢助手接口方法
public class CurrencyMaginfier implements MaginfierInterface
{
public String getReturnValue(HttpServletRequest request)
{
List list = null;
StringBuffer results = new StringBuffer();
CurrencyDAO dao = new CurrencyDAO();
String currencyAbbrName = request.getParameter("currencyAbbrName");
String responsibilityId = request.getParameter("responsibilityId");
if(currencyAbbrName == null || currencyAbbrName.equals("") || currencyAbbrName.equals("undefined"))
{
currencyAbbrName = "";
}
if(responsibilityId == null || responsibilityId.equals("") || responsibilityId.equals("undefined"))
{
responsibilityId = "-1";
}
try
{
list = dao.getMaginfierResults(currencyAbbrName, responsibilityId);
}
catch (Exception ex)
{
ex.printStackTrace();
}
if (list != null)
{
Currency currency = null;
for(int i = 0 ; i < list.size(); i++)
{
currency = (Currency)list.get(i);
results.append(currency.getID()).append(",");
results.append(currency.getCurrencyAbbrName()).append(",");
results.append(currency.getCurrencyName());
if(i < (list.size() - 1))
{
results.append(";");
}
}
}
return results.toString();
}
}
3.3 技術(shù)難點解析
3.3.1 查詢助手函數(shù)參數(shù)設(shè)計：
固定參數(shù)：serverPath, divName, iFrameName, posNames,valueIndexs, nextPos
serverPath：表示webserver的地址，如：/myapp
divName：顯示選擇界面的Div名稱
iFrameName：顯示選擇界面的Ifranme名稱，因為IE的缺陷，div顯示時不能覆蓋下面的選擇框，所以我們使用Iframe作為div的底板。
posNames：選擇紀錄后回顯的頁面元素，如：orgId,orgName,orgCode
valueIndexs：對應回顯頁面元素，紀錄的列序號，如 0,2,1
nextPos：選擇結(jié)束后要把輸入焦點，移動到下一個頁面元素名稱
固定參數(shù)后面的參數(shù)，不同的查詢助手有不同參數(shù)列表，主要是條件數(shù)據(jù)。
3.3.2 查詢助手選擇界面的表頭設(shè)計：
不同的查詢助手選擇界面有不同的表頭，我們使用js的全局數(shù)組變量來存儲，每個查詢助手使用前都先清空表頭數(shù)組，使用splice(0, len)
len = tableHead.length;
tableHead.splice(0, len);
tableHead[0] = "外部賬戶ID";
tableHead[1] = "外部賬戶編號";
tableHead[2] = "外部賬戶名稱";
tableHead[3] = "外部銀行名稱";
tableHead[4] = "機構(gòu)號";
tableHead[5] = "聯(lián)行號";
顯示表頭：
var tableHeadStr = ´<tr class="maginfierTitle"><td width="5" align="center" ></td>´;
for(i = 0 ; i < tableHead.length ; i++)
{
tableHeadStr = tableHeadStr + ´<td align="center" >´ + tableHead[i] + "</td>"
}
tableHeadStr = tableHeadStr + "</tr>";
3.3.3 處理后臺傳來的數(shù)據(jù)：
3.3.3.1.1 接受數(shù)據(jù)：
var responseText = xmlHttp.responseText;
3.3.3.1.2 查詢無紀錄處理：
if(responseText.length == 0)
{
var displayStr = rightSpace + ´<img src = "/fs/graphics/closeMaginfier.jpg" onclick="closeDiv()"><br><input type="radio" id="´+maginfierName+´rdoAlert" name="rdo" onkeydown=" closeDiv()">´ + ´<font class="sfont" color="red">沒有符合條件的記錄，點任意鍵返回</font>´;
displayAlert(displayStr);
return;
}
Onkeydown表示響應任意鍵，則關(guān)閉查詢助手選擇界面。
Onclick 表示響應鼠標點擊
3.3.3.1.3 顯示查詢結(jié)果：
因為我們在后臺把查詢數(shù)據(jù)封裝成文本傳回前臺，所以到前臺后要解析文本，我不使用xml文本，數(shù)據(jù)封裝規(guī)則是紀錄間用“；”隔離，列之間用“，”隔離。同樣到前臺后使用相同的規(guī)則解析數(shù)據(jù)。
把文本數(shù)據(jù)分成若干行數(shù)據(jù)
var rows = responseText.split(";");
3.4 總結(jié)
Ajax實現(xiàn)查詢助手功能是Ajax在項目中實戰(zhàn)的一個小小的例子，根據(jù)以后的研發(fā)，將會產(chǎn)生更多更好的應用，本人在文檔的Ajax簡介部分引用了別的文檔的說明，在查詢助手的實現(xiàn)中借鑒了Google的Suggest設(shè)計理念，Suggest實現(xiàn)是直接從后臺傳來表格Frame，后臺定義顯示邏輯，在查詢助手的設(shè)計中，前臺來決定顯示邏輯，后臺僅提供數(shù)據(jù)，實現(xiàn)數(shù)據(jù)和顯示的分離，這樣就會造成前臺需要解析數(shù)據(jù)文本，處理顯示邏輯的Javascript函數(shù)，顯得前臺的JavaScript比較多，但我認為這是可以接受的，因為Ajax主要是前臺邏輯。另外，Ajax查詢助手的后臺實現(xiàn)采用了Spring Bean管理容器，只是為了后期擴展的方便性，借助Spring容器管理的強大功能，實現(xiàn)類似工廠模式的功能。