交互网页设计毕业论文Word文件下载.docx

资源描述

交互网页设计毕业论文Word文件下载.docx

《交互网页设计毕业论文Word文件下载.docx》由会员分享，可在线阅读，更多相关《交互网页设计毕业论文Word文件下载.docx（15页珍藏版）》请在冰豆网上搜索。

交互网页设计毕业论文Word文件下载.docx

../js/"

label>

所属乡镇名称<

/label>

首字母<

selectid="

xzletter"

name="

/select>

乡镇<

xiangzhengname"

4、JavaScript脚本程序：

前台的HTML文件中，表单<

form>

都已经被省略，数据的传递完全通过后台Ajax程序完成，下面是利用jQuery编写的Ajax源代码

$（document）.ready（function（）{

al（）;

$.get（"

../asp/"

{letter:

tLetter,time:

curtime},function（d）{

$（"

#xiangzhengname"

）.empty（）.append（d）;

}）;

};

et（"

{},function（d）{

$（"

#xzletter"

）.append（d）.change（getXzOpt）;

getXzOpt（）;

}）;

5、服务器端程序

服务器端用于连接数据库，在数据库中获取前台页面所需要的数据，并传递给前台Ajax引擎。

submakeOption（runsql）

thesql=runsql

thesql,conn,3

ifnotandthen

arr=（）

y=ubound（arr,2）'

相当于记录个数

fori=0toy

（"

optionalue='

arr（0,i）&

/option>

）

endif

endsub

文件源代码：

Setrs=（"

sql="

selectfirstletterfromcs_xzFirstLetter"

=true

（"

optionvalue='

全部<

makeOptionsql

（）

setrs=nothing

tletter=（"

letter"

iftletter="

ortletter=emptyorisnull（tletter）then

sql="

selectxiangzhengnamefromxiangzheng"

else

selectxiangzhengnamefromxiangzhengwhereleft（xiangzhengename,1）='

tletter&

endif

6、分析总结：

上述几个文件中，中间的桥梁就是文件，实际上也就是它完成了Ajax引擎的作用，由于使用jQuery风格，可以看到代码只有几行，却完成了Ajax程序需要完成的五件事件，并且将结果写入了网页，我们再来简要分析一下其中的关键代码：

$.get（"

$.get（）方法是jQuery封装的Ajax方法，jQuery将XMLHttpRequest对象的获取、回调方法的注册、打开请求、发送请求这四个步骤都已经封装在get（）方法中，我们只需要简单的调用即可，其完整的格式是：

（url,[data],[callback]），它有三个参数，第一个参数url为发送请求的地址，第二个参数是GET方式传递的数据，第三个参数是回调函数，也是Ajax的第五件事情在这里完成。

回调函数中，通过一个语句$（"

）.append（d）.change（getXzOpt）就完成了两大功能，一个将服务器端数据写入了页面，这是append（）方法完成的，二是给首字母下拉列表注册了change事件，这是change（）方法完成的，在这里，我们不得不感叹jQuery代码的简练，完美地体现了其WRITELESS,DOMORE的宗旨。

三、一个完整的交互页面分析

1、界面设计及设计思路：

整个页面设计左右两部分，左侧菜单项，当点击时将会导入右侧的表单，表单内的下拉列表项均由数据库中相关数据控制，当点击“提交”按钮后，当前表单中录入的数据会写入到数据库中，并且在下方显示出新添加的数据行。

下方的“编辑”按钮可实现当前行数据的修改，“删除”按钮可实现当前行数据的删除。

2、相关HTML页面代码：

左侧菜单页的主要部分：

%@LANGUAGE="

VBSCRIPT"

CODEPAGE="

65001"

%=65001%>

%="

utf-8"

title>

醴陵市安全生产培训信息管理系统<

/title>

linkhref="

../css/"

rel="

stylesheet"

type="

text/css"

/head>

body>

divid="

toper"

h1>

/h1>

/div>

mainer"

lefter"

h1class="

fsta"

基本数据录入<

divclass="

subdiv"

ahref="

bname="

qiyeinfo"

企业基本信息<

/a>

stu"

新训学员数据录入<

…………

righter"

righter1"

……

righter2"

/body>

表单单独放在一个文件中（）：

h2>

企业基本信息录入<

/h2>

formid="

addform"

tableborder="

cellpadding="

id="

formtable"

tr>

td>

企业名称<

/td>

inputname="

qyname"

text"

class="

isdatanotnull"

size="

20"

/tr>

企业拼音简称<

qyEname"

isdata"

readonly="

readonly"

所属行业<

hangyeselect"

首字母<

乡镇<

法人<

faren"

联系电话<

tele"

isdataphonenotnull"

企业性质<

qiyexingzhi"

optionselected="

selected"

value="

私营企业"

私营企业<

optionvalue="

三资企业"

三资企业<

联营企业"

联营企业<

集体所有制企业"

集体所有制企业<

全民所有制企业"

全民所有制企业<

企业规模<

guimoselect"

主要产品<

mainproduct"

50"

登录密码<

pass"

inputtype="

button"

autocreate"

自动生成"

是否允许添加数据<

addpower"

是"

是<

否"

否<

inputtablename="

addsubmit"

确认提交"

inputid="

formreset"

reset"

重新输入"

/table>

/form>

3、Js脚本设计：

菜单项的点击，将会激活js脚本中相应的代码，脚本中使用了jQuery代码应用Ajax技术导入右侧表单，并将表单中的下拉列表初始化，并为下拉列表及提交按钮等绑定事件，实现用户的提交请求等功能。

ind（'

click'

function（）{

#leftera"

）.removeClass（"

cur"

$（this）.addClass（"

bn=$（this）.attr（"

bname"

switch（bn）

{

case"

$（"

#righter1"

）.load（"

../html/"

rightAlign（）;

varcurtime=newDate（）;

curtime=（）;

al（）;

$.get（"

{letter:

$（"

}）;

};

$.get（"

{time:

$（"

getXzOpt（）;

}）;

#hangyeselect"

）.append（d）;

#guimoselect"

$（"

#autocreate"

）.live（"

click"

vartmp1=parseInt（）*10000）;

vartmp2="

;

for（i=0;

i++）{tmp2+=（97+parseInt（）*26））;

vartmp=（）+tmp1

#pass"

）.val（tmp）;

/****企业名称录入时自动填写汉字的拼音*****/

$（'

#qyname'

）.bind（'

change'

{here:

$（'

#qyEname'

）},writePinYin）;

$（'

keyup'

}）;

showTable（bn）;

ive（"

vartbname=$（this）.attr（"

tablename"

varnotHasNull=checkForm（tbname）;

if（!

notHasNull）

alert（"

数据不完整！

return;

}

varilen=$（"

.isdata"

）.length;

varsendValue="

tablename="

+tbname+"

for（i=0;

ilen;

i++）

tempValue=escape（$（"

）.eq（i）.val（））;

sendValue+="

input"

+i+"

+tempValue;

if（i!

=ilen-1）

sendValue+="

}

$.post（"

sendValue,function（data）{

//添加记录后显示表内数据

showTable（tbname）;

//清除表单中的数据

clearForm（tbname）;

alert（data）;

4、服务器端ASP程序设计：

从上段JS程序中可以看到，内部有多段Ajax程序与服务器端的多个ASP程序进行了交互，这里不将ASP程序全部列举。

文件的作用有两个，一是表单被调入时即在表单下方显示出表内最近被更新的数据，二是当添加了新数据时，马上将新数据显示在表格内，下面是它的源程序代码：

--#includefile="

-->

=999

tbname=（"

curpici=（"

pici"

iftbname="

ortbname=emptythen

tbname="

xiangzheng"

ortbname="

then

topten="

top10"

select"

topten&

*from"

tbname&

orderbyiddesc"

dimfieldname

selectcasetbname

case"

fieldname=array（"

企业基本信息（最近录入）"

企业名称"

拼音简称"

所属行业"

所属乡镇"

法人代表"

联系电话"

企业性质"

企业规模"

主要产品"

登录密码"

添加权限"

case…………

endselect

（"

h3id='

tablebt'

tablename='

fieldname（0）&

/h3>

sql,conn,3

table>

trclass='

fieldname'

操作<

ID<

fori=1to（"

fieldname（i）&

显示出所有的记录

whilenot

recordarea"

if（int（curid）=rs（0））then

（"

currecordarea"

id='

record"

rs（0）&

inputtype='

button'

class='

edit'

numbers="

value='

编辑'

dele'

删除'

labelclass='

recordno'

fori=1to（"

rs（i）&

wend

5、页面交互分析：

现在我们看看具体执行时的效率，为了方便，我们使用FireFox浏览器的插件FireBug对页面的代码执行过程及时间上进行分析。

下图是我们点击左侧“企业基本信息”链接后，执行的一系列与服务器的交互操作：

可以看到，通过Ajax方式一共与服务器端有六次数据请求，我们通过下表对其功能分别进行说明：

次序

服务器端程序

耗用时间

作用

第1次

56ms

远程导入表单

第2次

77ms

显示下方表格初始数据

第3次

66ms

初始化乡镇首字母下拉列表

第4次

1ms

初始化行业下拉列表

第5次

110ms

初始化规模下拉列表

第6次

3ms

初始化乡镇名下拉列表

我们再看看第4次Ajax交互的过程：

1）提交的数据请求参数time，这只是一个时间戳：

2）响应Http头信息与请求Http头信息，从请求头信息最后一行可以看到请求对象使用XMLHttpRequest，说明这是

展开阅读全文