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

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

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

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

示例如下：

图一：检索等待提示

图二：显示检索结果

 

 

图三：无结果时提示

 

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

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

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

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

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

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

MSN跟我交流