摘錄地址：http://www2.matrix.org.cn/resource/article/2006-06-28/Ajax+Query+Helper_44506.html
1?????? 概述
1.1????查詢助手功能介紹
在通常的BS軟件項(xiàng)目中，查詢助手使用頻率非常高，其功能是點(diǎn)擊圖標(biāo)，頁面上元素的值為條件，到后臺(tái)查詢結(jié)果，彈出查詢結(jié)果對(duì)話框，選擇紀(jì)錄，關(guān)閉對(duì)話框，并且把你選擇的有關(guān)內(nèi)容顯示到父頁面中指定的元素中。由于其友好的界面設(shè)計(jì)和操作性能，對(duì)用戶和設(shè)計(jì)開發(fā)人員都有很大的吸引力，但存在開發(fā)效率低，復(fù)用性差，復(fù)雜度較高等問題。
1.2????Ajax現(xiàn)狀和項(xiàng)目實(shí)踐
隨著Ajax的風(fēng)靡全球，Google的推波助瀾，優(yōu)秀的界面風(fēng)格，局部刷新的全新感受，給人耳目一新的印象。但由于Ajax諸多javascript腳本和后臺(tái)應(yīng)用的復(fù)雜性，使ajax的推廣困難重重，國(guó)內(nèi)的應(yīng)用大多都是玩具級(jí)，距項(xiàng)目實(shí)用還有不小的差距，包括Microsoft，IBM，SUN都在積極攻關(guān)研發(fā)，以提高項(xiàng)目開發(fā)的實(shí)用性，降低開發(fā)難度。為了使用ajax在項(xiàng)目的實(shí)用性，針對(duì)查詢助手功能的Ajax做了一些有益的嘗試，特別愿意和大家分享。
1.3????Ajax簡(jiǎn)介
網(wǎng)上關(guān)于Ajax的文章汗牛充棟，具體的Ajax理論可以到網(wǎng)上搜索，這兒只做簡(jiǎn)單介紹：
Ajax是Asynchronous JavaScript and XML的縮寫。Ajax并不是一門新的語言或技術(shù),它實(shí)際上是幾項(xiàng)技術(shù)按一定的方式組合在一在同共的協(xié)作中發(fā)揮各自的作用，它包括：
Ø???????? 使用XHTML和CSS標(biāo)準(zhǔn)化呈現(xiàn)
Ø???????? 使用DOM實(shí)現(xiàn)動(dòng)態(tài)顯示和交互
Ø???????? 使用XML和XSLT進(jìn)行數(shù)據(jù)交換與處理
Ø???????? 使用XMLHttpRequest進(jìn)行異步數(shù)據(jù)讀取;
Ø???????? 使用JavaScript綁定和處理所有數(shù)據(jù)
Ajax的工作原理相當(dāng)于在用戶和服務(wù)器之間加了—個(gè)中間層,使用戶操作與服務(wù)器響應(yīng)異步化。并不是所有的用戶請(qǐng)求都提交給服務(wù)器,像—些數(shù)據(jù)驗(yàn)證和數(shù)據(jù)處理等都交給Ajax引擎自己來做,只有確定需要從服務(wù)器讀取新數(shù)據(jù)時(shí)再由Ajax引擎代為向服務(wù)器提交請(qǐng)求。
2?????? Ajax查詢助手功能設(shè)計(jì)理念
查詢助手功能設(shè)計(jì)的AJAX的設(shè)計(jì)主要集中在從前臺(tái)的jsp頁面提出Ajax請(qǐng)求，所有的Ajax請(qǐng)求都提交給查詢助手中間層，查詢助手中間層自動(dòng)創(chuàng)建查詢助手具體實(shí)現(xiàn)類來實(shí)現(xiàn)查詢助手的具體查詢功能，查詢助手具體實(shí)現(xiàn)類實(shí)現(xiàn)數(shù)據(jù)庫(kù)查詢并組織傳回前臺(tái)數(shù)據(jù)文本。傳到前臺(tái)后自動(dòng)選擇不同的JavaScript函數(shù)來解析數(shù)據(jù)，并顯示到頁面的Div或者直接顯示到頁面元素中。
2.1????Ajax實(shí)現(xiàn)查詢助手功能示意圖如下：
3?????? Ajax實(shí)現(xiàn)詳述
3.1????Jsp前臺(tái)
在Jsp中，點(diǎn)擊查詢助手圖標(biāo)，或者在輸入框中打回車鍵，則顯示如圖3-1界面，Ajax從后臺(tái)獲取數(shù)據(jù)顯示在前臺(tái)頁面上方，但此時(shí)頁面并未刷新，并且缺省單選按鈕選中第一行，第一行背景色為綠色。有兩種操作可以選擇：
1）??選擇是使用上下方向鍵來選擇紀(jì)錄，上下鍵移動(dòng)時(shí)紀(jì)錄背景色自動(dòng)改變，單選按鈕也自動(dòng)選擇。當(dāng)決定選擇某一行紀(jì)錄時(shí)，點(diǎn)擊回車鍵。
2）??選擇使用鼠標(biāo)，當(dāng)鼠標(biāo)移動(dòng)時(shí)，紀(jì)錄的背景色發(fā)生改變。
3）??當(dāng)點(diǎn)擊回車鍵，或者點(diǎn)擊鼠標(biāo)左鍵時(shí)則相關(guān)內(nèi)容填充到具體的頁面元素中，并把輸入焦點(diǎn)自動(dòng)下移到指定的輸入框，并關(guān)閉選擇界面。
4）??如果你不想選擇，也可以直接點(diǎn)擊選擇界面右上角的關(guān)閉圖標(biāo)
圖3-1
如果查詢結(jié)果為沒有紀(jì)錄，則：
圖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>
組織機(jī)構(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 ;//回填頁面元素?cái)?shù)組，如currencyId,currencyAbbrName,currencyName
var valueIndexs;//回填所需值的列號(hào)，如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ù)量傳向后臺(tái)。
????xmlHttp.send(postBlock);
}
// 獲得界面元素
function getElement(idString)
{
return(document.all?document.all[idString]:document.getElementById(idString));
}
// 鼠標(biāo)移動(dòng)
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">沒有符合條件的記錄，點(diǎn)任意鍵返回</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])];
????????????//回填時(shí)把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++)
????????{
????????????//在放大鏡表格顯示時(shí)，把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*/
//組織機(jī)構(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] = "單位編號(hào)";
????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?? 當(dāng)點(diǎn)擊查詢助手圖標(biāo)時(shí)（例如查詢組織機(jī)構(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] = "單位編號(hào)";
????tableHead[2] = "單位名稱";??????
????tableHead[3] = "單位英文名稱";
????
????queryString = "maginfierClassName=OrgMaginfier&orgCode="+orgCode+"&orgId="+orgId+"&maginfierType="+maginfierType+"&transTypeId="+transTypeId+"&pageNo="+pageNo;
????
??operationRequest(queryString);
}
3.1.3?? Js中的處理請(qǐng)求的函數(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ù)量傳向后臺(tái)。
????xmlHttp.send(postBlock);
}
3.1.4?? 當(dāng)數(shù)據(jù)傳回前臺(tái)后
//該函數(shù)的名稱不要改變，因?yàn)槲以趈s文件中決定了用該函數(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">沒有符合條件的記錄，點(diǎn)任意鍵返回</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])];
????????????//回填時(shí)把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++)
????????{
????????????//在查詢助手表格顯示時(shí)，把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;
}
//如果未查詢到紀(jì)錄，顯示提示信息
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后臺(tái)
選擇Servlet作為后臺(tái)，是因?yàn)槿绻捎肧truts Action為后臺(tái)處理程序，則必須指定要返回的頁面。而使用Servlet則沒有這個(gè)要求。默認(rèn)返回到請(qǐng)求頁面。而這個(gè)查詢助手Servlet接受所有的查詢助手請(qǐng)求，根據(jù)前臺(tái)傳來的查詢助手實(shí)現(xiàn)類名稱參數(shù)，由Spring創(chuàng)建查詢助手實(shí)現(xiàn)類對(duì)象，該對(duì)象實(shí)現(xiàn)了查詢助手接口（MaginfierInterface），從而獲取返回值文本。返回到前臺(tái)。
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>
????????<!—在系統(tǒng)初次啟動(dòng)時(shí)，初始化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?????? 查詢助手具體實(shí)現(xiàn)類
3.2.1.3.1??????實(shí)現(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ù)難點(diǎn)解析
3.3.1?? 查詢助手函數(shù)參數(shù)設(shè)計(jì)：
固定參數(shù)：serverPath, divName, iFrameName, posNames,valueIndexs, nextPos
serverPath：表示webserver的地址，如：/myapp
divName：顯示選擇界面的Div名稱
iFrameName：顯示選擇界面的Ifranme名稱，因?yàn)镮E的缺陷，div顯示時(shí)不能覆蓋下面的選擇框，所以我們使用Iframe作為div的底板。
posNames：選擇紀(jì)錄后回顯的頁面元素，如：orgId,orgName,orgCode
valueIndexs：對(duì)應(yīng)回顯頁面元素，紀(jì)錄的列序號(hào)，如 0,2,1
nextPos：選擇結(jié)束后要把輸入焦點(diǎn)，移動(dòng)到下一個(gè)頁面元素名稱
固定參數(shù)后面的參數(shù)，不同的查詢助手有不同參數(shù)列表，主要是條件數(shù)據(jù)。
3.3.2?? 查詢助手選擇界面的表頭設(shè)計(jì)：
不同的查詢助手選擇界面有不同的表頭，我們使用js的全局?jǐn)?shù)組變量來存儲(chǔ)，每個(gè)查詢助手使用前都先清空表頭數(shù)組，使用splice(0, len)
len = tableHead.length;
????tableHead.splice(0, len);????
????tableHead[0] = "外部賬戶ID";
????tableHead[1] = "外部賬戶編號(hào)";
????tableHead[2] = "外部賬戶名稱";
????tableHead[3] = "外部銀行名稱";
????tableHead[4] = "機(jī)構(gòu)號(hào)";
????tableHead[5] = "聯(lián)行號(hào)";
顯示表頭：
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?? 處理后臺(tái)傳來的數(shù)據(jù)：
3.3.3.1.1??????接受數(shù)據(jù)：
var responseText = xmlHttp.responseText;
3.3.3.1.2??????查詢無紀(jì)錄處理：
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">沒有符合條件的記錄，點(diǎn)任意鍵返回</font>';
?????? displayAlert(displayStr);
?????? return;
?? }
Onkeydown表示響應(yīng)任意鍵，則關(guān)閉查詢助手選擇界面。
Onclick 表示響應(yīng)鼠標(biāo)點(diǎn)擊
3.3.3.1.3??????顯示查詢結(jié)果：
因?yàn)槲覀冊(cè)诤笈_(tái)把查詢數(shù)據(jù)封裝成文本傳回前臺(tái)，所以到前臺(tái)后要解析文本，我不使用xml文本，數(shù)據(jù)封裝規(guī)則是紀(jì)錄間用“；”隔離，列之間用“，”隔離。同樣到前臺(tái)后使用相同的規(guī)則解析數(shù)據(jù)。
把文本數(shù)據(jù)分成若干行數(shù)據(jù)
var rows = responseText.split(";");
3.4????總結(jié)
Ajax實(shí)現(xiàn)查詢助手功能是Ajax在項(xiàng)目中實(shí)戰(zhàn)的一個(gè)小小的例子，根據(jù)以后的研發(fā)，將會(huì)產(chǎn)生更多更好的應(yīng)用，本人在文檔的Ajax簡(jiǎn)介部分引用了別的文檔的說明，在查詢助手的實(shí)現(xiàn)中借鑒了Google的Suggest設(shè)計(jì)理念，Suggest實(shí)現(xiàn)是直接從后臺(tái)傳來表格Frame，后臺(tái)定義顯示邏輯，在查詢助手的設(shè)計(jì)中，前臺(tái)來決定顯示邏輯，后臺(tái)僅提供數(shù)據(jù)，實(shí)現(xiàn)數(shù)據(jù)和顯示的分離，這樣就會(huì)造成前臺(tái)需要解析數(shù)據(jù)文本，處理顯示邏輯的Javascript函數(shù)，顯得前臺(tái)的JavaScript比較多，但我認(rèn)為這是可以接受的，因?yàn)锳jax主要是前臺(tái)邏輯。另外，Ajax查詢助手的后臺(tái)實(shí)現(xiàn)采用了Spring Bean管理容器，只是為了后期擴(kuò)展的方便性，借助Spring容器管理的強(qiáng)大功能，實(shí)現(xiàn)類似工廠模式的功能。
關(guān)于作者
努力，在于我熱愛我的事業(yè)，與中國(guó)的軟件一起走向成熟，走向世界。
聯(lián)系作者：lijj_72@hotmail.com