ASP+Ajax论文可拖动新闻主页.docx

1、ASP+Ajax论文 可拖动新闻主页ASP+Ajax论文 可拖动新闻主页1 系统概述做任何事情，都必须做好准备工作，开发一个系统更是如此，所以才会出现很多种软件工程中的开发模型，例如瀑布模型。在开始实际编码之前，首先为读者介绍一下系统的基本情况和需求，实现时涉及的知识和其他相关内容，便于读者更好地理解系统的结构。本主页使用了基于ASP与Ajax技术，选择Access数据库，该主页的主要部分为JavaScript代码。1.1 需求分析需求分析指的就是一个和客户交流的活动，以正确引导客户能够将自己的实际需求用较为适当的技术语言进行表达（或者由相关技术人员帮助表达）以明确项目目的的过程。这个过程中也

2、同时包含了对要建立的系统基本功能和模块的确立和策划活动。所以在设计网站之前应该注意：网站设计时的可增长性功能需求、安全性及可靠性的要求、网站的日常维护、网站的运行环境、页面总体风格以及美工效果、主页面和次级页面数量、内容管理及录入任务的分配和各种页面特殊效果等等因素。总之，在拿到项目后应分成许多步骤来不同分析和实现，包括有： 整体规划整个系统，按要求规划好每一个子系统。 开发小组内部进行细分，根据工程的难易，每个人分配一个子系统或者多个子系统或者多个人分配一个子系统。 根据要求需要每一个成员写出自己的网页连接文件，具体的目录和文件名。再统一的定义网站整体的风格：背景颜色、图片、表格及背景图片的

3、属性，网站的Logo及其大小等等。 每个设计人员按照规划将网站所涉及的所有静态页面做出来。 开始分析网站的每一个子系统的数据结构，首先要规划出数据库结构，然后建立数据表。 根据上面的数据表，建立数据库和相应的数据表，提交实现文档。 组内的每个开发成员开始编写子系统代码。框架设计，模块设计，评审最后的编码。 由项目开发组组长或者负责人，开始合并各成员的子系统，并检测程序的完整和健壮性。 编写用户手册下面以可拖动新闻主页为例介绍一下需要的功能：（1）栏目可拖动整个页面分为3列，每一列内有若干个栏目。鼠标拖动栏目的标题栏，可以将某一栏目移动到该列其他位置，或者其他列。（2）可以添加、编辑及删除栏目栏

4、目的数量不是固定不变，用户可以添加自定义的栏目，也可以将不需要的栏目删除掉，还可以改变每一个栏目的高度和显示条数。（3）用户的操作可以保存到数据库只有上述2个功能的话，该主页只能算得上一个特效页面。该页面的内容必须从数据库中读取，包括布局信息。用户的添加、编辑及删除操作，都要记录到数据库中，这样才能将效果与网站结合起来。1.2 结构设计可拖动新闻主页的主要作用是增加网站的趣味性，展示新闻仍然是最终目标。该主页实现从数据库读取布局信息，根据布局信息，将各栏目分配到各自位置；各个新闻栏目的内容从数据库中读取，并按照用户定义的条数显示；各个新闻栏目接受用户的编辑及删除，系统自动将用户的这些操作记录到

5、数据库。这些功能的业务逻辑主要通过JavaScript代码实现，与服务器的通信采取发送异步请求，使得这些功能，只需要在一个HTML页面中就可以实现。在表1中列出了该主页需要使用的文件列表及其完成的功能描述。表1 文件列表类别页面功能文件Index.html新闻主页Conn.asp创建连接数据库的文件CreateNewType.asp添加新栏目，将新栏目保存到数据库getLayOut.asp从数据库中获得布局信息news_show.asp显示单条新闻页面readNews.asp从数据库中读取新闻内容saveLayOut.asp保存布局信息到数据库cssdragable-boxes.css定义拖动

6、栏目的样式表cssnews.css定义整个页面样式表及单条新闻显示样式表DataData.mdbAccess数据库文件jsajax.js封装创建Ajax类的JavaScript文件jsdragable-boxes.js实现栏目可拖动的函数及代码文件夹css包含系统用到的CSS样式表文件data包含系统中的数据库images包含系统页面显示的图片文件js包含页面用到的JavaScript代码文件在通过表1对可拖动新闻主页进行结构分析之后得到了如图1所示的结构及各模块的功能，这里仅展示了主要的功能及文件描述。图1 结构功能图2 数据库设计在对可拖动新闻主页进行了结构分析之后，接着就要考虑如何合理设

7、计存储布局及新闻数据的数据表结构。本系统使用Access作为后台数据库，下面介绍该系统数据表的创建。首先在Access数据库中创建一个数据库Data.mdb，用于存放该网站所有数据。然后在该数据库中创建一个布局表layout，用于存放主页的布局信息。该表的详细信息如表2所示：表2 布局表字段名数据类型是否允许空备注id自动编号否递增layoutstr备注是布局信息字符串接着创建一个新闻类别表newsType，用于存放新闻的类别，也就是栏目的相关信息。该表的详细信息如表3所示：表3 新闻类别表字段名数据类型是否允许空备注TypeNumber文本(255)是新闻类别的标识TypeName文本(50

8、)是新闻类别的名称Level数字是新闻类别的级别SonNum数字是子类别数量最后创建新闻表news，用于存放发表的文章信息，如文章编号、分类编号、文章标题、文章内容、发布时间、查看次数等。下面将对该表及其结构进行介绍，如表4所示：表4 新闻表字段名数据类型是否允许空备注ID自动编号否文章编号title文本(100)是文章标题img文本(50)是文章图片content备注是文章内容keywords文本(50)是文章关键字creator文本(50)是文章创建者createDate日期/时间是文章创建日期infoFrom文本(50)是文章来源author文本(50)是文章作者uptime日期/时间是

9、文章上传日期clickNum数字是查看次数3 通用代码设计在一个网站中有一些代码会在许多页面重复用到，每次用到都要编写一次，既费事又费力，也不能保证两次做的完全一样。为了解决这个问题，采用的方法就是把通用的部分提取出来单独保存在一个文件中，然后在需要的地方包含进来。例如创建连接数据库的代码，CSS样式表等。3.1 创建连接Access数据库在操作数据库的时，首先都需要创建连接Access数据库的Connection对象，这部分代码可以单独保存到Conn.asp文件中。该文件的代码如下所示：3.2 CSS样式表使用样式表文件，可以实现样式的共用，也可以增加代码的可读性，这里主要用到了2个CSS样

10、式表文件。具体如下所示：（1）news.css文件用于控件全部页面的背景、头部背景及单条新闻展示页面的样式，代码如下所示：body font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Font to use */ background-color:#317082; font-size:0.7em; margin:0px; padding:0px; height:100%; width:100%; text-align:center; background-image:url(./images/backgro

11、und2.gif); #mainContainer width:100%; margin:0 auto; text-align:left; height:100%; padding-bottom:30px;#header /* Header at the top of the demo */ background-image:url(./images/bg_heading.gif); background-repeat:repeat-x; height:99px; /* Logo image */#header img float:left;#news_contentbackground-co

12、lor:#FFFFFF;.mainright height:30px; background-color:#90ACC8; line-height:30px;padding-left:10px;.contentmargin-left:10px; margin-top:20px; line-height:24px; text-align:left; width:92%.content h1color:#ff0066; font-size:18px; font-weight:bold; text-align:center; margin-bottom:0px;.content h2font-siz

13、e:12px; text-align:center; font-weight:normal; border-top:#666 1px dashed;color:#666; height:24px; margin:3px 5px 8px 0; background:#E5ECF9.pint text-align:center; padding-top:30px;dragable-boxes.css文件用于控制拖动栏目的样式，这也是该主页的主要样式表，可以通过修改此文件的内容，改变主页的风格。具体代码如下所示：input font-size:10px;.dragableBox /* 栏目 */ b

14、ackground-color:#FFF; margin:5px; border-right:1px solid #AAA; /* 阴影*/ border-bottom:1px solid #AAA; /* 阴影 */* 栏目内蓝色边框层 */.dragableBoxInner border:1px solid #317082;.dragableBoxHeader /*栏目标题栏*/ background-color:#E2EBED; height:20px; font-weight:bold; color: #317082;.dragableBoxHeader span /* 标题栏文字*/

15、 line-heigth:20px;.dragableBoxHeader img,.dragableBoxHeader span /*标题栏图片及文字*/ float:left;.boxItemHeader /*新闻的标题*/ font-weight:bold; margin:0px; color:#000; text-decoration:none; overflow:hidden; .boxItemHeader:hover /*新闻的标题*/ font-weight:bold; margin:0px; color:#F00; text-decoration:underline;.draga

16、bleBoxHeader input font-size:10px; .newsNumberOfItems /*显示条数*/ color:#F00;.dragableBoxContent /*栏目的主体部分*/ padding:3px; clear:both;#rectangleDiv /*拖动时产生的图层 */ border:1px dotted red; margin:5px;.closeButton /*关闭按钮*/ padding:2px; border:1px solid #317082; line-height:9px; height:9px; margin:2px; color:

17、#317082; padding:2px; padding-bottom:3px;.closeButton_over /*关闭按钮*/ padding:2px; border:1px solid #317082; line-height:9px; padding:2px; padding-bottom:3px; margin:2px; background-color:#317082; color:#FFF;.dragableBoxStatusBar /*栏目的标题栏*/ border-top:3px double #317082; height:14px; background-color:

18、#E2EBED; padding:2px;.dragableBoxEditLink /*编辑*/ color:#317082; text-decoration:none; padding-top:1px;.dragableBoxEditLink:hover /*编辑 */ color:red; text-decoration:underline;form display:inline;#addNewFeed /*创建新栏目*/ float:right; width:300px; background-color:#FFF; border:1px solid #317082; padding:2

19、px; margin-right:2px; margin-top:2px;img border:0px;4 页面效果及功能实现本章前面对可拖动新闻主页进行了概述，读者对该主页已经有了初步认识。根据使用要求划分了功能模块，设计了数据库，并设计了CSS样式等通用代码。下面就可以进行主页代码编写。4.1 页面整体布局代码首先新建一个名为Index.html的HTML文件，引入需要的CSS文件及JavaScript文件，代码如下所示：然后添加布局图层及表单。其中ID为“mainContainer”的标记，容纳整个主页内容；ID为“header”的标记，为整个头部内容；ID为“addNewFeed”的标

20、记，容纳创建新栏目的表单；ID为“floatingBoxParentContainer”的标记，容纳所有的可拖动栏目。效果如图2所示，代码如下所示： 新栏目 栏目标题: 显示条数:   固定高度: 图2 可拖动主页显示效果4.2 创建封装Ajax类的JavaScript文件新建一个名为ajax.js的JavaScript文件，该文件创建了一个关于Ajax的类，该类用来处理客户端与服务器端的所有通信。首先来看该类的属性及方法的定义。代码如下所示：function sack(file) this.AjaxFailedAlert = 您的浏览器不支持Ajax功能！; this.reques

21、tFile = file; this.method = POST; this.URLString = ; this.encodeURIString = true; this.execute = false; this.onLoading = function() ; this.onLoaded = function() ; this.onInteractive = function() ; this.onCompletion = function() ; this.createAJAX = function() ; this.setVar = function(name, value) thi

22、s.encVar = function(name, value) this.encodeURLString = function(string) this.runAJAX = function(urlstring) ;this.createAJAX();上述类的定义代码中，属性代表的含义分别是：AjaxFailedAlert属性为错误提示信息；requestFile属性为接收请求的服务器文件地址；method为提交的方式，这里采用“POST”方式；URLString属性为传递的字符串参数；encodeURIString属性为是否进行encode编码；execute属性为是否进行encode编码

23、。各种方法所执行的操作分别是：onLoading()方法是在服务器加载异步请求时执行；onLoaded()方法是在服务器加载完成时执行；onInteractive()方法是在服务器与客户端交互中时执行。上述3个方法，在本实例中，内容为空，不执行任何操作。onCompletion()方法是在客户端接收完成服务器返回数据后执行。这个方法只是客户端接收完成服务器返回数据后，执行的一个操作，还有其他操作在下文中讲到。下面依次列举其他方法所执行的操作。首先来看createAJAX()方法。该方法用来创建XMLHttpRequest对象，是在该类被实例化时就得到执行。代码如下所示： this.create

24、AJAX = function() try this.xmlhttp = new ActiveXObject(Msxml2.XMLHTTP); catch (e) try this.xmlhttp = new ActiveXObject(Microsoft.XMLHTTP); catch (err) this.xmlhttp = null; if(!this.xmlhttp & typeof XMLHttpRequest != undefined) this.xmlhttp = new XMLHttpRequest(); if (!this.xmlhttp) this.failed = tru

25、e; ;setVar()方法用来在传递的字符串参数后追加一个值，本实例中用到该方法，是在传递的字符串参数后追加时间参数。setVar()方法的代码如下所示： this.setVar = function(name, value) if (this.URLString.length 3) this.URLString = name + = + value; else this.URLString += & + name + = + value; encVar()方法，用来将单个传递的字符串参数及值，进行encode编码。encVar()方法的代码如下所示： this.encVar = funct

26、ion(name, value) var varString = encodeURIComponent(name) + = + encodeURIComponent(value); return varString; encodeURLString()方法，用来将整个传递的字符串参数及值，进行encode编码。该方法用到了上文中的encVar()方法，encodeURLString()方法的代码如下所示： this.encodeURLString = function(string) varArray = string.split(&); for (i = 0; i varArray.length; i+) u