交互网页设计(毕业论文).doc
《交互网页设计(毕业论文).doc》由会员分享，可在线阅读，更多相关《交互网页设计(毕业论文).doc（22页珍藏版）》请在冰点文库上搜索。
武汉理工大学毕业设计
目录
一、异步交互的实现：
1
1、同步Web应用模型与异步Web应用模型：
1
2、Ajax异步通信技术：
2
3、jQuery库：
4
二、Ajax与jQuery技术实现二级连动下拉列表 4
1、任务描述：
4
2、数据库设计：
5
3、HTML页面设计：
5
4、JavaScript脚本程序main.js：
6
5、服务器端程序 6
6、分析总结：
8
三、一个完整的交互页面分析 9
1、界面设计及设计思路：
9
2、相关HTML页面代码：
9
3、Js脚本设计：
13
4、服务器端ASP程序设计：
16
5、页面交互分析：
19
6、小结：
20
交互网页设计
——Ajax与jQuery技术实现网页异步交互
一个优秀的网站通常会有以下几个方面的优势：
漂亮的设计、友好的界面、规范的结构、智能化的后台处理以及充实的内容，另外还有一个不可忽视的就是良好的交互性。
网站的交互性通常是给用户网页浏览过程中良好体验的一个非常重要的环节，满足用户的浏览需求，对用户的选择作出“及时”的响应，是交互性网页设计的关键。
网页设计者一定要明白，缺乏交互性的网站即使看上去很美也是没有生命力的。
“交互”的本质就是用户（客户端）发出请求，通过网络传送到服务器（服务器端），服务器端处理用户的请求后得到结果，再次通过网络传送到客户端，客户端将返回的结果展示给用户。
现在的交互式网页设计技术中，使用的最为广泛的就是Ajax技术，那么什么是Ajax呢？
如何实现Ajax的应用呢？
以下就围绕着这两个问题并通过实例进行说明。
一、异步交互的实现：
1、同步Web应用模型与异步Web应用模型：
传统的网页设计技术中，“交互”就已经存在，但与Ajax异步通信之间存在有一定的区别，看下面图示：
客户端
用户 用户
活动 活动
HTTPHTML
请求CSS
程序处理
服务器端
客户端
客户界面
JavaScript 显示
Ajax引擎
HTTPXML
请求
程序处理
服务器端
从图示中，可以看到，传统的Web应用模型中，客户端与服务器端是直接通信的，客户端发出请求后，一直等待服务器端的返回数据，直到服务器端处理完成返回数据后，客户端才会显示出处理结果，中间的数据传递过程和处理过程就是客户的等待的过程，浏览器中往往是显示一片空白，这就是同步应用模型，其最大缺点就是：
页面全刷新，用户等待时间长，体验差。
异步Web应用模型中，弱化了客户界面前台的表单功能，不再由表单来实现数据的传递，转而通过Ajax引擎向服务器端传递数据，Ajax功能的实现则通过JavaScript语言来完成，服务器端返回的数据也通过Ajax引擎，利用JavaScript来操作HtmlDOM更新页面。
由于与服务器端的数据交流是由Ajax引擎完成，客户在前台的操作是不会被打断的，即数据在传递的过程中，用户可以继续其他的操作，这实际上也就是我们常说的“局部刷新”技术，用户的体验是非常完美的，在良好的网络状态下，甚至与我们的本机应用程序操作体验近似。
2、Ajax异步通信技术：
Ajax（AsynchronousJavaScriptAndXML，异步JavaScript和XML）并不是什么新的语言或技术，而是使用JavaScript和XML完成的异步发送请求。
Ajax实际上就是JavaScript语言操作了一个新的对象，这个对象就是XMLHttpRequest对象，XMLHttpRequest就是异步发送请求的对象，这就是Ajax技术的核心，而开发Ajax程序则需要完成五件事情，分别是：
获取XMLHttpRequest对象、注册回调方法、打开请求、发送请求、编写回调方法。
l获取XMLHttpRequest对象：
由于不同的浏览器对W3C标准的支持程度是不同的，所以在网页编程中一定要考虑到浏览器的兼容问题
varxmlHttp; //定义全局的XMLHttpRequest
functioncreateXMLHttpRequest（）{
//适用IE6以下版本的IE
if（window.ActiveXObject）{
xmlHttp=newActiveXObject（"Microsoft.XMLHttp"）;
}
//适用IE7、IE8、FireFox等主流浏览器
elseif（window.XMLHttpRequest）{
xmlHttp=newXMLHttpRequest（）;
}
}
l注册回调方法：
回调方法会监听服务器端的响应，在发送异步请求后，回调方法会每隔一段时间被调用一次
xmlhttp.onreadystatechange=callback;
l打开请求：
open（）方法有三个参数，其中第一个参数是请求方式，可选值为GET或POST，建议使用POST；第二个参数是请求资源的URL，实际是服务器端响应程序；第三个参数是一个布尔值，true表示为异步请求。
为解决浏览器缓存问题，通常在URL中使用时间戳来欺骗浏览器。
xmlhttp.open（“POST”,URL,true）;
l发送请求:
GET请求与POST请求的设置的参数是不同的。
xmlHttp.send（content）
l编写回调方法：
回调函数通常是获取服务器的返回数据，并通过操作DOM，将结果显示在网页中。
在回调函数中通常要判断两个状态值，xmhttp.readyState==4代表对象读取服务器响应结束，xmlhttp.status==200表示服务器正确完成了响应。
functioncallback（）{
if（xmhttp.readyState==4）{
if（xmlhttp.status==200）{
vartext=xmlhttp.responseText;//获取服务器的响应文本
．．．
}
}
}
3、jQuery库：
Ajax程序的开发是一个很繁琐的事情，五个步骤缺一不可，遇到实际问题要处理的事情会更多，那么有简化的方法来开发Ajax程序吗？
答案就是jQuery。
jQuery是一个优秀的JavaScript库，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax的操作。
其独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
jQuery将所有的Ajax操作封装到Ajax方法中，使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题，极大地简化了我们的编程，其主要的Ajax方法有：
lload（url,[data],[callback]）：
载入远程HTML文件代码并插入至DOM中
ljQuery.get（url,[data],[callback]）：
使用GET方式来进行异步请求
ljQuery.post（url,[data],[callback],[type]）：
使用POST方式来进行异步请求
ljQuery.Ajax（options）:
通过HTTP请求加载远程数据
二、Ajax与jQuery技术实现二级连动下拉列表
1、任务描述：
下面是在网页中截取的图片：
由于乡镇较多，可能达到上百个，下拉列表太长，造成用户查找相应数据很困难，于是我们希望选择了首字母后，乡镇下拉列表中只显示对应字母开始的那些乡镇名，方便用户的操作，如下图效果：
首字母为B，乡镇只显示出对应的两项数据。
2、数据库设计：
我们使用最简单的ACCESS数据库来保存相关的乡镇数据，在ACCESS中建立数据表XIANGZHENG：
为了得到乡镇的首字母，我们建立查询cx_xzFirstLetter：
SELECTDISTINCTleft（xiangzhengEname,1）ASfirstLetter
FROMxiangzheng
ORDERBYleft（xiangzhengEname,1）;
3、HTML页面设计：
我们只需要建立一个非常简单的页面，下拉列表中的
HTML页面中关键代码：
首字母
乡镇
4、JavaScript脚本程序main.js：
前台的HTML文件中，表单
升级会员 