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

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

《ASP+Ajax论文可拖动新闻主页.docx》由会员分享，可在线阅读，更多相关《ASP+Ajax论文可拖动新闻主页.docx（57页珍藏版）》请在冰点文库上搜索。

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

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

1系统概述

做任何事情，都必须做好准备工作，开发一个系统更是如此，所以才会出现很多种软件工程中的开发模型，例如瀑布模型。

在开始实际编码之前，首先为读者介绍一下系统的基本情况和需求，实现时涉及的知识和其他相关内容，便于读者更好地理解系统的结构。

本主页使用了基于ASP与Ajax技术，选择Access数据库，该主页的主要部分为JavaScript代码。

1.1需求分析

需求分析指的就是一个和客户交流的活动，以正确引导客户能够将自己的实际需求用较为适当的技术语言进行表达（或者由相关技术人员帮助表达）以明确项目目的的过程。

这个过程中也同时包含了对要建立的系统基本功能和模块的确立和策划活动。

所以在设计网站之前应该注意：

网站设计时的可增长性功能需求、安全性及可靠性的要求、网站的日常维护、网站的运行环境、页面总体风格以及美工效果、主页面和次级页面数量、内容管理及录入任务的分配和各种页面特殊效果等等因素。

总之，在拿到项目后应分成许多步骤来不同分析和实现，包括有：

●整体规划整个系统，按要求规划好每一个子系统。

●开发小组内部进行细分，根据工程的难易，每个人分配一个子系统或者多个子系统或者多个人分配一个子系统。

●根据要求需要每一个成员写出自己的网页连接文件，具体的目录和文件名。

再统一的定义网站整体的风格：

背景颜色、图片、表格及背景图片的属性，网站的Logo及其大小等等。

●每个设计人员按照规划将网站所涉及的所有静态页面做出来。

●开始分析网站的每一个子系统的数据结构，首先要规划出数据库结构，然后建立数据表。

●根据上面的数据表，建立数据库和相应的数据表，提交实现文档。

●组内的每个开发成员开始编写子系统代码。

框架设计，模块设计，评审最后的编码。

●由项目开发组组长或者负责人，开始合并各成员的子系统，并检测程序的完整和健壮性。

●编写用户手册

下面以可拖动新闻主页为例介绍一下需要的功能：

（1）栏目可拖动

整个页面分为3列，每一列内有若干个栏目。

鼠标拖动栏目的标题栏，可以将某一栏目移动到该列其他位置，或者其他列。

（2）可以添加、编辑及删除栏目

栏目的数量不是固定不变，用户可以添加自定义的栏目，也可以将不需要的栏目删除掉，还可以改变每一个栏目的高度和显示条数。

（3）用户的操作可以保存到数据库

只有上述2个功能的话，该主页只能算得上一个特效页面。

该页面的内容必须从数据库中读取，包括布局信息。

用户的添加、编辑及删除操作，都要记录到数据库中，这样才能将效果与网站结合起来。

1.2结构设计

可拖动新闻主页的主要作用是增加网站的趣味性，展示新闻仍然是最终目标。

该主页实现从数据库读取布局信息，根据布局信息，将各栏目分配到各自位置；各个新闻栏目的内容从数据库中读取，并按照用户定义的条数显示；各个新闻栏目接受用户的编辑及删除，系统自动将用户的这些操作记录到数据库。

这些功能的业务逻辑主要通过JavaScript代码实现，与服务器的通信采取发送异步请求，使得这些功能，只需要在一个HTML页面中就可以实现。

在表1中列出了该主页需要使用的文件列表及其完成的功能描述。

表1文件列表

类别

页面

功能

文件

Index.html

新闻主页

Conn.asp

创建连接数据库的文件

CreateNewType.asp

添加新栏目，将新栏目保存到数据库

getLayOut.asp

从数据库中获得布局信息

news_show.asp

显示单条新闻页面

readNews.asp

从数据库中读取新闻内容

saveLayOut.asp

保存布局信息到数据库

css\dragable-boxes.css

定义拖动栏目的样式表

css\news.css

定义整个页面样式表及单条新闻显示样式表

Data\Data.mdb

Access数据库文件

js\ajax.js

封装创建Ajax类的JavaScript文件

js\dragable-boxes.js

实现栏目可拖动的函数及代码

文件夹

css

包含系统用到的CSS样式表文件

data

包含系统中的数据库

images

包含系统页面显示的图片文件

js

包含页面用到的JavaScript代码文件

在通过表1对可拖动新闻主页进行结构分析之后得到了如图1所示的结构及各模块的功能，这里仅展示了主要的功能及文件描述。

图1结构功能图

2数据库设计

在对可拖动新闻主页进行了结构分析之后，接着就要考虑如何合理设计存储布局及新闻数据的数据表结构。

本系统使用Access作为后台数据库，下面介绍该系统数据表的创建。

首先在Access数据库中创建一个数据库Data.mdb，用于存放该网站所有数据。

然后在该数据库中创建一个布局表layout，用于存放主页的布局信息。

该表的详细信息如表2所示：

表2布局表

字段名

数据类型

是否允许空

备注

id

自动编号

否

递增

layoutstr

备注

是

布局信息字符串

接着创建一个新闻类别表newsType，用于存放新闻的类别，也就是栏目的相关信息。

该表的详细信息如表3所示：

表3新闻类别表

字段名

数据类型

是否允许空

备注

TypeNumber

文本（255）

是

新闻类别的标识

TypeName

文本（50）

是

新闻类别的名称

Level

数字

是

新闻类别的级别

SonNum

数字

是

子类别数量

最后创建新闻表news，用于存放发表的文章信息，如文章编号、分类编号、文章标题、文章内容、发布时间、查看次数等。

下面将对该表及其结构进行介绍，如表4所示：

表4新闻表

字段名

数据类型

是否允许空

备注

ID

自动编号

否

文章编号

title

文本（100）

是

文章标题

img

文本（50）

是

文章图片

content

备注

是

文章内容

keywords

文本（50）

是

文章关键字

creator

文本（50）

是

文章创建者

createDate

日期/时间

是

文章创建日期

infoFrom

文本（50）

是

文章来源

author

文本（50）

是

文章作者

uptime

日期/时间

是

文章上传日期

clickNum

数字

是

查看次数

3通用代码设计

在一个网站中有一些代码会在许多页面重复用到，每次用到都要编写一次，既费事又费力，也不能保证两次做的完全一样。

为了解决这个问题，采用的方法就是把通用的部分提取出来单独保存在一个文件中，然后在需要的地方包含进来。

例如创建连接数据库的代码，CSS样式表等。

3.1创建连接Access数据库

在操作数据库的时，首先都需要创建连接Access数据库的Connection对象，这部分代码可以单独保存到Conn.asp文件中。

该文件的代码如下所示：

<%

db="data/Data.mdb"

setconn=server.CreateObject（"adodb.connection"）

connstr="Provider=Microsoft.Jet.OLEDB.4.0;DataSource="&Server.MapPath（db）

conn.openconnstr

%>

3.2CSS样式表

使用样式表文件，可以实现样式的共用，也可以增加代码的可读性，这里主要用到了2个CSS样式表文件。

具体如下所示：

（1）news.css文件用于控件全部页面的背景、头部背景及单条新闻展示页面的样式，代码如下所示：

body{

font-family:

TrebuchetMS,LucidaSansUnicode,Arial,sans-serif;/*Fonttouse*/

background-color:

#317082;

font-size:

0.7em;

margin:

0px;

padding:

0px;

height:

100%;

width:

100%;

text-align:

center;

background-image:

url（../images/background2.gif）;

}

#mainContainer{

width:

100%;

margin:

0auto;

text-align:

left;

height:

100%;

padding-bottom:

30px;

}

#header{/*Headeratthetopofthedemo*/

background-image:

url（'../images/bg_heading.gif'）;

background-repeat:

repeat-x;

height:

99px;

}/*Logoimage*/

#headerimg{

float:

left;

}

#news_content{background-color:

#FFFFFF;}

.mainright{height:

30px;background-color:

#90ACC8;line-height:

30px;padding-left:

10px;}

.content{margin-left:

10px;margin-top:

20px;line-height:

24px;text-align:

left;width:

92%}

.contenth1{color:

#ff0066;font-size:

18px;font-weight:

bold;text-align:

center;margin-bottom:

0px;}

.contenth2{font-size:

12px;text-align:

center;font-weight:

normal;border-top:

#6661pxdashed;color:

#666;height:

24px;margin:

3px5px8px0;background:

#E5ECF9}

.pint{text-align:

center;padding-top:

30px;}

dragable-boxes.css文件用于控制拖动栏目的样式，这也是该主页的主要样式表，可以通过修改此文件的内容，改变主页的风格。

具体代码如下所示：

input{

font-size:

10px;

}

.dragableBox{/*栏目*/

background-color:

#FFF;

margin:

5px;

border-right:

1pxsolid#AAA;/*阴影*/

border-bottom:

1pxsolid#AAA;/*阴影*/

}

/*栏目内蓝色边框层*/

.dragableBoxInner{

border:

1pxsolid#317082;

}

.dragableBoxHeader{/*栏目标题栏*/

background-color:

#E2EBED;

height:

20px;

font-weight:

bold;

color:

#317082;

}

.dragableBoxHeaderspan{/*标题栏文字*/

line-heigth:

20px;

}

.dragableBoxHeaderimg,.dragableBoxHeaderspan{/*标题栏图片及文字*/

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;

}

.dragableBoxHeaderinput{

font-size:

10px;

}

.newsNumberOfItems{/*显示条数*/

color:

#F00;

}

.dragableBoxContent{/*栏目的主体部分*/

padding:

3px;

clear:

both;

}

#rectangleDiv{/*拖动时产生的图层*/

border:

1pxdottedred;

margin:

5px;

}

.closeButton{/*关闭按钮*/

padding:

2px;

border:

1pxsolid#317082;

line-height:

9px;

height:

9px;

margin:

2px;

color:

#317082;

padding:

2px;

padding-bottom:

3px;

}

.closeButton_over{/*关闭按钮*/

padding:

2px;

border:

1pxsolid#317082;

line-height:

9px;

padding:

2px;

padding-bottom:

3px;

margin:

2px;

background-color:

#317082;

color:

#FFF;

}

.dragableBoxStatusBar{/*栏目的标题栏*/

border-top:

3pxdouble#317082;

height:

14px;

background-color:

#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:

1pxsolid#317082;

padding:

2px;

margin-right:

2px;

margin-top:

2px;

}

img{

border:

0px;

}

4页面效果及功能实现

本章前面对可拖动新闻主页进行了概述，读者对该主页已经有了初步认识。

根据使用要求划分了功能模块，设计了数据库，并设计了CSS样式等通用代码。

下面就可以进行主页代码编写。

4.1页面整体布局代码

首先新建一个名为Index.html的HTML文件，引入需要的CSS文件及JavaScript文件，代码如下所示：

然后添加布局图层及表单。

其中ID为“mainContainer”的

图2可拖动主页显示效果

4.2创建封装Ajax类的JavaScript文件

新建一个名为ajax.js的JavaScript文件，该文件创建了一个关于Ajax的类，该类用来处理客户端与服务器端的所有通信。

首先来看该类的属性及方法的定义。

代码如下所示：

functionsack（file）{

this.AjaxFailedAlert="您的浏览器不支持Ajax功能！

";

this.requestFile=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）{}

this.encVar=function（name,value）{}

this.encodeURLString=function（string）{}

this.runAJAX=function（urlstring）{};

this.createAJAX（）;

}

上述类的定义代码中，属性代表的含义分别是：

AjaxFailedAlert属性为错误提示信息；requestFile属性为接收请求的服务器文件地址；method为提交的方式，这里采用“POST”方式；URLString属性为传递的字符串参数；encodeURIString属性为是否进行encode编码；execute属性为是否进行encode编码。

各种方法所执行的操作分别是：

onLoading（）方法是在服务器加载异步请求时执行；onLoaded（）方法是在服务器加载完成时执行；onInteractive（）方法是在服务器与客户端交互中时执行。

上述3个方法，在本实例中，内容为空，不执行任何操作。

onCompletion（）方法是在客户端接收完成服务器返回数据后执行。

这个方法只是客户端接收完成服务器返回数据后，执行的一个操作，还有其他操作在下文中讲到。

下面依次列举其他方法所执行的操作。

首先来看createAJAX（）方法。

该方法用来创建XMLHttpRequest对象，是在该类被实例化时就得到执行。

代码如下所示：

this.createAJAX=function（）{

try{

this.xmlhttp=newActiveXObject（"Msxml2.XMLHTTP"）;

}catch（e）{

try{

this.xmlhttp=newActiveXObject（"Microsoft.XMLHTTP"）;

}catch（err）{

this.xmlhttp=null;

}

}

if（!

this.xmlhttp&&typeofXMLHttpRequest!

="undefined"）

this.xmlhttp=newXMLHttpRequest（）;

if（!

this.xmlhttp）{

this.failed=true;

}

};

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=function（name,value）{

varvarString=encodeURIComponent（name）+"="+encodeURIComponent（value）;

returnvarString;

}

encodeURLString（）方法，用来将整个传递的字符串参数及值，进行encode编码。

该方法用到了上文中的encVar（）方法，encodeURLString（）方法的代码如下所示：

this.encodeURLString=function（string）{

varArray=string.split（'&'）;

for（i=0;i

u