{
http_request = false;
if(window.XMLHttpRequest)
{
http_request = new XMLHttpRequest();
if(http_request.overrideMimeType)
http_request.overrideMimeType("text/xml");
}
else
{
if(window.ActiveXObject)
{
try
{
http_request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e)
{
}
}
}
}
return http_request;
}
//發送請求
/*
@http_request 異步請求對象
@url 請求位置
@method 請求方法
@content 請求內容 eg. param1=xxx1¶m2=xxx2
@callBack 請求回調
*/
function send_request(http_request,url,method,content,callBack)
{
if(!http_request)
{
alert('無法創建異步請求對象!');
return;
}
http_request.onreadystatechange = callBack;
if(method.toUpperCase() == 'GET')
{
http_request.open(method,url,true);
http_request.setRequestHeader('Content-Type','text/html;charset=UTF-8');
}
else if(method.toUpperCase == 'POST')
{
http_request.open(method,url,true);
http_request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
}
else
{
alert('請求方法出錯!');
return;
}
http_request.send(content);
}
//返回文本的
function getWebContent()
{
var webConReq = getXMLHttpRequest();//ajax不支持跨跨域訪問
send_request(webConReq,'./servlet/testServlet','get',null,
function()
{
if(webConReq.readyState == 4)
{
if(webConReq.status == 200)
{
var doc = webConReq.responseText;
if(doc)
{
document.getElementById("pageCon").innerHTML = doc;
}
}
else
{
alert('請求失敗!');
}
}
}
);
}
//返回xml
function getXml()
{
var webConReq = getXMLHttpRequest();//ajax不支持跨跨域訪問
send_request(webConReq,'./NewFile.xml','get',null,
function()
{
if(webConReq.readyState == 4)
{
if(webConReq.status == 200)
{
var doc = webConReq.responseXML;
if(doc)
{
var root = doc.getElementsByTagName("items")[0];
var items = root.getElementsByTagName("item");
var html = '';
for(var i=0;i<items.length;i++)
{
html += "id:" + items[i].getAttribute('id');
html += " name:" + items[i].getAttribute('name');
}
document.getElementById("xml").innerHTML = html;
}
}
else
{
alert('請求失敗!');
}
}
}
);
}
<a href="javascript:getWebContent();">異步獲取頁面</a>
<font id="pageCon"></font><br>
<a href="javascript:getXml();">異步XML</a>
<font id="xml"></font>
]]>
Windows關機效果分析
使用Windows系統的用戶在關機的時候，出現的界面只允許用戶選擇關機、注銷或取消動作，而桌面上的程序都不能使用，并且屏幕呈現灰色狀態。
本例將仿照這種高亮顯示的效果在網頁上實現.
在網頁上運用這種關機效果有什么好處呢？首先，由于單擊某一鏈接后，將用戶此時不可用的操作隱藏在后臺，將可用的操作放在屏幕最上層，并高亮顯示，可以避免用戶的誤操作。其次，將信息高亮顯示，也可以提醒用戶應該注意的事項。
網頁中實現關機效果分析
在網頁中實現這種效果的原理很簡單。創建兩個圖層，一個為遮蓋層，覆蓋整個頁面，并且顯示為灰色；另一個圖層作為高亮顯示的部分，在遮蓋層的上方，這可通過設置圖層的z-index屬性來設置。當取消關機效果后，只需將這兩個圖層元素在頁面中刪除即可。
以下代碼實現顯示關機效果。
以下是引用片段：
<html> |
需要注意的是，在IE瀏覽器中如果有<select>標記，則該標記不能被覆蓋層覆蓋，但在其他瀏覽器中則可以覆蓋。
在使用IE瀏覽器時，要先將網頁中的<select>元素隱藏起來。如以下代碼可以用于隱藏頁面所有的<select>元素。
selects = document.getElementsByTagName('select');
以下是引用片段：
for(i = 0; i < selects.length; i++) {
|
客戶端代碼
客戶端的頁面上有兩個鏈接，用戶單擊鏈接后，向服務器端發送請求，并將返回信息顯示到高亮層上。客戶端的網頁文件代碼如下所示：
以下是引用片段：
<html> |
另外，還需要設置該頁面所使用CSS樣式。lightbox.css樣式表文件代碼如下所示：
以下是引用片段：
#lightbox {
|
客戶端腳本
由于瀏覽器對圖層的支持不同，所以首先要確定客戶端瀏覽器的類型。以下代碼可用于判斷客戶端的瀏覽器和html" class="wordstyle">asp"
以下是引用片段：
snap_preview_added="no">操作系統。 |
下面看一下網頁加載時需要添加的方法。有關網頁加載和初始化方法代碼如下：
//網頁加載調用initialize和getBrowserInfo方法 |
封裝lightbox類
初始化數據時，為每個可高亮顯示的鏈接創建了lightbox對象。該類的代碼具體實現如下：
var lightbox = Class.create(); |
提示：由于該對象比較復雜，讀者可以仔細參閱代碼的注釋部分。
服務器端代碼
服務器端首先獲得查詢中的“id”值，如果該值為null或為空，則設置為默認值。然后判斷該值，并且返回相應的一段字符串信息。處理請求的getInfohtml" class="wordstyle">jsp頁面代碼如下：
以下是引用片段：
<%@ page language="java" import="java.util.*"%> |
【責任編輯：城塵 TEL：(010) 68476636-8003】
]]>
]]>
在通常的BS軟件項目中，查詢助手使用頻率非常高，其功能是點擊圖標，頁面上元素的值為條件，到后臺查詢結果，彈出查詢結果對話框，選擇紀錄，關閉對話框，并且把你選擇的有關內容顯示到父頁面中指定的元素中。由于其友好的界面設計和操作性能，對用戶和設計開發人員都有很大的吸引力，但存在開發效率低，復用性差，復雜度較高等問題。
1.2 Ajax現狀和項目實踐
隨著Ajax的風靡全球，Google的推波助瀾，優秀的界面風格，局部刷新的全新感受，給人耳目一新的印象。但由于Ajax諸多javascript腳本和后臺應用的復雜性，使ajax的推廣困難重重，國內的應用大多都是玩具級，距項目實用還有不小的差距，包括Microsoft，IBM，SUN都在積極攻關研發，以提高項目開發的實用性，降低開發難度。為了使用ajax在項目的實用性，針對查詢助手功能的Ajax做了一些有益的嘗試，特別愿意和大家分享。
1.3 Ajax簡介
網上關于Ajax的文章汗牛充棟，具體的Ajax理論可以到網上搜索，這兒只做簡單介紹：
Ajax是Asynchronous JavaScript and XML的縮寫。Ajax并不是一門新的語言或技術,它實際上是幾項技術按一定的方式組合在一在同共的協作中發揮各自的作用，它包括：
Ø 使用XHTML和CSS標準化呈現
Ø 使用DOM實現動態顯示和交互
Ø 使用XML和XSLT進行數據交換與處理
Ø 使用XMLHttpRequest進行異步數據讀取;
Ø 使用JavaScript綁定和處理所有數據
Ajax的工作原理相當于在用戶和服務器之間加了—個中間層,使用戶操作與服務器響應異步化。并不是所有的用戶請求都提交給服務器,像—些數據驗證和數據處理等都交給Ajax引擎自己來做,只有確定需要從服務器讀取新數據時再由Ajax引擎代為向服務器提交請求。
2 Ajax查詢助手功能設計理念
查詢助手功能設計的的Ajax的設計主要集中在從前臺的jsp頁面提出Ajax請求，所有的Ajax請求都提交給查詢助手中間層，查詢助手中間層自動創建查詢助手具體實現類來實現查詢助手的具體查詢功能，查詢助手具體實現類實現數據庫查詢并組織傳回前臺數據文本。傳到前臺后自動選擇不同的JavaScript函數來解析數據，并顯示到頁面的Div或者直接顯示到頁面元素中。
3 Ajax實現詳述
3.1 Jsp前臺
在Jsp中，點擊查詢助手圖標，或者在輸入框中打回車鍵，則顯示如圖3-1界面，Ajax從后臺獲取數據顯示在前臺頁面上方，但此時頁面并未刷新，并且缺省單選按鈕選中第一行，第一行背景色為綠色。有兩種操作可以選擇：
1） 選擇是使用上下方向鍵來選擇紀錄，上下鍵移動時紀錄背景色自動改變，單選按鈕也自動選擇。當決定選擇某一行紀錄時，點擊回車鍵。
2） 選擇使用鼠標，當鼠標移動時，紀錄的背景色發生改變。
3） 當點擊回車鍵，或者點擊鼠標左鍵時則相關內容填充到具體的頁面元素中，并把輸入焦點自動下移到指定的輸入框，并關閉選擇界面。
4） 如果你不想選擇，也可以直接點擊選擇界面右上角的關閉圖標
具體代碼如下：
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創建查詢助手實現類對象，該對象實現了查詢助手接口（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>
<!—在系統初次啟動時，初始化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文本，數據封裝規則是紀錄間用“；”隔離，列之間用“，”隔離。同樣到前臺后使用相同的規則解析數據。
把文本數據分成若干行數據
var rows = responseText.split(";");
3.4 總結
Ajax實現查詢助手功能是Ajax在項目中實戰的一個小小的例子，根據以后的研發，將會產生更多更好的應用，本人在文檔的Ajax簡介部分引用了別的文檔的說明，在查詢助手的實現中借鑒了Google的Suggest設計理念，Suggest實現是直接從后臺傳來表格Frame，后臺定義顯示邏輯，在查詢助手的設計中，前臺來決定顯示邏輯，后臺僅提供數據，實現數據和顯示的分離，這樣就會造成前臺需要解析數據文本，處理顯示邏輯的Javascript函數，顯得前臺的JavaScript比較多，但我認為這是可以接受的，因為Ajax主要是前臺邏輯。另外，Ajax查詢助手的后臺實現采用了Spring Bean管理容器，只是為了后期擴展的方便性，借助Spring容器管理的強大功能，實現類似工廠模式的功能。
]]>