91成人短视频,一区二区三区免费看,亚洲欧洲国产日韩精品http://www.aygfsteel.com/WshmAndLily/category/25055.htmlzh-cnMon, 21 Apr 2008 22:38:08 GMTMon, 21 Apr 2008 22:38:08 GMT60AJAX基本框架http://www.aygfsteel.com/WshmAndLily/articles/194189.htmlsemovysemovySat, 19 Apr 2008 07:11:00 GMThttp://www.aygfsteel.com/WshmAndLily/articles/194189.htmlhttp://www.aygfsteel.com/WshmAndLily/comments/194189.htmlhttp://www.aygfsteel.com/WshmAndLily/articles/194189.html#Feedback0http://www.aygfsteel.com/WshmAndLily/comments/commentRss/194189.htmlhttp://www.aygfsteel.com/WshmAndLily/services/trackbacks/194189.html function getXMLHttpRequest()
{
 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;
}
//發(fā)送請(qǐng)求
/*
 @http_request 異步請(qǐng)求對(duì)象
 @url 請(qǐng)求位置
 @method 請(qǐng)求方法
 @content 請(qǐng)求內(nèi)容 eg. param1=xxx1&param2=xxx2
 @callBack 請(qǐng)求回調(diào)
*/
function send_request(http_request,url,method,content,callBack)
{
 if(!http_request)
 {
  alert('無(wú)法創(chuàng)建異步請(qǐng)求對(duì)象!');
  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('請(qǐng)求方法出錯(cuò)!');
  return;
 }
 http_request.send(content);
}
//返回文本的
function getWebContent()
{
 var webConReq = getXMLHttpRequest();//ajax不支持跨跨域訪問(wèn)
 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('請(qǐng)求失敗!');
   }
  }
 }
 );
}
//返回xml
function getXml()
{
 var webConReq = getXMLHttpRequest();//ajax不支持跨跨域訪問(wèn)
 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('請(qǐng)求失敗!');
   }
  }
 }
 );
}

  <a href="javascript:getWebContent();">異步獲取頁(yè)面</a> 
  <font id="pageCon"></font><br>
  <a href="javascript:getXml();">異步XML</a> 
  <font id="xml"></font>

]]>Windows關(guān)機(jī)效果分析http://www.aygfsteel.com/WshmAndLily/articles/148369.htmlsemovysemovyWed, 26 Sep 2007 08:39:00 GMThttp://www.aygfsteel.com/WshmAndLily/articles/148369.htmlhttp://www.aygfsteel.com/WshmAndLily/comments/148369.htmlhttp://www.aygfsteel.com/WshmAndLily/articles/148369.html#Feedback0http://www.aygfsteel.com/WshmAndLily/comments/commentRss/148369.htmlhttp://www.aygfsteel.com/WshmAndLily/services/trackbacks/148369.html基本原理分析

Windows關(guān)機(jī)效果分析

使用Windows系統(tǒng)的用戶在關(guān)機(jī)的時(shí)候，出現(xiàn)的界面只允許用戶選擇關(guān)機(jī)、注銷或取消動(dòng)作，而桌面上的程序都不能使用，并且屏幕呈現(xiàn)灰色狀態(tài)。

本例將仿照這種高亮顯示的效果在網(wǎng)頁(yè)上實(shí)現(xiàn).

在網(wǎng)頁(yè)上運(yùn)用這種關(guān)機(jī)效果有什么好處呢？首先，由于單擊某一鏈接后，將用戶此時(shí)不可用的操作隱藏在后臺(tái)，將可用的操作放在屏幕最上層，并高亮顯示，可以避免用戶的誤操作。其次，將信息高亮顯示，也可以提醒用戶應(yīng)該注意的事項(xiàng)。

網(wǎng)頁(yè)中實(shí)現(xiàn)關(guān)機(jī)效果分析

在網(wǎng)頁(yè)中實(shí)現(xiàn)這種效果的原理很簡(jiǎn)單。創(chuàng)建兩個(gè)圖層，一個(gè)為遮蓋層，覆蓋整個(gè)頁(yè)面，并且顯示為灰色；另一個(gè)圖層作為高亮顯示的部分，在遮蓋層的上方，這可通過(guò)設(shè)置圖層的z-index屬性來(lái)設(shè)置。當(dāng)取消關(guān)機(jī)效果后，只需將這兩個(gè)圖層元素在頁(yè)面中刪除即可。

以下代碼實(shí)現(xiàn)顯示關(guān)機(jī)效果。

以下是引用片段： 
<html>

            

            <head>

            

            <title>html" class="wordstyle">asp?typeid=119" snap_preview_added="no">Ajax LightBox Sample</title>

            

            <style type="text/html" class="wordstyle">asp?typeid=38" snap_preview_added="no">CSS">

            

            #lightbox {/*該層為高亮顯示層*/

            

            BORDER-RIGHT: #fff 1px solid;

            

            BORDER-TOP: #fff 1px solid;

            

            DISPLAY: block; 

            

            Z-INDEX: 9999; /*設(shè)置該層在網(wǎng)頁(yè)的最上端,設(shè)置足夠大*/

            

            BACKGROUND: #fdfce9; /*設(shè)置背景色*/

            

            LEFT: 50%; 

            

            MARGIN: -220px 0px 0px -250px; 

            

            BORDER-LEFT: #fff 1px solid; 

            

            WIDTH: 500px; 

            

            BORDER-BOTTOM: #fff 1px solid; 

            

            POSITION: absolute; 

            

            TOP: 50%; 

            

            HEIGHT: 400px; 

            

            TEXT-ALIGN: left

            

            }

            

            #overlay {/*該層為覆蓋層*/

            

            DISPLAY: block;

            

            Z-INDEX: 9998; /*設(shè)置高亮層的下方*/

            

            FILTER: alpha(opacity=80); /*設(shè)置成透明*/

            

            LEFT: 0px; 

            

            WIDTH: 100%; 

            

            POSITION: absolute; 

            

            TOP: 0px; 

            

            HEIGHT: 100%; 

            

            BACKGROUND-COLOR: #000; 

            

            moz-opacity: 0.8; 

            

            opacity: .80

            

            }

            

            </style>

            

            </head>

            

            <body>

            

            <!--該層為覆蓋層 -->

            

            <div id="overlay"></div>

            

            <!--該層為高亮顯示層 -->

            

            <div id="lightbox"></div>

            

            </body>

            

            </html>


需要注意的是，在IE瀏覽器中如果有<select>標(biāo)記，則該標(biāo)記不能被覆蓋層覆蓋，但在其他瀏覽器中則可以覆蓋。

在使用IE瀏覽器時(shí)，要先將網(wǎng)頁(yè)中的<select>元素隱藏起來(lái)。如以下代碼可以用于隱藏頁(yè)面所有的<select>元素。

selects = document.getElementsByTagName('select');

以下是引用片段： 
for(i = 0; i < selects.length; i++) {

            

            selects[i].style.visibility = visibility;

            

            }
代碼實(shí)現(xiàn)

客戶端代碼

客戶端的頁(yè)面上有兩個(gè)鏈接，用戶單擊鏈接后，向服務(wù)器端發(fā)送請(qǐng)求，并將返回信息顯示到高亮層上。客戶端的網(wǎng)頁(yè)文件代碼如下所示：

以下是引用片段： 
<html>

            

            <head>

            

            <title>AJAX LightBox</title>

            

            <!-- 本例使用的css樣式表文件-->

            

            <LINK href="lightbox.css" type=text/css rel=stylesheet>

            

            <!--prototype類文件-->

            

            <script type="text/html" class="wordstyle">asp?typeid=36" snap_preview_added="no">html" class="wordstyle">

            

            javascript" src="js/prototype.js" ></script>

            

            <!--本例使用的html" class="wordstyle">javascript代碼-->

            

            <script type="text/html" class="wordstyle">javascript" src="lightbox.js" ></script>

            

            </head>

            

            <body>

            

            <DIV id=container>

            

            <UL>

            

            <LI><A class=lbOn href="getInfo.html" class="wordstyle">jsp?id=one">One</A> 

            

            </LI>

            

            <LI><A class=lbOn href="getInfo.html" class="wordstyle">jsp?id=two">Two</A> 

            

            </LI>

            

            </UL>

            

            </div>

            

            </body>

            

            </html>


另外，還需要設(shè)置該頁(yè)面所使用CSS樣式。lightbox.css樣式表文件代碼如下所示：

以下是引用片段： 
#lightbox {

            

            BORDER-RIGHT: #fff 1px solid;

            

            BORDER-TOP: #fff 1px solid;

            

            DISPLAY: none; 

            

            Z-INDEX: 9999; 

            

            BACKGROUND: #fdfce9; 

            

            LEFT: 50%; 

            

            MARGIN: -220px 0px 0px -250px; 

            

            BORDER-LEFT: #fff 1px solid; 

            

            WIDTH: 500px; 

            

            BORDER-BOTTOM: #fff 1px solid; 

            

            POSITION: absolute; 

            

            TOP: 50%; 

            

            HEIGHT: 400px; 

            

            TEXT-ALIGN: left

            

            }

            

            UNKNOWN {

            

            POSITION: fixed

            

            }

            

            #overlay {

            

            DISPLAY: none;

            

            Z-INDEX: 5000; FILTER: alpha(opacity=80); 

            

            LEFT: 0px; 

            

            WIDTH: 100%; 

            

            POSITION: absolute; 

            

            TOP: 0px; 

            

            HEIGHT: 100%; 

            

            BACKGROUND-COLOR: #000; moz-opacity: 0.8; opacity: .80

            

            }

            

            UNKNOWN {

            

            POSITION: fixed

            

            }

            

            .done#lightbox #lbLoadMessage {

            

            DISPLAY: none

            

            }

            

            .done#lightbox #lbContent {

            

            DISPLAY: block

            

            }

            

            .loading#lightbox #lbContent {

            

            DISPLAY: none

            

            }

            

            .loading#lightbox #lbLoadMessage {

            

            DISPLAY: block

            

            }

            

            .done#lightbox IMG {

            

            WIDTH: 100%; HEIGHT: 100%

            

            }


客戶端腳本

由于瀏覽器對(duì)圖層的支持不同，所以首先要確定客戶端瀏覽器的類型。以下代碼可用于判斷客戶端的瀏覽器和html" class="wordstyle">asp"

以下是引用片段： 
snap_preview_added="no">操作系統(tǒng)。

            

            var detect = navigator.userAgent.toLowerCase();

            

            var OS,browser,version,total,thestring;

            

            function getBrowserInfo() {

            

            if (checkIt('konqueror')) {

            

            browser = "Konqueror";

            

            OS = "html" class="wordstyle">asp?typeid=60" snap_preview_added="no">Linux";

            

            }

            

            else if (checkIt('safari')) browser = "Safari"

            

            else if (checkIt('omniWeb')) browser = "OmniWeb"

            

            else if (checkIt('opera')) browser = "Opera"

            

            else if (checkIt('Webtv')) browser = "WebTV";

            

            else if (checkIt('icab')) browser = "iCab"

            

            else if (checkIt('msie')) browser = "Internet Explorer"

            

            else if (!checkIt('compatible')) {

            

            browser = "Netscape Navigator"

            

            version = detect.charAt(8);

            

            }

            

            else browser = "An unknown browser";

            

            if (!version) version = detect.charAt(place + thestring.length);

            

            if(!OS) {

            

            if (checkIt('linux')) OS = "Linux";

            

            else if (checkIt('x11')) OS = "Unix";

            

            else if (checkIt('mac')) OS = "Mac"

            

            else if (checkIt('win')) OS = "Windows"

            

            else OS = "an unknown operating system";

            

            }

            

            }

            

            function checkIt(string) {

            

            place = detect.indexOf(string) + 1;

            

            thestring = string;

            

            return place;

            

            }


下面看一下網(wǎng)頁(yè)加載時(shí)需要添加的方法。有關(guān)網(wǎng)頁(yè)加載和初始化方法代碼如下： 
//網(wǎng)頁(yè)加載調(diào)用initialize和getBrowserInfo方法

            

            Event.observe(window, 'load', initialize, false);

            

            Event.observe(window, 'load', getBrowserInfo, false);

            

            //未加載時(shí)清空緩存

            

            Event.observe(window, 'unload', Event.unloadCache, false);

            

            //初始化方法

            

            function initialize(){

            

            //調(diào)用該方法為該頁(yè)添加覆蓋層和高亮顯示層

            

            addLightboxMarkup();

            

            //為每個(gè)可高亮顯示的元素創(chuàng)建lightbox對(duì)象

            

            lbox = document.getElementsByClassName('lbOn');

            

            for(i = 0; i < lbox.length; i++) {

            

            valid = new lightbox(lbox[i]);

            

            }

            

            }

            

            // 使用Dom方法創(chuàng)建覆蓋層和高亮層

            

            function addLightboxMarkup() {

            

            bod = document.getElementsByTagName('body')[0];

            

            overlay = document.createElement('div');

            

            overlay.id = 'overlay';

            

            lb = document.createElement('div');

            

            lb.id = 'lightbox';

            

            lb.className = 'loading';

            

            lb.innerHTML = '<div id="lbLoadMessage">' +

            

            '<p>Loading</p>' +

            

            '</div>';

            

            bod.appendChild(overlay);

            

            bod.appendChild(lb);

            

            }


封裝lightbox類

初始化數(shù)據(jù)時(shí)，為每個(gè)可高亮顯示的鏈接創(chuàng)建了lightbox對(duì)象。該類的代碼具體實(shí)現(xiàn)如下： 
var lightbox = Class.create();  

            

            lightbox.prototype = {

            

            yPos : 0,

            

            xPos : 0,

            

            //構(gòu)造方法,ctrl為創(chuàng)建該對(duì)象的元素

            

            initialize: function(ctrl) {

            

            //將該元素的鏈接賦值給this.content

            

            this.content = ctrl.href;

            

            //為該元素添加onclick事件activate方法

            

            Event.observe(ctrl, 'click', this.activate.bindAsEventListener(this), false);

            

            ctrl.onclick = function(){return false;};

            

            },

            

            //當(dāng)單擊鏈接時(shí)

            

            activate: function(){

            

            if (browser == 'Internet Explorer'){//判斷為IE瀏覽器

            

            this.getScroll();

            

            this.prepareIE('100%', 'hidden');

            

            this.setScroll(0,0);

            

            this.hideSelects('hidden');//隱藏所有的<select>標(biāo)記

            

            }

            

            //調(diào)用該類中的displayLightbox方法

            

            this.displayLightbox("block");

            

            },

            

            prepareIE: function(height, overflow){

            

            bod = document.getElementsByTagName('body')[0];

            

            bod.style.height = height;

            

            bod.style.overflow = overflow;

            

            

            

            htm = document.getElementsByTagName('html')[0];

            

            htm.style.height = height;

            

            htm.style.overflow = overflow; 

            

            },

            

            hideSelects: function(visibility){

            

            selects = document.getElementsByTagName('select');

            

            for(i = 0; i < selects.length; i++) {

            

            selects[i].style.visibility = visibility;

            

            }

            

            },

            

            getScroll: function(){

            

            if (self.pageYOffset) {

            

            this.yPos = self.pageYOffset;

            

            } else if (document.documentElement && document.documentElement.scrollTop){

            

            this.yPos = document.documentElement.scrollTop; 

            

            } else if (document.body) {

            

            this.yPos = document.body.scrollTop;

            

            }

            

            },

            

            setScroll: function(x, y){

            

            window.scrollTo(x, y); 

            

            },

            

            displayLightbox: function(display){

            

            //將覆蓋層顯示

            

            $('overlay').style.display = display;

            

            //將高亮層顯示

            

            $('lightbox').style.display = display;

            

            //如果不是隱藏狀態(tài),則調(diào)用該類中的loadInfo方法

            

            if(display != 'none') this.loadInfo();

            

            },

            

            //該方法發(fā)送Ajax請(qǐng)求

            

            loadInf function() {

            

            //當(dāng)請(qǐng)求完成后調(diào)用本類中processInfo方法

            

            var myAjax = new Ajax.Request(

            

            this.content,

            

            {method: 'get', parameters: "", onComplete: this.processInfo.bindAsEvent Listener (this)}

            

            );

            

            },

            

            // 將返回的文本信息顯示到高亮層上

            

            processInf function(response){

            

            //獲得返回的文本數(shù)據(jù)

            

            var result = response.responseText;

            

            //顯示到高亮層

            

            info = "<div id='lbContent'>" + result + "</div>";

            

            //在info元素前插入一個(gè)元素

            

            new Insertion.Before($('lbLoadMessage'), info)

            

            //改變?cè)撛氐腸lass name的值

            

            $('lightbox').className = "done"; 

            

            //調(diào)用本類中actions方法

            

            this.actions();

            

            var ctrl=$('lightbox');

            

            //為高亮層添加事件處理方法reset

            

            Event.observe(ctrl, 'click', this.reset.bindAsEventListener(this), false);

            

            ctrl.onclick = function(){return false;};

            

            },

            

            //恢復(fù)初始狀態(tài) 

            

            reset:function(){

            

            //隱藏覆蓋層

            

            $('overlay').style.display="none";

            

            //清空返回?cái)?shù)據(jù)

            

            $('lbContent').innerHTML="";

            

            //隱藏高亮層

            

            $('lightbox').style.display="none";

            

            },

            

            // Search through new links within the lightbox, and attach click event

            

            actions: function(){

            

            lbActions = document.getElementsByClassName('lbAction');

            

            for(i = 0; i < lbActions.length; i++) {

            

            Event.observe(lbActions[i], 'click', 

            

            this[lbActions[i].rel].bindAs EventListener(this), false);

            

            lbActions[i].onclick = function(){return false;};

            

            }

            

            }

            

            }


提示：由于該對(duì)象比較復(fù)雜，讀者可以仔細(xì)參閱代碼的注釋部分。

服務(wù)器端代碼

服務(wù)器端首先獲得查詢中的“id”值，如果該值為null或?yàn)榭眨瑒t設(shè)置為默認(rèn)值。然后判斷該值，并且返回相應(yīng)的一段字符串信息。處理請(qǐng)求的getInfohtml" class="wordstyle">jsp頁(yè)面代碼如下：

以下是引用片段： 
<%@ page language="java" import="java.util.*"%>

            

            <%

            

            //獲得請(qǐng)求中id的值

            

            String imgID = request.getParameter("id");

            

            if (imgID==null||imgID.equals(""))//如果為null或?yàn)榭?br />
            

            imgID="one";//設(shè)定為默認(rèn)值

            

            if ( imgID.equals("one"))//如果為one

            

            {

            

            %>

            

            <h3 id="cartitle" style="border-bottom: 1px solid #C0C0C0; margin-bottom: -5px">Porsche Carrera GT</h3>

            

            <p>The Carrera GT has a 5.7 litre V10 internal combustion engine that produces 

            

            605 SAE horsepower (451 kW). Porsche claims it will accelerate from 0 to 100 

            

            km/h (62 mph) in 3.9 seconds and has a maximum speed of 330 km/h (204 mph). 

            

            With 605 hp, the car weighs 1,380 kg (3,042 lb). The Carrera GT is only 

            

            offered with a six-speed manual transmission, in contrast to its rival the 

            

            Ferrari Enzo that is only offered with sequential manual transmission. Also 

            

            the Carrera GT is significantly less expensive than the Ferrari Enzo. The 

            

            Ferrari Enzo is priced around $660,000 to the Carrera GT's $440,000. The 

            

            Carrera GT is known for its high quality and reliability which makes it one of 

            

            the best supercars ever.

            

            <%}else{//否則

            

            %>

            

            <h3 id="cartitle" style="border-bottom: 1px solid #C0C0C0; margin-bottom: -5px">Ferrari Testarossa</h3>

            

            <p>The Ferrari Testarossa is an V12 mid-engined sports car made by Ferrari. 

            

            The name, which means &quot;red head&quot;, comes from the red painted cylinder heads on 

            

            the flat-12 engine. The engine was technically a 180?V engine since it shared 

            

            flat-plane crankshaft pins with opposing cylinders. Output was 390 hp (291 

            

            kW), and the car won many comparison tests and admirers - it was featured on 

            

            the cover of Road &amp; Track magazine nine times in just five years. Almost 

            

            10,000 Testarossas, 512TRs, and 512Ms were produced, making this one of the 

            

            most common Ferrari models despite its high price and exotic design.

            

            <%}%>

            

            html" class="wordstyle">aspx" snap_preview_added="spa" snap_icon_added="spa" act_suffix ic

【責(zé)任編輯：城塵 TEL：(010) 68476636-8003】


]]>prototype.js　1.4版開發(fā)者手冊(cè)(強(qiáng)烈推薦) http://www.aygfsteel.com/WshmAndLily/articles/147091.htmlsemovysemovyFri, 21 Sep 2007 05:58:00 GMThttp://www.aygfsteel.com/WshmAndLily/articles/147091.htmlhttp://www.aygfsteel.com/WshmAndLily/comments/147091.htmlhttp://www.aygfsteel.com/WshmAndLily/articles/147091.html#Feedback0http://www.aygfsteel.com/WshmAndLily/comments/commentRss/147091.htmlhttp://www.aygfsteel.com/WshmAndLily/services/trackbacks/147091.html閱讀全文

]]>查詢助手功能介紹http://www.aygfsteel.com/WshmAndLily/articles/144118.htmlsemovysemovyMon, 10 Sep 2007 15:22:00 GMThttp://www.aygfsteel.com/WshmAndLily/articles/144118.htmlhttp://www.aygfsteel.com/WshmAndLily/comments/144118.htmlhttp://www.aygfsteel.com/WshmAndLily/articles/144118.html#Feedback0http://www.aygfsteel.com/WshmAndLily/comments/commentRss/144118.htmlhttp://www.aygfsteel.com/WshmAndLily/services/trackbacks/144118.html 1.1 查詢助手功能介紹
在通常的BS軟件項(xiàng)目中，查詢助手使用頻率非常高，其功能是點(diǎn)擊圖標(biāo)，頁(yè)面上元素的值為條件，到后臺(tái)查詢結(jié)果，彈出查詢結(jié)果對(duì)話框，選擇紀(jì)錄，關(guān)閉對(duì)話框，并且把你選擇的有關(guān)內(nèi)容顯示到父頁(yè)面中指定的元素中。由于其友好的界面設(shè)計(jì)和操作性能，對(duì)用戶和設(shè)計(jì)開發(fā)人員都有很大的吸引力，但存在開發(fā)效率低，復(fù)用性差，復(fù)雜度較高等問(wèn)題。

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并不是一門新的語(yǔ)言或技術(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引擎自己來(lái)做,只有確定需要從服務(wù)器讀取新數(shù)據(jù)時(shí)再由Ajax引擎代為向服務(wù)器提交請(qǐng)求。





2 Ajax查詢助手功能設(shè)計(jì)理念
查詢助手功能設(shè)計(jì)的的Ajax的設(shè)計(jì)主要集中在從前臺(tái)的jsp頁(yè)面提出Ajax請(qǐng)求，所有的Ajax請(qǐng)求都提交給查詢助手中間層，查詢助手中間層自動(dòng)創(chuàng)建查詢助手具體實(shí)現(xiàn)類來(lái)實(shí)現(xiàn)查詢助手的具體查詢功能，查詢助手具體實(shí)現(xiàn)類實(shí)現(xiàn)數(shù)據(jù)庫(kù)查詢并組織傳回前臺(tái)數(shù)據(jù)文本。傳到前臺(tái)后自動(dòng)選擇不同的JavaScript函數(shù)來(lái)解析數(shù)據(jù)，并顯示到頁(yè)面的Div或者直接顯示到頁(yè)面元素中。

3 Ajax實(shí)現(xiàn)詳述
3.1 Jsp前臺(tái)
在Jsp中，點(diǎn)擊查詢助手圖標(biāo)，或者在輸入框中打回車鍵，則顯示如圖3-1界面，Ajax從后臺(tái)獲取數(shù)據(jù)顯示在前臺(tái)頁(yè)面上方，但此時(shí)頁(yè)面并未刷新，并且缺省單選按鈕選中第一行，第一行背景色為綠色。有兩種操作可以選擇：



1） 選擇是使用上下方向鍵來(lái)選擇紀(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)容填充到具體的頁(yè)面元素中，并把輸入焦點(diǎn)自動(dòng)下移到指定的輸入框，并關(guān)閉選擇界面。

4） 如果你不想選擇，也可以直接點(diǎn)擊選擇界面右上角的關(guān)閉圖標(biāo)

具體代碼如下：

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 ;//回填頁(yè)面元素?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">沒(méi)有符合條件的記錄，點(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)是第一頁(yè)了\´);}else{´+prePageFunction+´} ">上一頁(yè)</a>´;
displayStr += ´<font class="sfont"> | 第´+pageParams[2]+´頁(yè) | </font> ´;
displayStr += ´<a href="javascript:if(´+nextPageNo+´ > ´+pageParams[1]+´){alert(\´已經(jīng)是最后一頁(yè)了\´); }else{´+nextPageFunction+´}">下一頁(yè)</a>´;
displayStr += ´<font class="sfont"> | 共´+pageParams[1]+´頁(yè) | 共´+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();
}

/*具體放大鏡頁(yè)面處理方法*/
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ù)來(lái)處理傳回的數(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">沒(méi)有符合條件的記錄，點(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)處理程序，則必須指定要返回的頁(yè)面。而使用Servlet則沒(méi)有這個(gè)要求。默認(rèn)返回到請(qǐng)求頁(yè)面。而這個(gè)查詢助手Servlet接受所有的查詢助手請(qǐng)求，根據(jù)前臺(tái)傳來(lá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 在Ｗｅｂ．ｘｍｌ中配置查詢助手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ì)錄后回顯的頁(yè)面元素，如：orgId,orgName,orgCode

valueIndexs：對(duì)應(yīng)回顯頁(yè)面元素，紀(jì)錄的列序號(hào)，如 0,2,1

nextPos：選擇結(jié)束后要把輸入焦點(diǎn)，移動(dòng)到下一個(gè)頁(yè)面元素名稱

固定參數(shù)后面的參數(shù)，不同的查詢助手有不同參數(shù)列表，主要是條件數(shù)據(jù)。

3.3.2 查詢助手選擇界面的表頭設(shè)計(jì)：
不同的查詢助手選擇界面有不同的表頭，我們使用js的全局?jǐn)?shù)組變量來(lái)存儲(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)傳來(lái)的數(shù)據(jù)：
3.3.3.1.1 接受數(shù)據(jù)：
var responseText = xmlHttp.responseText;

3.3.3.1.2 查詢無(wú)紀(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">沒(méi)有符合條件的記錄，點(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)介部分引用了別的文檔的說(shuō)明，在查詢助手的實(shí)現(xiàn)中借鑒了Google的Suggest設(shè)計(jì)理念，Suggest實(shí)現(xiàn)是直接從后臺(tái)傳來(lái)表格Frame，后臺(tái)定義顯示邏輯，在查詢助手的設(shè)計(jì)中，前臺(tái)來(lá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)類似工廠模式的功能。

]]> 主站蜘蛛池模板： 乳源| 南京市| 西充县| 石泉县| 泸溪县| 莎车县| 东丽区| 章丘市| 灌南县| 万安县| 中阳县| 布尔津县| 通州市| 青河县| 双流县| 牙克石市| 永泰县| 紫阳县| 通州市| 祥云县| 永和县| 井冈山市| 曲靖市| 启东市| 当阳市| 谢通门县| 南汇区| 安远县| 甘孜县| 达孜县| 东源县| 眉山市| 冷水江市| 陆河县| 陆丰市| 青田县| 土默特左旗| 江永县| 静安区| 翼城县| 镇雄县|