Ajax实现查询助手（Query Helper）

Ajax实现查询助手（Query Helper）<o:p></o:p>

1       概述

1.1    查询助手功能介绍

在通常的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引擎代为向服务器提交请求。

<o:p> </o:p>

<o:p> </o:p>

2       Ajax查询助手功能设计理念

查询助手功能设计的的Ajax的设计主要集中在从前台的jsp页面提出Ajax请求，所有的Ajax请求都提交给查询助手中间层，查询助手中间层自动创建查询助手具体实现类来实现查询助手的具体查询功能，查询助手具体实现类实现数据库查询并组织传回前台数据文本。传到前台后自动选择不同的JavaScript函数来解析数据，并显示到页面的Div或者直接显示到页面元素中。

2.1    Ajax实现查询助手功能示意图如下：

<v:shapetype o:spt="75" coordsize="21600,21600" filled="f" stroked="f" id="_x0000_t75" path="m@4@5l@4@11@9@11@9@5xe" o:preferrelative="t"><v:stroke joinstyle="miter"></v:stroke><v:formulas><v:f eqn="if lineDrawn pixelLineWidth 0"></v:f><v:f eqn="sum @0 1 0"></v:f><v:f eqn="sum 0 0 @1"></v:f><v:f eqn="prod @2 1 2"></v:f><v:f eqn="prod @3 21600 pixelWidth"></v:f><v:f eqn="prod @3 21600 pixelHeight"></v:f><v:f eqn="sum @0 0 1"></v:f><v:f eqn="prod @6 1 2"></v:f><v:f eqn="prod @7 21600 pixelWidth"></v:f><v:f eqn="sum @8 21600 0"></v:f><v:f eqn="prod @7 21600 pixelHeight"></v:f><v:f eqn="sum @10 21600 0"></v:f></v:formulas><v:path o:extrusionok="f" o:connecttype="rect" gradientshapeok="t"></v:path><o:lock v:ext="edit" aspectratio="t"></o:lock></v:shapetype><v:shape id="_x0000_i1025" type="#_x0000_t75" o:ole="" style="WIDTH: 330pt; HEIGHT: 231.75pt"><v:imagedata src="file:///C:\DOCUME~1\ADMINI~1\LOCALS~1\Temp\msohtml1\01\clip_image001.emz" o:title=""></v:imagedata></v:shape>

3       Ajax实现详述

3.1    Jsp前台

在Jsp中，点击查询助手图标，或者在输入框中打回车键，则显示如图3-1界面，Ajax从后台获取数据显示在前台页面上方，但此时页面并未刷新，并且缺省单选按钮选中第一行，第一行背景色为绿色。有两种操作可以选择：

<o:p> </o:p>

1）  选择是使用上下方向键来选择纪录，上下键移动时纪录背景色自动改变，单选按钮也自动选择。当决定选择某一行纪录时，点击回车键。

2）  选择使用鼠标，当鼠标移动时，纪录的背景色发生改变。

3）  当点击回车键，或者点击鼠标左键时则相关内容填充到具体的页面元素中，并把输入焦点自动下移到指定的输入框，并关闭选择界面。

4）  如果你不想选择，也可以直接点击选择界面右上角的关闭图标

<v:shape id="_x0000_i1026" type="#_x0000_t75" style="WIDTH: 415.5pt; HEIGHT: 279.75pt"><v:imagedata src="file:///C:\DOCUME~1\ADMINI~1\LOCALS~1\Temp\msohtml1\01\clip_image003.png" o:title=""></v:imagedata></v:shape>

图3-1

如果查询结果为没有纪录，则：

<o:p> </o:p>

图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>

<o:p> </o:p>

组织机构查询助手：<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] = "&nbsp;";
            }
            _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);
}

<o:p> </o:p>

3.1.1.2       Css文件内容：

<o:p> </o:p>

/* 界面样式 */

.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