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

原创 2007年09月13日 11:22:00

最近工作不是很忙,使得我可以有时间继续学习 AJAX技术。

完全是个偶然的机会,我发现了一个叫“爱词霸沙龙”的英语学习网站,其实我是冲着找几个词友们推荐的英文歌曲去的,浏览网站过程中,我却发现了改网站运用AJAX技术实现的又一亮点,即题目中我提到的在线“即划即译”功能,好了,闲话少说,下面与大家一起分享我的学习过程:

解释一下:所谓即划即译功能,就是在客户浏览该站网页时,如果在阅读过程中遇到了生僻的单词或词组,可以用鼠标选中文本,然后由在线词霸查询服务,自动根据您选择的项目进行查询、翻译,并罗列出最符合要求的结果。该功能类似于大家熟知的金山词霸功能,不过原理还是有着很大区别的,金山词霸还要用到文字识别,智能识别等特殊功能。应用范围也不一样,现在我们谈到的“即划即译”,仅仅是基于浏览器实现的查询。

示例如下:

图一:检索等待提示

示例效果

图二:显示检索结果

 

 

图三:无结果时提示

 

现在我们说说实现此功能需要迫切解决的几个问题,现归纳如下:

1.准确定位光标位置。即划即译的功能总是在所选择文本处显示查询结果,由此我想到艾克主页秀里的一个光标跟随功能,该功能效果是,总有一个图片或文字跟随光标在窗口中移动,由此,我们只需定位光标在窗口中的x,y值即可;

2. 文本获取。如果使用过此功能的朋友们,可能会有以下体会,查询是因用户选择了某一文本引发的,因此我们第一要解决的就是如何获取客户在浏览器下当前选中的文本;

3.在光标处绘制层。很显然,显示结果可以在一个动态显示和移动的层中显示,因为层不但可以实现显示和隐藏,而且还可以对其进行绝对定位;

4.异步查询。这一步理应是此次设计的核心了,相当于DAL了,担任数据查询及处理的重任;

5.格式化输出结果。最后一步了,这一步需要获取第2步查询的结果,还要整理结果,基于3,4步骤,将结果显示在光标位置的层中。

MSN跟我交流

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

 本节该设计即划即译项目的数据处理层了。说起数据处理,还不得不提一下xmlhttprequest 的原理, 我没法用足够专业的术语来介绍xmlhttprequest,但我有我自己的语言和陋见。xmlh...
  • chemhenry
  • chemhenry
  • 2007年09月13日 16:22
  • 642

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

 下面按照上述步骤,一一细说。用 javascript 获取当页面上鼠标(光标)位置在许多情况下都会用到,比如拖放,悬停提示(tooltip) 等等。当然,这里我们依然要面对浏览器的兼容问题,在不同的...
  • chemhenry
  • chemhenry
  • 2007年09月13日 12:01
  • 443

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

如何获取光标的位置,在上一节中已经解决了。现在我们来进行第二步,如何获取选定的文本。这一点也是至关重要的,因为我们要把用户选择的文本作为用户提交的输入来处理,作为参数提交查询请求。原来从来没尝试过这一...
  • chemhenry
  • chemhenry
  • 2007年09月13日 15:00
  • 359

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

写完这一节,让我们完工吧!本节是最后一步了,也是综合的,交互性的。现在来看如何把从服务器端返回的响应结果,格式化后,显示在表示层里。大家在上一步看到了,我在响应流里直接写入了定义好的html代码。实际...
  • chemhenry
  • chemhenry
  • 2007年09月13日 16:55
  • 635

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

如果说上面的两步是为了获取用户在客户端提交的表单输入的话,那可以姑且称上面是为表示层(GUI)做准备的。下面,我们来设计真正的用户表示层-------结果显示层(div)。上面提到过,设计该程序时,选...
  • chemhenry
  • chemhenry
  • 2007年09月13日 15:35
  • 474

解决:金山词霸在Firefox 3中实现屏幕取词

解决方法:你当然可以弃金山词霸而改用灵格斯,或者弃火狐改用微软的Internet Explorer。但如果你和我一样都不想放弃金山词霸和火狐的话,方法只有一个:在火狐3中调用微软IE实现金山词霸屏幕取...
  • babygjx
  • babygjx
  • 2010年07月16日 13:58
  • 1505

金山词霸在360极速浏览器下不能取词

这个问题,整整一上午,我在网上搜了无数遍,看了无数个帖子,有说兼容模式运行的,360的工作人员居然还有说在快捷键的属相当中加什么-no-sandbox的,还有说安装取词插件的等等等等。没有一个是正确的...
  • wolfalcon
  • wolfalcon
  • 2015年04月08日 16:46
  • 7866

即点即译

点译阅读 静读天下
  • yangxiaojun9238
  • yangxiaojun9238
  • 2012年12月26日 09:52
  • 556

关于代码即设计的随想

记得大三的一堂软件工程课上,留洋归来的老师说,编码在国外已经是蓝领了,想当白领,一定要做设计。根据这种分法,很不幸,我当蓝领当了很多年。一直以来,有个问题困扰着我。设计是什么?或者设计包括什么?如果把...
  • tintinr
  • tintinr
  • 2014年05月11日 17:46
  • 747

OaaS-运维即服务 简介

最近,OaaS在互联网基础设施领域是一个很流行的术语。您可能听说过IaaS、PaaS、SaaS这些术语,但是OaaS是最近才出现的新术语,在大型互联网网站上,OaaS是一个很热门的话题。 OaaS意...
  • ChinaNetCloud
  • ChinaNetCloud
  • 2013年11月19日 09:35
  • 996
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:金山词霸即划即译设计随笔(一)
举报原因:
原因补充:

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