聊天室开发备忘录

2006-05-20 23:33 | aptx

1、初识 ajax
第一次听说ajax这个词语好像是去年,那时新论坛的开发刚刚开始,有一次母老虎在QQ上问我能不能给做一个ajax的留言板,我就问ajax是什么,接着又上Google搜了一下,搜出不少“利用ajax无刷新如何如何”的条目。不过很可惜,我当时才刚刚学会如何利用浏览器自带的 XML DOM,还不知道ajax的核心——XMLHttp是什么,所以就天真的认为ajax就是用js不停的从服务器刷新某个xml文件,从而达到页面无刷新浏览的目的.....

现在想想,就是因为这个理解上的错误,使得我在研究ajax的留言板时根本无从下手,并且当时我的asp.net水平也不过关,郁闷了很长时间后,这个事情也不了了之。

2、第2次了解 ajax
一次偶然的机会,我知道了 w3schools 这个网站,发现上面有不少兼容不同浏览器的 javascript 示例,包括操作XML DOM 的示例,我就复制下来反复研究,而且还利用这些从这里学到知识制作了一些作品,其中《天幻茶馆电子攻略集第二卷》就是其中的一个。

攻略集第二卷制作完毕之后,我觉得自己已经熟练掌握了控制 XML DOM 的要领,但是还不能画句号,因为在研究 XML DOM 的过程中,反复看见了一个 XMLHttp 对象。因为当时手头上的中文资料不足而且混乱,并且实践这个对象还需要 WEB 服务器支持(后来才知道的),根本无从下手。于是决定自己翻译一篇,也就是后来发表在社区里的《The XMLHttpRequest Object》一文。现在看来,翻译此文所投入的精力完全没有白费,不但在翻译的过程中学到了大量的知识,而且还得到了鸟x的帮助。在本文完成之后,XMLHttp的基本用法算是掌握了。

3、第3次了解 ajax
很不幸,对于实践ajax,千辛万苦走到了这一步还是无从下手。现在回想一下,最大失误在于我对WWW技术理解上:点击一个链接,浏览器就会载入另一个页面。这里要注意了,浏览器能显示网页,并不是浏览器根据url从服务器上载入的,而是在你点击链接的时候,浏览器就会向服务器发送了一个请求(Request),请求实际上是一个有着固定格式的字符串,里面包含了url 等信息,服务器收到后会马上解析这个字符串,然后回应(Response)相应的数据流。

此外,用过 XML DOM 的人都知道,创建好 XML 对象后,用 load 方法即可载入 xml 文件。就是这两个原因,使我对于WWW技术的认识上始终停留在“浏览器载入页面”的层次,即使掌握了 XMLHttp 对象 responseText 和 responseXML 两个方法的用法,也没有认清这两个方法的价值,甚至还奇怪过既然有了 load 为什么还要 responseXML(不得不说,人类的惰性思维真的很牛X)........

4、第4次了哎....
大约是去年寒假的时候,老虎从QQ上问我能不能找个 asp.net 的聊天室,新社区用。我找了找,发现免费的、asp.net的、基于 ajax 技术、带开房间功能的聊天室根本没有,于是就下决心自己来开发。

记得聊天室开发刚开始的时候,聊天页面是使用 FORM 发送聊天信息的。后来在研究别人的一些 ajax 源码 JavaScript 部分的时候,我发现他们都是用 XMLHttp 来发送数据,我这才恍然大悟:原来在 XMLHttp 出现以前,浏览器只能用 FORM 把表单(不是请求)提交给服务器。FORM 是浏览器内置的控件,不需要脚本支持。通常情况下,在 FORM 内放置一个 type 为 submit 的 input 控件,只要一点击这个控件,FORM 就会产生一个提交动作。不光如此,FORM 发送数据的方式也分两种,一种是“GET”,另一种是 “POST”。“GET”可直接发送字符串,但是不能大于 512 bytes,浏览器向服务器发送“请求”就属于“GET”。POST发送的是2进制数据流,可以直接发送对象,例如表格、表单控件等等,文件上传也是 FORM 发送。

但是不管是 FORM 发送数据还是浏览器自身发送请求,都有个在发送的过程中会锁住页面的缺点,通常直到发送完毕才能继续页面的操作。传统交互方法的灵活性欠佳无疑限制了网页与服务器的交互性,XMLHttp 或许就是基于这种需求提出的,当然也有可能不是。它不属于 W3C 标准,不能通过 html 标签使用,而是通过 JavaScript 之类的程序语言调用。配合 DHTML DOM,可以不锁定页面就可以通过 XMLHttp 把数据或者请求发给服务器。更出色的是,XMLHttp 还有异步加载功能,它把 XMLHttp 对于服务器的响应的接收分成了 5 个状态,分别是 0 = uninitialized、1 = loading、2 = loaded、3 = interactive、4 = complete,通过 readyState 属性即可获得当前状态。也就说,程序员可以根据这几种状态编写出程序,分别处理这几种状态(通常是给用户一个数据接收的进度),无疑大大提高了网页与服务器的交互性。

5、步入正规
在 ajax 聊天室概念被提出以前,所有的 WEB 聊天室都是刷新一个框架(FRAME)的办法显示聊天信息的,当然也是用的FORM来发送聊天信息,如此一来,就会造成刷新聊天信息时浏览器卡一次(也就是被锁住),发送聊天信息时又卡一次......随着 XMLHttp 的普及,我们即可用 XMLHttp 刷新聊天记录,也可用 XMLHttp 提交聊天信息,从而实现“无刷新”。至于聊天记录,它既可以保存后台数据库里,也可以保存在服务器的一个缓冲区内,这里我是用的一个 XML 文件来保存聊天记录。注意,并不一定非得把聊天记录保存在 XML 文件里并刷新这个 XML 文件才算是 ajax。

摸索到了方向,剩下的就是时间问题了。JavaScript(客户端)部分基本上没有遇到太多障碍,倒是 ASP.NET 和 C#(服务端)部分把我折腾得够呛。

首先是服务端数据的接收:和 FORM 一样,XMLHttp 发送数据也分为“GET”和“POST”,对于聊天信息的发送,用“POST”发送当然是首选,问题在于 POST 发送的是2进制数据流,要想把聊天信息写入 XML 文件,就必须先把这些2进制数据流解码成字符串。原理虽然简单,但是对于我这种没有什么 .net 开发经验的三脚猫来说,简直是步入了炼狱,连续几天都是在Google和CSDN上寻找程序代码,就连吃饭睡觉满脑子里都是如何解码,不过也还算是幸运,在CSDN的热心人和鸟x的帮助下,总算折腾过去了.....这也是我第一次操作2进制数据

然后就是后台 XML 文件的读写操作:一开始我是用的 DataSet对象 的 ReadXml 和 WriteXml 方法,但是一次在鸟x讨论的过程中,发现此法实在太蠢。后来在鸟x的指点下,改用 XmlTextReader 和 XmlTextWriter 对象。该对象的特点是流式处理 XML 文档,而不是把 XML 先解析成树再处理,不但速度快,而且占用内存小。

6、目前.....
因为毕业设计的原因,聊天室开发一度中断,直到最近才刚刚开始。不过毕业设计我是用 ASP.NET 做的,加上期间我又从那本《ASP.NET Web 站点高级编程》学到了很多宝贵的经验,所以目前看来技术上的难题基本上没有了 ^^ ,同时我也由此发现了以前的构架是多么不合理,又重新写了一遍,换用 XmlTextReader 和 XmlTextWriter 对象读写 XML 文件就是最近刚刚完成的,所以目前进度并不高。

在写此文的时候,原本计划只是打算整理下聊天室的设计,但是随着思绪的延伸,连我自己都很惊讶这个聊天室的走过的路竟然是那么的曲折,结果光顾着回忆,把设计整理给耽误了......等明天再说吧 = =

-