交互网页设计(毕业论文).docVIP

目 录 一、异步交互的实现： 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异步通信之间存在有一定的区别，看下面图示： 从图示中，可以看到，传统的Web应用模型中，客户端与服务器端是直接通信的，客户端发出请求后，一直等待服务器端的返回数据，直到服务器端处理完成返回数据后，客户端才会显示出处理结果，中间的数据传递过程和处理过程就是客户的等待的过程，浏览器中往往是显示一片空白，这就是同步应用模型，其最大缺点就是：页面全刷新，用户等待时间长，体验差。 异步Web应用模型中，弱化了客户界面前台的表单功能，不再由表单来实现数据的传递，转而通过Ajax引擎向服务器端传递数据，Ajax功能的实现则通过JavaScript语言来完成，服务器端返回的数据也通过Ajax引擎，利用JavaScript来操作Html DOM更新页面。由于与服务器端的数据交流是由Ajax引擎完成，客户在前台的操作是不会被打断的，即数据在传递的过程中，用户可以继续其他的操作，这实际上也就是我们常说的“局部刷新”技术，用户的体验是非常完美的，在良好的网络状态下，甚至与我们的本机应用程序操作体验近似。 2、Ajax异步通信技术： Ajax（Asynchronous JavaScript And XML，异步JavaScript和XML）并不是什么新的语言或技术，而是使用JavaScript和XML完成的异步发送请求。 Ajax实际上就是JavaScript语言操作了一个新的对象，这个对象就是XMLHttpRequest对象，XMLHttpRequest就是异步发送请求的对象，这就是Ajax技术的核心，而开发Ajax程序则需要完成五件事情，分别是：获取XMLHttpRequest对象、注册回调方法、打开请求、发送请求、编写回调方法。 获取XMLHttpRequest对象：由于不同的浏览器对W3C标准的支持程度是不同的，所以在网页编程中一定要考虑到浏览器的兼容问题 var xmlHttp; //定义全局的XMLHttpRequest function createXMLHttpRequest(){ //适用IE6以下版本的IE if(window.ActiveXObject){ xmlHttp = new ActiveXObject(Microsoft. XMLHttp); } //适用IE7、IE8、FireFox等主流浏览器 else if(window.XMLHttpRequest){ xmlHttp = new XMLHttpRequest(); } } 注册回调方法：回调方法会监听服务器端的响应，在发送异步请求后，回调方法会每隔一段时间被调用一次 xmlhttp.onreadystatechange = callback; 打开请求：open()方法有三个参数，其中第一个参数是请求方式，可选值为GET或POST，建议使用POST；第二个参数是请求资源的URL，实际是服务器端响应程序；第三个参数是一个布尔值，true表示为异步请求。为解决浏览器缓存问题，通常在URL中使用时间戳来欺骗浏览器。 x