亚洲国产成人精品无码一区二区 ,亚洲日本国产精华液,亚洲六月丁香六月婷婷色伊人http://m.tkk7.com/WshmAndLily/category/25055.htmlzh-cnMon, 21 Apr 2008 22:38:08 GMTMon, 21 Apr 2008 22:38:08 GMT60AJAX基本框架http://m.tkk7.com/WshmAndLily/articles/194189.htmlsemovysemovySat, 19 Apr 2008 07:11:00 GMThttp://m.tkk7.com/WshmAndLily/articles/194189.htmlhttp://m.tkk7.com/WshmAndLily/comments/194189.htmlhttp://m.tkk7.com/WshmAndLily/articles/194189.html#Feedback0http://m.tkk7.com/WshmAndLily/comments/commentRss/194189.htmlhttp://m.tkk7.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://m.tkk7.com/WshmAndLily/articles/148369.htmlsemovysemovyWed, 26 Sep 2007 08:39:00 GMThttp://m.tkk7.com/WshmAndLily/articles/148369.htmlhttp://m.tkk7.com/WshmAndLily/comments/148369.htmlhttp://m.tkk7.com/WshmAndLily/articles/148369.html#Feedback0http://m.tkk7.com/WshmAndLily/comments/commentRss/148369.htmlhttp://m.tkk7.com/WshmAndLily/services/trackbacks/148369.html基本原理分析

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

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

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

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

客戶(hù)端代碼

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

以下是引用片段： 
<html>

            

            <head>

            

            <title>AJAX LightBox</title>

            

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

            

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

            

            <!--prototype類(lèi)文件-->

            

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

            

            }


客戶(hù)端腳本

由于瀏覽器對(duì)圖層的支持不同，所以首先要確定客戶(hù)端瀏覽器的類(lèi)型。以下代碼可用于判斷客戶(hù)端的瀏覽器和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類(lèi)

初始化數(shù)據(jù)時(shí)，為每個(gè)可高亮顯示的鏈接創(chuàng)建了lightbox對(duì)象。該類(lèi)的代碼具體實(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)用該類(lèi)中的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)用該類(lèi)中的loadInfo方法

            

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

            

            },

            

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

            

            loadInf function() {

            

            //當(dāng)請(qǐng)求完成后調(diào)用本類(lèi)中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)用本類(lèi)中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ù)器端首先獲得查詢(xún)中的“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版開(kāi)發(fā)者手冊(cè)(強(qiáng)烈推薦) http://m.tkk7.com/WshmAndLily/articles/147091.htmlsemovysemovyFri, 21 Sep 2007 05:58:00 GMThttp://m.tkk7.com/WshmAndLily/articles/147091.htmlhttp://m.tkk7.com/WshmAndLily/comments/147091.htmlhttp://m.tkk7.com/WshmAndLily/articles/147091.html#Feedback0http://m.tkk7.com/WshmAndLily/comments/commentRss/147091.htmlhttp://m.tkk7.com/WshmAndLily/services/trackbacks/147091.html閱讀全文

]]>查詢(xún)助手功能介紹http://m.tkk7.com/WshmAndLily/articles/144118.htmlsemovysemovyMon, 10 Sep 2007 15:22:00 GMThttp://m.tkk7.com/WshmAndLily/articles/144118.htmlhttp://m.tkk7.com/WshmAndLily/comments/144118.htmlhttp://m.tkk7.com/WshmAndLily/articles/144118.html#Feedback0http://m.tkk7.com/WshmAndLily/comments/commentRss/144118.htmlhttp://m.tkk7.com/WshmAndLily/services/trackbacks/144118.html 1.1 查詢(xún)助手功能介紹
在通常的BS軟件項(xiàng)目中，查詢(xún)助手使用頻率非常高，其功能是點(diǎn)擊圖標(biāo)，頁(yè)面上元素的值為條件，到后臺(tái)查詢(xún)結(jié)果，彈出查詢(xún)結(jié)果對(duì)話(huà)框，選擇紀(jì)錄，關(guān)閉對(duì)話(huà)框，并且把你選擇的有關(guān)內(nèi)容顯示到父頁(yè)面中指定的元素中。由于其友好的界面設(shè)計(jì)和操作性能，對(duì)用戶(hù)和設(shè)計(jì)開(kāi)發(fā)人員都有很大的吸引力，但存在開(kāi)發(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)目開(kāi)發(fā)的實(shí)用性，降低開(kāi)發(fā)難度。為了使用ajax在項(xiàng)目的實(shí)用性，針對(duì)查詢(xún)助手功能的Ajax做了一些有益的嘗試，特別愿意和大家分享。

1.3 Ajax簡(jiǎn)介
網(wǎng)上關(guān)于Ajax的文章汗牛充棟，具體的Ajax理論可以到網(wǎng)上搜索，這兒只做簡(jiǎn)單介紹：

Ajax是Asynchronous JavaScript and XML的縮寫(xiě)。Ajax并不是一門(mén)新的語(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)于在用戶(hù)和服務(wù)器之間加了—個(gè)中間層,使用戶(hù)操作與服務(wù)器響應(yīng)異步化。并不是所有的用戶(hù)請(qǐng)求都提交給服務(wù)器,像—些數(shù)據(jù)驗(yàn)證和數(shù)據(jù)處理等都交給Ajax引擎自己來(lái)做,只有確定需要從服務(wù)器讀取新數(shù)據(jù)時(shí)再由Ajax引擎代為向服務(wù)器提交請(qǐng)求。





2 Ajax查詢(xún)助手功能設(shè)計(jì)理念
查詢(xún)助手功能設(shè)計(jì)的的Ajax的設(shè)計(jì)主要集中在從前臺(tái)的jsp頁(yè)面提出Ajax請(qǐng)求，所有的Ajax請(qǐng)求都提交給查詢(xún)助手中間層，查詢(xún)助手中間層自動(dòng)創(chuàng)建查詢(xún)助手具體實(shí)現(xiàn)類(lèi)來(lái)實(shí)現(xiàn)查詢(xún)助手的具體查詢(xún)功能，查詢(xún)助手具體實(shí)現(xiàn)類(lèi)實(shí)現(xiàn)數(shù)據(jù)庫(kù)查詢(xún)并組織傳回前臺(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)擊查詢(xún)助手圖標(biāo)，或者在輸入框中打回車(chē)鍵，則顯示如圖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)擊回車(chē)鍵。

2） 選擇使用鼠標(biāo)，當(dāng)鼠標(biāo)移動(dòng)時(shí)，紀(jì)錄的背景色發(fā)生改變。

3） 當(dāng)點(diǎn)擊回車(chē)鍵，或者點(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)查詢(xún)助手：<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)//回車(chē)鍵
{
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] = "單位名稱(chēng)";
tableHead[3] = "單位英文名稱(chēng)";

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)擊查詢(xún)助手圖標(biāo)時(shí)（例如查詢(xún)組織機(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] = "單位名稱(chēng)";

tableHead[3] = "單位英文名稱(chēng)";



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ù)的名稱(chēng)不要改變，因?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++)

{

//在查詢(xún)助手表格顯示時(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;

}

//如果未查詢(xún)到紀(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();



}

//顯示查詢(xún)助手

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è)查詢(xún)助手Servlet接受所有的查詢(xún)助手請(qǐng)求，根據(jù)前臺(tái)傳來(lái)的查詢(xún)助手實(shí)現(xiàn)類(lèi)名稱(chēng)參數(shù)，由Spring創(chuàng)建查詢(xún)助手實(shí)現(xiàn)類(lèi)對(duì)象，該對(duì)象實(shí)現(xiàn)了查詢(xún)助手接口（MaginfierInterface），從而獲取返回值文本。返回到前臺(tái)。

3.2.1 具體代碼如下：
3.2.1.1 查詢(xún)助手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 在Ｗｅｂ．ｘｍｌ中配置查詢(xún)助手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 查詢(xún)助手具體實(shí)現(xiàn)類(lèi)
3.2.1.3.1 實(shí)現(xiàn)查詢(xú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 查詢(xún)助手函數(shù)參數(shù)設(shè)計(jì)：
固定參數(shù)：serverPath, divName, iFrameName, posNames,valueIndexs, nextPos

serverPath：表示webserver的地址，如：/myapp

divName：顯示選擇界面的Div名稱(chēng)

iFrameName：顯示選擇界面的Ifranme名稱(chēng)，因?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è)面元素名稱(chēng)

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

3.3.2 查詢(xún)助手選擇界面的表頭設(shè)計(jì)：
不同的查詢(xún)助手選擇界面有不同的表頭，我們使用js的全局?jǐn)?shù)組變量來(lái)存儲(chǔ)，每個(gè)查詢(xún)助手使用前都先清空表頭數(shù)組，使用splice(0, len)

len = tableHead.length;

tableHead.splice(0, len);

tableHead[0] = "外部賬戶(hù)ID";

tableHead[1] = "外部賬戶(hù)編號(hào)";

tableHead[2] = "外部賬戶(hù)名稱(chēng)";

tableHead[3] = "外部銀行名稱(chēng)";

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 查詢(xún)無(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)閉查詢(xún)助手選擇界面。

Onclick 表示響應(yīng)鼠標(biāo)點(diǎn)擊

3.3.3.1.3 顯示查詢(xún)結(jié)果：
因?yàn)槲覀冊(cè)诤笈_(tái)把查詢(xún)數(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)查詢(xún)助手功能是Ajax在項(xiàng)目中實(shí)戰(zhàn)的一個(gè)小小的例子，根據(jù)以后的研發(fā)，將會(huì)產(chǎn)生更多更好的應(yīng)用，本人在文檔的Ajax簡(jiǎn)介部分引用了別的文檔的說(shuō)明，在查詢(xún)助手的實(shí)現(xiàn)中借鑒了Google的Suggest設(shè)計(jì)理念，Suggest實(shí)現(xiàn)是直接從后臺(tái)傳來(lái)表格Frame，后臺(tái)定義顯示邏輯，在查詢(xún)助手的設(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查詢(xún)助手的后臺(tái)實(shí)現(xiàn)采用了Spring Bean管理容器，只是為了后期擴(kuò)展的方便性，借助Spring容器管理的強(qiáng)大功能，實(shí)現(xiàn)類(lèi)似工廠模式的功能。

]]> 主站蜘蛛池模板： 亚洲欧美日韩综合久久久| 免费鲁丝片一级观看| 一区二区三区在线免费| 亚洲va精品中文字幕| 亚洲av无码一区二区三区网站| 日韩免费观看一级毛片看看| 精品一区二区三区无码免费视频| 一级特黄录像视频免费| 亚洲 暴爽 AV人人爽日日碰| 亚洲人成在线电影| 在线精品亚洲一区二区小说| 国产婷婷高清在线观看免费| 一个人在线观看视频免费| 精品国产污污免费网站| 国产99久久久国产精免费| 怡红院亚洲红怡院在线观看| 精品国产日韩久久亚洲| 亚洲国产精品成人久久久| 亚洲男人第一av网站| 国产亚洲成av人片在线观看| 亚洲一级Av无码毛片久久精品| 国产在线a不卡免费视频| 成人免费无毒在线观看网站| 97国产免费全部免费观看| 99国产精品视频免费观看| 日本高清免费观看| 国产午夜不卡AV免费| 国产精品免费视频观看拍拍| 一区二区3区免费视频| 窝窝影视午夜看片免费| 午夜在线免费视频 | 亚洲国产成人一区二区精品区| 亚洲第一区精品观看| 俄罗斯极品美女毛片免费播放| 永久黄网站色视频免费直播| 免费精品人在线二线三线区别| 免费观看激色视频网站(性色)| 91久久精品国产免费直播| 成人免费在线看片| 免费毛片在线看片免费丝瓜视频 | 亚洲人成色77777在线观看大|