基于Ajax技术的在线交流平台研究与设计

摘　要：目前，2.0是WEB开发的重要开发工具。本文以交流平台系统的设计过程为例，阐述了新一代的网站建设工具的实用技术—Ajax。系统应用MS SQLServer2000数据库，运用构建三层架构模式来设计前台，应用Ajax技术实现了前台与后台的数据异步传输功能，使得在用户不用Postback就能实现数据的交互，这种方法可为广大的网站建设者们提供新的思路和借鉴。

关键词：Ajax；在线交流；异步传输
1．引言
　　近年来，网络应用的广度和深度迅猛发展，网络应用程序的设计和开发已经成为各类应用软件主要的组成部分，网站开发平台的竞争也是异常的激烈。.NET框架的是当下较为流行或是主流的Web开发工具，为给Internet应用程序开发构建了一个理想的工作环境，同时也为网站开发的设计者们提供了一个功能更为强大和操作更为简便的工具－。随着2.0的出现，综合技术Ajax也同时出现，成为了Web开发技术的热点。
2．Ajax技术简述
2.1 Ajax的定义
　　Ajax通过综合运用Javascript、XHTML、和CSS、DOM、XML和XSTL、XML HttpRequest的技术，在提到数据交互速度，改善用户体验等方面发挥着重要作用。整个交互通信过程是异步进行的，所以Garret采用了Ajax（Asynchronous Javascript And XML）这个名称。
　　（1）XHTML和CSS具有灵活、可品转、基本、结构化等特点，被Ajax将系统数据呈现给用户，构建一个标准化的用户界面。
　　（2）DOM由于对HTML、XHTML、XML拥有强大的操作能力以及结构化的操作方法，故被Ajax用来实现数据动态的显示和交互。
　　（3）XML和XSTL在结构化的数据表、传输、交互、共享方面有特别大的优势。因此，它们在Ajax中主要用作数据交换和处理。
　　（4）XMLHttpRequest是XMLHTTP组件的对象，她是Ajax可以向服务器发起异步通信请求、并接受服务器返回的数据。这样，Ajax可像桌面应用程序一样在不刷新界面的情况下与服务器进行数据交换。
　　（5）Javascript因具备简单、灵活、丰富的客户端控制和表现等优点，所以被用来操作HTML、XHTML、CSS，绑定和处理所有的数据。
　　在Ajax出现之前，Javascript、XHTML、和CSS、DOM、XML和XSTL、XML HttpRequest基本上是各自为政的，Ajax让这些技术第一次有了交集，并且组成了一个整体。各种技术在Ajax引擎中的作用如图 2-1 所示。




图 2-1 各种技术在Ajax引擎中的作用
2.2 Ajax应用的生命周期
　　作为Web应用程序一部分的Ajax的生命周期更像桌面系统的GUI，而DOM则扮演了类似GUI控件的角色。Javascript脚本对DOM注册事件监听器，操作DOM响应事件。在响应事件的过程中，Web服务器可能被调用。这个调用是异步进行的，所以事件监听阶段和事件响应阶段是分开的。下面是一个典型的浏览器中Ajax应用的生命周期。
　　（1）用户访问：用户访问一个网站。
　　（2）页面初始化：页面初始化加载，准备处理用户输入或者刷新页面内容。
　　（3）触发浏览器事件：浏览器触发一个事件，比如鼠标单击。
　　（4）向服务器发起请求：浏览器向服务器发出一个请求。
　　（5）服务器处理请求：服务器收到浏览器发出的请求，调用业务逻辑接口处理请求。
　　（6）服务器响应请求：服务器响应浏览器发出请求，将处理结果返回。这个返回结果传递给在发出请求时指定的请求调用函数。
　　（7）浏览器更新页面：请求调用函数根据响应结果更新DOM内容，比如DOM变量或者任何的Javascript变量，更新页面内容。
　　“触发浏览器事件->向服务器发出请求->服务器处理请求->服务器响应请求->浏览器更新页面”这个过程是可以多次循环的。再循环过程中通常会有很多变量生成，很多事件也可能在客户端解决而不提交服务器。有些Ajax应有的生命周期可能是短暂的，随着用户提交表单或者重新刷新页面而结束。
3．在线交流平台的分析与规划
　　本应用程序基本上实现了在线交流平台的基本功能，主要包括了登录模块、注册模块、在线交流模块。通过本应用程序的设计使开发者能基本上理解Web开发的三层模式，以及Ajax异步数据传输的实质和基本操作。
3.1系统流程图
　　本在线交流平台主要由三部分组成：用户登录、用户注册和交流页面，其中交流页面还分为了普通用户与管理员两个页面。该系统的系统流程如图 3-1 所示。
　　
　　
　


图 3-1 在线交流系统流程图
3.2 系统功能简介
　　本系统将Web系统分为三层：客户显示层、业务逻辑层和数据层。数据层位于最底层，用来定义、维护、访问和更新数据并管理和满足应用服务对数据的请求。业务逻辑层处于中间，把客户显示层和数据层分开，用来执行应用策略和封装应有模式；其不需要直接跟数据源交互，只须访问数据层的数据接口。显示层为客户提供应有服务的图形界面。三层模式下个层的关系如图3-2 所示。




图 3-2 三层模式下各层的关系
4.系统数据库设计
　　该在线交流平台的后台数据库（chat）主要用到了两个数据表，分别为用户表（userinfo）和交流信息表（chatinfo）。它们的设计情况分别如表4-1和表4-2所示。
名称数据类型大小空值备注idint4主键usernamevarchar50用户名pswvarchar50允许密码userroleint4允许用户角色isadminbit1是否为管理员isonlinebit1是否在线lastchatinfoint4允许最后一条信息的序号表4-1 用户表（userinfo）
    此表中字段“id”为该表的主键，而“lastchatinfo”字段为表的外键，依存于“chatinfo”表的主键字段“cid”。
    表“chatinfo”主要用于储存用户所发的信息以及系统公告。其中包含了“user_from”、“user_to”、“expression”等用于记录发言信息的字段。
名称数据类型大小空值备注cidint4主键user_fromvarchar50信息来源用户user_tovarchar50信息接收用户contenttext信息内容expressionvarchar50允许用户表情ispublicbit1是否为密谈colorvarchar50信息字体颜色表4-2交流信息表（chatinfo）
5.结束语
　　Ajax由于综合使用了Javascript、XHTML、和CSS、DOM、XML和XSTL、XML HttpRequest等技术，是其集上述各种技术的优缺点于一身。GoogleSuggest、GoogleMaps等产品的成功开发让我看到了B/S模式下的Web应用程序也能拥有像C/S模式桌面应有程序那样反应灵敏、胖客户端等优点的希望。然而任何事物都不会是十全十美的，Ajax也不例外。例如Javasc ript和Dom由于浏览器兼容性和不易调试而广受诟病。在开发Ajax应用的时候，必须测试针对各个浏览器的兼容性。至于调试，则依赖于来发人员的开发经验和技巧。
参考文献：
[1] 何自聪.Ajax开发精要－概念、案例与框架[M].
[2] 奚江华.2.0 开发详解[M].北京:电子工业出版社,2006.
[3] 网冠科技.时尚编程百例[J].北京:未来教育科技,2004.
[4] 刘小伟,王伟.与SQLServer网站开发实用教程[M].北京:电子工业出版社,2005.
[5] 求实科技.实例导航[M].北京:冶金工业出版社,2004. 本文链接：http://www.qk112.com/lwfw/jsjlw/jisuanjiyingyong/243010.html