网页设计AJAX表单对象,交互网页设计-Ajax与jQuery技术实现网页异步交互.pdf

目 录

一、异步交互的实现：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

1

交互网页设计

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

一个优秀的网站通常会有以下几个方面的优势：漂亮的设计、友好的界面、

规范的结构、智能化的后台处理以及充实的内容，另外还有一个不可忽视的就是

良好的交互性。网站的交互性通常是给用户网页浏览过程中良好体验的一个非

常重要的环节，满足用户的浏览需求，对用户的选择作出“及 ”的响应，是交互

性网页设计的关键。网页设计者一定要明白，缺乏交互性的网站即使看上去很美

也是没有生命力的。

“交互”的本质就是用户(客户端)发出请求，通过网络传送到服务器(服务器

端)，服务器端处理用户的请求后得到结果，再次通过网络传送到客户端，客户端

将返回的结果展示给用户。现在的交互式网页设计技术中，使用的最为广泛的就

是Ajax技术，那么什么是Ajax呢？如何实现Ajax的应用呢？以下就围绕着这两

个问题并通过实例进行说明。

一、异步交互的实现：

1、同步Web应用模型与异步Web应用模型：

传统的网页设计技术中，“交互”就已经存在，但与Ajax异步通信之间存在

有一定的区别，看下面图示：

2

客户端 客户端

用户　　用户 客户界面

活动　　活动

JavaScript 　　显示

HTTP HTML

请求 CSS HTTP XML

Ajax 引擎

请求

程序处理 程序处理

服务器端 服务器端

从图示中，可以看到，传统的Web应用模型中，客户端与服务器端是直接通

信的，客户端发出请求后，一直等待服务器端的返回数据，直到服务器端处理完

成返回数据后，客户端才会显示出处理结果，中间的数据传递过程和处理过程就

是客户的等待的过程，浏览器中往往是显示一片空白，这就是同步应用模型，其

最大缺点就是：页面全刷新，用户等待时间长，体验差。

异步Web应用模型中，弱化了客户界面前台的表单功能，不再由表单来实

现数据的传递，转而通过Ajax引擎向服务器端传递数据，Ajax功能的实现则通过

JavaScript语言来完成，服务器端返回的数据也通过Ajax引擎，利用JavaScript

来操作Html

DOM更新页面。由于与服务器端