网页后面设计服务器交互,交互网页设计(毕业论文).docx

目录

TOC \o "1-5" \h \z \o "Current Document" 一、异步交互的实现： 1

\o "Current Document" 1、同步 Web 应用模型与异步Web 应用模型： 1.

\o "Current Document" 2、Ajax 异步通信技术： 2..

\o "Current Document" 3、jQuery 库： 4...

\o "Current Document" 二、Ajax 与 jQuery 技术实现二级连动下拉列表 4

\o "Current Document" 1、任务描述： 4...

\o "Current Document" 2、数据库设计： 5...

\o "Current Document" 3、HTML 页面设计： 5...

\o "Current Document" 4、JavaScript脚本程序 main.js： 6.

\o "Current Document" 5、服务器端程序 6...

\o "Current Document" 6、分析总结： 8...

\o "Current Document" 三、一个完整的交互页面分析 9

\o "Current Document" 1、界面设计及设计思路： 9..

\o "Current Document" 2、相关 HTML 页面代码： 9...

\o "Current Document" 3、Js脚本设计： 1.3

\o "Current Document" 4、服务器端 ASP 程序设计： 1..6

\o "Current Document" 5、页面交互分析： 1..9.

\o "Current Document" 6、小结： 2..0.

学海无涯苦作舟!

学海无涯苦作舟!

交互网页设计

Ajax与jQuery技术实现网页异步交互

一个优秀的网站通常会有以下几个方面的优势：漂亮的设计、友好的界面、 规范的结构、智能化的后台处理以及充实的内容，另外还有一个不可忽视的就是 良好的交互性。网站的交互性通常是给用户网页浏览过程中良好体验的一个非常 重要的环节，满足用户的浏览需求，对用户的选择作出“及时”的响应，是交互 性网页设计的关键。网页设计者一定要明白，缺乏交互性的网站即使看上去很美 也是没有生命力的。

“交互”的本质就是用户(客户端)发出请求，通过网络传送到服务器(服 务器端)，服务器端处理用户的请求后得到结果，再次通过网络传送到客户端， 客户端将返回的结果展示给用户。 现在的交互式网页设计技术中，使用的最为广 泛的就是Ajax技术，那么什么是Ajax呢？如何实现Ajax的应用呢？以下就围 绕着这两个问题并通过实例进行说明。

一、异步交互的实现：

1同步Web应用模型与异步Web应用模型:

传统的网页设计技术中，“交互”就已经存在，但与Ajax异步通信之间存在 有一定的区别，看下面图示：

从图示中，可以看到，传统的 Web应用模型中，客户端与服务器端是直接通 信的，客户端发出请求后，一直等待服务器端的返回数据，直到服务器端处理完 成返回数据后，客户端才会显示出处理结果，中间的数据传递过程和处理过程就 是客户的等待的过程，浏览器中往往是显示一片空白，这就是同步应用模型，其 最大缺点就是：页面全刷新，用户等待时间长，体验差。

异步Wet应用模型中，弱化了客户界面前台的表单功能，不再由表单来实现 数据的传递，转而通过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对象、注册回调方法、打开