金山詞霸即劃即譯設計随筆（六）

寫完這一節，讓我們完工吧！

本節是最後一步了，也是綜合的，互動性的。現在來看如何把從伺服器端傳回的響應結果，格式化後，顯示在表示層裡。

大家在上一步看到了，我在響應流裡直接寫入了定義好的html代碼。實際情況是，在伺服器端定義這些html代碼，往往需要你在測試程式時，頻繁往返于伺服器和用戶端之間反複調試以達到預想的結果。多數人喜歡在用戶端即javascript裡處理這些，友善且符合我們的邏輯，因為html與javascript總是形影相随的，我願意把他們比作是電影明星和化妝師。我們都知道，ajax技術本身就是以javascript為基礎的，顯示，資料格式化處理等都堆積在前台一個或若幹個頁面裡，事實總會是讓用戶端過于龐大、複雜，給調帶來更多成本和時間。

以上隻是我的一些淺見，怎樣安排，我說了不算。相信往往你會結合諸多因素，我提到或沒有提到的，來完成你的設計。

因為我在html的定義和格式化直接在伺服器傳回請求時處理好了，是以用戶端調用響應資料并完美顯示這些資料的操作代碼就顯得很簡單了：

function  handleStateChange()  ... {    

    if(xmlHttp.readyState == 4) ...{

        if(xmlHttp.status == 200) ...{           

           content.innerHTML=xmlHttp.responseText;//将響應文本寫入到結果顯示層裡

        }

    }

}

好，将近完成了，下面附上完整的代碼和參考位址：

//index.htm檔案

< html >

< head >     

< style  type ="text/css" > ...     

ul h3{...}{   

    PADDING: 0;

    MARGIN: 0; 

    FLOAT: left;

    OVERFLOW: hidden;

    width:140px;

    text-overflow: ellipsis;

    font-size:13px;

    color:blue; 

}

ul {...}{

    PADDING: 0;

    MARGIN: 0;

    line-height:18px;

    table-layout:fixed;

}

li {...}{

     PADDING: 0;

    MARGIN: 5px;

    OVERFLOW: hidden;

    LIST-STYLE-TYPE:none;

    CLEAR: both;

    WHITE-SPACE: nowrap;

    text-overflow: ellipsis;

    width:210px;

    font-size:12px;

    }

body{...}{

 font-size:13px;

}

a{...}{

text-decoration:none;

}

     </ style ></ head >

< body >

< DIV  id ="example_main" >

<!-- ************************************* 執行個體代碼開始 ************************************* -->

< SCRIPT  type ="text/javascript" > ...

function mousePosition(ev)...{

    if(ev.pageX || ev.pageY)...{

        return ...{x:ev.pageX, y:ev.pageY};

    }

    return ...{

        x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,

        y:ev.clientY + document.body.scrollTop  - document.body.clientTop

    };

}

//document.onmousemove = mouseMove;

document.onmouseup=keyUp;

function mouseMove(ev)...{

    ev = ev || window.event;

    var mousePos = mousePosition(ev);

    document.getElementById('mouseXPosition').value = mousePos.x;

    document.getElementById('mouseYPosition').value = mousePos.y;

    layer1.style.display='';

    layer1.style.left=mousePos.x;

    layer1.style.top=mousePos.y;

        var text=document.selection.createRange().text;

    if(text.length>0)...{

    layer1.innerHTML=text;

    }

} 

function keyUp(ev)...{

    ev = ev || window.event;

    var mousePos = mousePosition(ev);

    document.getElementById('mouseXPosition').value = mousePos.x;

    document.getElementById('mouseYPosition').value = mousePos.y;

    var text=document.selection.createRange().text;

    //document.selection.clear();

    if(text.length>0)...{

    content.innerHTML="正在檢索内容，請稍後...";

    more.href='search.aspx?key='+text;

    layer1.style.display='';

    layer1.style.left=mousePos.x;

    layer1.style.top=mousePos.y;

    createXMLHttpRequest();

    xmlHttp.onreadystatechange = handleStateChange;

    xmlHttp.open("POST", "default.aspx?sel="+escape(text), true);     

    xmlHttp.send();

    }

    else...{

    layer1.style.display='none';

    }

}

function handleStateChange() ...{    

    if(xmlHttp.readyState == 4) ...{

        if(xmlHttp.status == 200) ...{           

           content.innerHTML=xmlHttp.responseText;

        }

    }

}

var xmlHttp;

function createXMLHttpRequest() ...{

    if (window.ActiveXObject) ...{

        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

    } 

    else if (window.XMLHttpRequest) ...{

        xmlHttp = new XMLHttpRequest();

    }

}

</ SCRIPT >

< FIELDSET >< LEGEND > 示例 - 移動您的滑鼠 </ LEGEND > 滑鼠橫坐标:  < INPUT  id =mouseXPosition >   &nbsp;  

滑鼠縱坐标:  < INPUT  id =mouseYPosition >   </ FIELDSET >  

<!-- ************************************* 執行個體代碼結束 ************************************* -->

</ DIV >

< div  id ="layer1"  style ="background-color:#99ccff;position:absolute;display:none;" >

< table  style ="border-right: #66ccff 1px solid; border-top: #66ccff 1px solid; border-left: #66ccff 1px solid;

            width:250px;border-bottom: #66ccff 1px solid;" >

             < tr  style ="height:20px;" >

                 < td  style ="width: 72px; background-color: #99ccff" >

                     < span  style ="color: #9933ff; font-family: 華文彩雲" > 即劃即查 </ span ></ td >

                 < td  align ="right"  style ="background-color: #99ccff" >

                     < span  style ="color: #0099cc" >< span  style ="font-size: 10pt" >< a  id ="more" > 更多... </ a ></ span ></ span >

                     < img  src ="close.gif"  onclick ="layer1.style.display='none';"   /></ td >

             </ tr >

             < tr >

                 < td  colspan ="2"  style ="background-color:#fff;" >

                     < div  id ="content"  style ="padding:5 5 5 5;margin:0 5" ></ div >

                 </ td >

             </ tr >

             < tr  style ="height:20px;" >

                 < td  style ="width: 105px; background-color: gainsboro;border-right:none;" ></ td >

                 < td  align ="right"  style ="background-color: gainsboro;border-left:none;" ></ td >

             </ tr >

         </ table >

</ div >

以下是示例文本：

·國五礦就購買澳洲銅礦事宜進行談判 ·加鋁失去冰島冶煉廠擴張電權 ·秘魯南方銅業公司工會勞工将投票決定是否開始罷工 

·中國鋁業 産業鍊縱深大整合 ·科索沃鎳礦和冶煉廠将在周三投入生産 ·倫敦清算公司再度上調期鉛保證金 ·有色金屬産能擴張 節能減排加壓

·兩大敏感資料不容樂觀 加息之弦再度繃緊 ·保爾森稱若對華制裁将危及美國經濟 ·必和必拓執行官稱南非需提高鋁土礦産量 

·雲銅集團計劃五年内實作年銷售額突破千億元 ·銅和銅合金的性能與應用 ·廢銅的劃分種類 ·金剛石工具用金屬粉末鎳銅钴粉等應用前景

·廢銅的再生和加工方式 ·熱軋卷于冷軋卷的差別？ ·出口鋼材成本計算 ·冷拔生産工藝 ·雙相不鏽鋼與奧氏體以及鐵素體不鏽鋼的比較 

·利率上調利息稅下降，宏觀調控難改金屬牛市 ·進口不鏽鋼需要注意的一些問題 ·常用不鏽鋼牌号的主要用途 ·國内外有色金屬重量計算方法

·尖端金屬—铍 ·錫的發現 ·鋁合金是有什麼成分組成的？ 

</ body >

</ html >

參考位址：愛詞霸沙龍 打開位址，請用滑鼠選擇某一文本看看什麼效果吧！

末了，容我抱怨一句，CSDN的部落格上傳圖檔有問題！我做的例子的效果圖沒法與大家分享了。汗。

MSN跟我交流