摘錄地址：http://www2.matrix.org.cn/resource/article/2006-06-28/Ajax+Query+Helper_44506.html
1?????? 概述
1.1????查詢助手功能介紹
在通常的BS軟件項目中，查詢助手使用頻率非常高，其功能是點擊圖標，頁面上元素的值為條件，到后臺查詢結果，彈出查詢結果對話框，選擇紀錄，關閉對話框，并且把你選擇的有關內容顯示到父頁面中指定的元素中。由于其友好的界面設計和操作性能，對用戶和設計開發(fā)人員都有很大的吸引力，但存在開發(fā)效率低，復用性差，復雜度較高等問題。
1.2????Ajax現狀和項目實踐
隨著Ajax的風靡全球，Google的推波助瀾，優(yōu)秀的界面風格，局部刷新的全新感受，給人耳目一新的印象。但由于Ajax諸多javascript腳本和后臺應用的復雜性，使ajax的推廣困難重重，國內的應用大多都是玩具級，距項目實用還有不小的差距，包括Microsoft，IBM，SUN都在積極攻關研發(fā)，以提高項目開發(fā)的實用性，降低開發(fā)難度。為了使用ajax在項目的實用性，針對查詢助手功能的Ajax做了一些有益的嘗試，特別愿意和大家分享。
1.3????Ajax簡介
網上關于Ajax的文章汗牛充棟，具體的Ajax理論可以到網上搜索，這兒只做簡單介紹：
Ajax是Asynchronous JavaScript and XML的縮寫。Ajax并不是一門新的語言或技術,它實際上是幾項技術按一定的方式組合在一在同共的協作中發(fā)揮各自的作用，它包括：
Ø???????? 使用XHTML和CSS標準化呈現
Ø???????? 使用DOM實現動態(tài)顯示和交互
Ø???????? 使用XML和XSLT進行數據交換與處理
Ø???????? 使用XMLHttpRequest進行異步數據讀取;
Ø???????? 使用JavaScript綁定和處理所有數據
Ajax的工作原理相當于在用戶和服務器之間加了—個中間層,使用戶操作與服務器響應異步化。并不是所有的用戶請求都提交給服務器,像—些數據驗證和數據處理等都交給Ajax引擎自己來做,只有確定需要從服務器讀取新數據時再由Ajax引擎代為向服務器提交請求。
2?????? Ajax查詢助手功能設計理念
查詢助手功能設計的AJAX的設計主要集中在從前臺的jsp頁面提出Ajax請求，所有的Ajax請求都提交給查詢助手中間層，查詢助手中間層自動創(chuàng)建查詢助手具體實現類來實現查詢助手的具體查詢功能，查詢助手具體實現類實現數據庫查詢并組織傳回前臺數據文本。傳到前臺后自動選擇不同的JavaScript函數來解析數據，并顯示到頁面的Div或者直接顯示到頁面元素中。
2.1????Ajax實現查詢助手功能示意圖如下：
3?????? Ajax實現詳述
3.1????Jsp前臺
在Jsp中，點擊查詢助手圖標，或者在輸入框中打回車鍵，則顯示如圖3-1界面，Ajax從后臺獲取數據顯示在前臺頁面上方，但此時頁面并未刷新，并且缺省單選按鈕選中第一行，第一行背景色為綠色。有兩種操作可以選擇：
1）??選擇是使用上下方向鍵來選擇紀錄，上下鍵移動時紀錄背景色自動改變，單選按鈕也自動選擇。當決定選擇某一行紀錄時，點擊回車鍵。
2）??選擇使用鼠標，當鼠標移動時，紀錄的背景色發(fā)生改變。
3）??當點擊回車鍵，或者點擊鼠標左鍵時則相關內容填充到具體的頁面元素中，并把輸入焦點自動下移到指定的輸入框，并關閉選擇界面。
4）??如果你不想選擇，也可以直接點擊選擇界面右上角的關閉圖標
圖3-1
如果查詢結果為沒有紀錄，則：
圖3-2
具體代碼如下：
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>
組織機構查詢助手：
<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文件內容：
var xmlHttp;
var maginfierName ;
var displayName ;//顯示結果Div
var displayIFrame;//顯示結果IFrame
var posNames ;//回填頁面元素數組，如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 = "獲得界面元素";
??//設置大塊數據傳輸postBlock，這樣可以解決大數據量傳向后臺。
????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>';
????????}
????????//根據表頭顯示相關數據????
????????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(\'已經是第一頁了\');}else{'+prePageFunction+'} ">上一頁</a>';
????????displayStr += '<font class="sfont"> | 第'+pageParams[2]+'頁 | </font> ';
????????displayStr += '<a href="javascript:if('+nextPageNo+' > '+pageParams[1]+'){alert(\'已經是最后一頁了\'); }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*/
//組織機構放大鏡
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文件內容：
/* 界面樣式 */
.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?? 當點擊查詢助手圖標時（例如查詢組織機構）：
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中的處理請求的函數
function operationRequest(queryString, postBlock) {??
????
????var url = serverPath + "/AjaxMaginfier?" +??queryString;
????
????createXMLHttpRequest();
????xmlHttp.onreadystatechange = handleStateChange;
????xmlHttp.open("POST", url, true);????
??//????postBlock = "獲得界面元素";
??//設置大塊數據傳輸postBlock，這樣可以解決大數據量傳向后臺。
????xmlHttp.send(postBlock);
}
3.1.4?? 當數據傳回前臺后
//該函數的名稱不要改變，因為我在js文件中決定了用該函數來處理傳回的數據
function handleStateChange() {????
????if(xmlHttp.readyState == 4) {
????????if(xmlHttp.status == 200) {??????????
?????????? responseDisplay();??????????
????????}
????}
}
3.1.5?? 具體處理傳回的數據：
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>';
????????}
????????//根據表頭顯示相關數據????
????????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>';
????????
????} //顯示表頭內容
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;
?????? // 顯示結果
??????
?????? _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;
?????? // 顯示結果
?????? _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接受所有的查詢助手請求，根據前臺傳來的查詢助手實現類名稱參數，由Spring創(chuàng)建查詢助手實現類對象，該對象實現了查詢助手接口（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??????在Web.xml中配置查詢助手Servlet
<servlet>
????????<servlet-name>AjaxMaginfier</servlet-name>
????????<servlet-class>com.iss.fs.web.module.example.AjaxMaginfier</servlet-class>
????????<!—在系統初次啟動時，初始化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?????? 查詢助手具體實現類
3.2.1.3.1??????實現查詢助手接口方法
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????技術難點解析
3.3.1?? 查詢助手函數參數設計：
固定參數：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：選擇結束后要把輸入焦點，移動到下一個頁面元素名稱
固定參數后面的參數，不同的查詢助手有不同參數列表，主要是條件數據。
3.3.2?? 查詢助手選擇界面的表頭設計：
不同的查詢助手選擇界面有不同的表頭，我們使用js的全局數組變量來存儲，每個查詢助手使用前都先清空表頭數組，使用splice(0, len)
len = tableHead.length;
????tableHead.splice(0, len);????
????tableHead[0] = "外部賬戶ID";
????tableHead[1] = "外部賬戶編號";
????tableHead[2] = "外部賬戶名稱";
????tableHead[3] = "外部銀行名稱";
????tableHead[4] = "機構號";
????tableHead[5] = "聯行號";
顯示表頭：
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?? 處理后臺傳來的數據：
3.3.3.1.1??????接受數據：
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表示響應任意鍵，則關閉查詢助手選擇界面。
Onclick 表示響應鼠標點擊
3.3.3.1.3??????顯示查詢結果：
因為我們在后臺把查詢數據封裝成文本傳回前臺，所以到前臺后要解析文本，我不使用xml文本，數據封裝規(guī)則是紀錄間用“；”隔離，列之間用“，”隔離。同樣到前臺后使用相同的規(guī)則解析數據。
把文本數據分成若干行數據
var rows = responseText.split(";");
3.4????總結
Ajax實現查詢助手功能是Ajax在項目中實戰(zhàn)的一個小小的例子，根據以后的研發(fā)，將會產生更多更好的應用，本人在文檔的Ajax簡介部分引用了別的文檔的說明，在查詢助手的實現中借鑒了Google的Suggest設計理念，Suggest實現是直接從后臺傳來表格Frame，后臺定義顯示邏輯，在查詢助手的設計中，前臺來決定顯示邏輯，后臺僅提供數據，實現數據和顯示的分離，這樣就會造成前臺需要解析數據文本，處理顯示邏輯的Javascript函數，顯得前臺的JavaScript比較多，但我認為這是可以接受的，因為Ajax主要是前臺邏輯。另外，Ajax查詢助手的后臺實現采用了Spring Bean管理容器，只是為了后期擴展的方便性，借助Spring容器管理的強大功能，實現類似工廠模式的功能。
關于作者
努力，在于我熱愛我的事業(yè)，與中國的軟件一起走向成熟，走向世界。
聯系作者：lijj_72@hotmail.com