1、 目 录 一、异步交互的实现： 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、页面交互分析： 1
2、9 6、小结： 20 1 交互网页设计 Ajax 与 jQuery 技术实现网页异步交互 一个优秀的网站通常会有以下几个方面的优势：漂亮的设计、友好的界面、 规范的结构、智能化的后台处理以及充实的内容，另外还有一个不可忽视的就是 良好的交互性。 网站的交互性通常是给用户网页浏览过程中良好体验的一个非常 重要的环节，满足用户的浏览需求，对用户的选择作出“及时”的响应，是交互 性网页设计的关键。网页设计者一定要明白，缺乏交互性的网站即使看上去很美 也是没有生命力的。 “交互”的本质就是用户（客户端）发出请求，通过网络传送到服务器（服 务器端） ，服务器端处理用户的请求后得到结果，再次通过网络传送到
3、客户端， 客户端将返回的结果展示给用户。现在的交互式网页设计技术中，使用的最为广 泛的就是 Ajax 技术，那么什么是 Ajax 呢？如何实现 Ajax 的应用呢？以下就围 绕着这两个问题并通过实例进行说明。 一、一、异步交互的实现：异步交互的实现： 1、同步同步 Web 应用模型与异步应用模型与异步 Web 应用模型：应用模型： 传统的网页设计技术中， “交互”就已经存在，但与 Ajax 异步通信之间存在 有一定的区别，看下面图示： 客户端客户端 用户 用户 活动 活动 HTTP HTML 请求 CSS 程序处理 服务器服务器端端 客户端客户端 客户界面 JavaScript 显示 Ajax
4、 引擎 HTTP XML 请求 程序处理 服务器服务器端端 2 从图示中，可以看到，传统的 Web 应用模型中，客户端与服务器端是直接通 信的，客户端发出请求后，一直等待服务器端的返回数据，直到服务器端处理完 成返回数据后，客户端才会显示出处理结果，中间的数据传递过程和处理过程就 是客户的等待的过程，浏览器中往往是显示一片空白，这就是同步应用模型，其 最大缺点就是：页面全刷新，用户等待时间长，体验差。 异步 Web 应用模型中，弱化了客户界面前台的表单功能，不再由表单来实现 数据的传递，转而通过 Ajax 引擎向服务器端传递数据，Ajax 功能的实现则通过 JavaScript语言来完成， 服务器端返回的数据也通过Ajax引擎， 利用JavaScript 来操作 Html DOM 更新页面。由于与服务器端的数据交流是由 Ajax 引擎完成，客 户在前台的操作是不会被打断的，即数据在传递的过程中，用户可以继续其他的 操作， 这实际上也就是我们常说的 “局部刷新” 技术， 用户的体验是非常完美的， 在良好的网络状态下，甚至与我们的本机应用程序操作体验近似。 2、
