金山词霸即划即译设计随笔(六)

原创 2007年09月13日 16:55:00

写完这一节,让我们完工吧!

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

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

 

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

金山词霸抓词机理 -- HOOK消息功能的使用

内容提要 Windows系统是建立在事件驱动的机制上的,说穿了就是整个系统都是通过消息的传递来实现的。而钩子是Windows系统中非常重要的系统接口,用它可以截获并处理送给其他应用程序的消息,来完...

金山词霸2016.1.3.3 手动去广告方法

该词典的2012版可以通过修改xml文件实现去广告,之前有人发过百度经验了。然而2016版中根本没有xml文件了,故需要新的方法。        先看一看去广告前后的效果对比: 金山词霸的广告主要...

解决金山词霸2010牛津旗舰版破解词典丢失的方法

金山词霸丢失牛津词典的问题似乎从2009版就开始了,到了金山词霸2010版这个问题依旧没有解决。今天看到winzheng的Anson4朋友给出了一个解决金山词霸2010牛津旗舰版词典丢失的解决办法,贴...
  • bat67
  • bat67
  • 2017-01-14 15:02
  • 919

Android自定义View之仿金山词霸加载效果

今天,闲来无事,看到金山词霸的加载时的LoadingView甚是不错,于是就小模仿了一下。先看效果: 下面切入正题,先说下思路: 1.确定中心点的坐标 2.根据正余弦函数,确定8个小圆的圆心坐标...

金山词霸没落了么?

作为英语小白,金山词霸是我电脑的必备软件。用金山词霸的历史几乎与用电脑的历史是相同的。 之前好多年用的都是金山词霸2005,后来想起作为一个IT业人士,总用盗版似乎不够仗义。我一直比较尊敬金山,因为...

黑马程序员 手写山寨版的金山词霸

---------------------- ASP.Net+Unity开发、.Net培训、期待与您交流! ----------------------

金山词霸生词本生成器

金山词霸除了单词查词功能,大家用得比较多的是金山词霸的生词本功能。 不可否认,金山词霸是个非常棒的英文单词查询工具,但其它功能还是有很多功能不完善。如生词本功能。 每一个人学单词时,学的顺序和内容都...
  • skyhh
  • skyhh
  • 2015-04-06 11:28
  • 2036

控制其他程序1(金山词霸2009)

基于个人需要,想控制其他程序,获取其他程序接运行结果。 具体来说,现在我想要在我的程序中控制金山词霸查询一个单词,最后能在我的程序中显示查询的结果。   就像把其他程序作为一个函数来调用,首先想...

自定义加载等待动画,仿金山词霸

打开金山词霸,当加载下一页或者切换页面时,数据没有立即加载出来,会出现一个LoadingView 一起看看效果: 分析一下效果图,关键的技术点如下:1.绘制除出9个圆点(圆点的个数可以自己定义...

“金山词霸”屏幕取词技术揭密(讨论稿)

主题  屏幕取词技术系列讲座(一)  作者   亦东  很多人对这个问题感兴趣。  原因是这项技术让人感觉很神奇,也很有商业价值。  现在词典市场金山词霸占了绝对优势,所以再做字典也没什么前途了。我就...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)