金山词霸即划即译设计随笔（六）

写完这一节，让我们完工吧！

本节是最后一步了，也是综合的，交互性的。现在来看如何把从服务器端返回的响应结果，格式化后，显示在表示层里。

大家在上一步看到了，我在响应流里直接写入了定义好的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跟我交流