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

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

 

本节该设计即划即译项目的数据处理层了。说起数据处理,还不得不提一下xmlhttprequest 的原理, 我没法用足够专业的术语来介绍xmlhttprequest,但我有我自己的语言和陋见。xmlhttprequest实现的异步数据处理,简单的可以化为两大对象或端——服务器端和客户端;

        客户端:负责发送异步请求到服务器端,请求内容可以通过传递参数来定制。

就像去餐馆吃饭点菜一样,要吃醋溜土豆丝你就叫一声"醋溜土豆丝",如果还有其它要求或嗜好,你还可以补充道:"醋溜土豆丝不放辣椒"等。这样一个简单的请求就发送出去了,剩下的只是看看菜单,喝口茶,等着菜由厨师炒好了端上来了。哈哈

        服务器端:负责接受客户端发送来的请求,处理请求,响应请求,然后发送合适的结果到客户端。

更简单了,就是接受客人点的菜,做菜,把菜装好,送到客户面前。

好了,说到这里,下文是简单的创建xmlhttprequest对象的实现代码:

var xmlHttp;
function createXMLHttpRequest() ...{
   
    
if (window.ActiveXObject) ...{
        xmlHttp 
= new ActiveXObject("Microsoft.XMLHTTP");
    }
 
    
else if (window.XMLHttpRequest) ...{
        xmlHttp 
= new XMLHttpRequest();
    }

    
}

创建好了xmlhttprequest对象,我们就可以来使用它了,看下面:

    createXMLHttpRequest();//创建异步对象
    xmlHttp.onreadystatechange = handleStateChange;//注册状态事件,监视异步处理对象的状态;
    xmlHttp.open("POST""default.aspx?sel="+escape(text), true);    //封送具体请求

    xmlHttp.send();
//发送请求

function handleStateChange() ...{    
    
if(xmlHttp.readyState == 4...{
        
if(xmlHttp.status == 200...{           
           content.innerHTML
=xmlHttp.responseText;
        }

   

补充一点,xmlhttprequest响应用户请求返回的数据一般有两种格式,即文本和xml.对于普通的应用。使用responseText属性获取响应的文本就足够了,在文本中可以加入字符串,数组,脚本,HTML代码等内容,但无论什么内容,前台处理和后台封送总是一致的。xml可以用responseXML属性获得,适合于从数据库查询得到的类似于树形、级联或者二维特征的复杂数据。在服务器端定义和处理xml数据时,也许更得心应手些,可以利用System.XML命名空间下的类及方法、属性,但javascript也同样提供了不错的支持,一项关键的技术就是DOM(document object model)。

好,现在我们开始服务器端的处理吧。在上面代码中,可能你留意了这行代码

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

这句是关键的,它指定了要接受请求的对象,在java中,一般用serverlet处理请求,还需要在web.xml中配置响应处理节点;而在.net中,它提供了多种支持,包括普通的.aspx文件,.ashx处理程序和自定义的handler处理类。为了追求简便,我使用了.aspx页面文件处理客户端的请求。

该文件读取客户端传递来的请求参数(sel),并依据此参数进行查询,整合查询结果,写入响应流中。此页面只是单纯的响应请求,不需要显示界面,因此可以把aspx文件留为空白,下面是.aspx.cs文件代码:

//Default.aspx.cs文件
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
using System.Text;
public partial class _Default : System.Web.UI.Page 
...{
    
protected void Page_Load(object sender, EventArgs e)
    
...{
        
string key = Request["sel"];
        StringBuilder ret 
= new StringBuilder("<ul>");
        SqlCommand comm 
= new SqlCommand(string.Format("select top 5 id,title,rq from [news] where title like '%{0}%' order by click desc",key), new SqlConnection(ConfigurationManager.ConnectionStrings["metalConnectionString"].ConnectionString));
        comm.Connection.Open();
        
using (SqlDataReader dr = comm.ExecuteReader(CommandBehavior.CloseConnection))
        
...{
            
while (dr.Read())
            
...{
                ret.AppendFormat(
"<li><h3><a href="Detail.htm?id={0}" title="{1}">{1}</a></h3>[{2}]</li>",dr["id"].ToString(),dr["title"].ToString(),dr["rq"].ToString().Split(' ')[0]);
            }

            ret.Append(
"</ul>");
        }

        
if (ret.ToString() != "<ul></ul>")
        
...{
            Response.Write(ret.ToString());
        }

        
else
        
...{
            Response.Write(
"<ul><li>没有查到匹配的结果!</li></ul>");
        }

    }

}

上述文件最关键的一个语句就是:Response.Write()方法,该方法将构造好的html代码写入相应流中,不多说。

MSN跟我交流

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

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

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

最近工作不是很忙,使得我可以有时间继续学习 AJAX技术。完全是个偶然的机会,我发现了一个叫“爱词霸沙龙”的英语学习网站,其实我是冲着找几个词友们推荐的英文歌曲去的,浏览网站过程中,我却发现了改网站运...
  • chemhenry
  • chemhenry
  • 2007年09月13日 11:22
  • 859

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

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

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

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

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

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

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

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

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

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

即点即译

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

关于代码即设计的随想

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

让你的blog支持即划即译

    今天,我无意中看到了《你想让个人站点和博客"E"起来吗?》这篇文章,它是直接转接到“多爱英文”爱词霸免费工具包。这个工具包能为你的blog添加词典搜索、短句搜索、爱词霸每日一句、爱词霸每日E文...
  • riag
  • riag
  • 2006年10月19日 14:46
  • 1181
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章: 金山词霸即划即译设计随笔(五)
举报原因:
原因补充:

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