Java Web第16章 改善用户体验——JSP和Ajax.doc

改善用户体验——JSP与Ajax第 改善用户体验——JSP与Ajax 第16章 想要成功，就要学会在机遇从头顶上飞过时跳起来抓住它，这样逮到机遇的概率大。比尔· 想要成功，就要学会在机遇从头顶上飞过时跳起来抓住它，这样逮到机遇的概率大。 比尔·盖茨 视频录像：XX分钟 随着Web 2.0概念的普及，追求更人性化、更美观的页面效果成了网站开发的必修课。Ajax正在其中充当着重要角色。由于Ajax是一个客户端技术，所以无论使用哪种服务器端技术（如JSP、PHP、ASP.NET等）都可以使用Ajax。相对于传统的Web应用开发，Ajax运用的是更加先进、更加标准化、更加高效的Web开发技术体系。本章将向读者介绍Aajx相关技术。本章视频要点如下：如何学习本章； 随着Web 2.0概念的普及，追求更人性化、更美观的页面效果成了网站开发的必修课。Ajax正在其中充当着重要角色。由于Ajax是一个客户端技术，所以无论使用哪种服务器端技术（如JSP、PHP、ASP.NET等）都可以使用Ajax。相对于传统的Web应用开发，Ajax运用的是更加先进、更加标准化、更加高效的Web开发技术体系。本章将向读者介绍Aajx相关技术。本章视频要点如下： 如何学习本章； 说明目前都哪些网站在应用Ajax； Ajax开发模式与传统开发模式的比较； 如何使用XMLHttpRequest对象； 通过Ajax向服务器发送请求； 通过Ajax处理服务器的响应； 通过Ajax实现检测用户名是否唯一； 进行Ajax重构； 通过Ajax实现实时显示公告信息； 通过Ajax实现无刷新的级联下拉列表； 通过Ajax实现上传文件时显示进度条。 16.1 Ajax简介 视频录像：光盘\MR\Video\16\Ajax简介.exe Ajax是Asynchronous JavaScript and XML的缩写，意思是异步的JavaScript与XML。Ajax并不是一门新的语言或技术，它是JavaScript、XML、CSS、DOM等多种已有技术的组合，可以实现客户端的异步请求操作。从而可以实现在不需要刷新页面的情况下与服务器进行通信，减少了用户的等待时间，减轻了服务器和带宽的负担，提供更好的服务响应。 16.1.1 当下谁在用Ajax 随着Web 2.0时代的到来，越来越多的网站开始应用Ajax。实际上，Ajax为Web应用带来的变化，我们已经在不知不觉中体验过了。例如，Google地图和百度地图。下面我们就来看看都哪些网站在用Ajax，从而更好的了解Ajax的用途。 Google搜索提示 在Google首页的搜索文本框中输入要搜索的关键字时，下方会自动给出相关提示。如果给出的提示有符合要求的内容，可以直接选择，这样可以方便用户。例如，输入“明日科技”后，在下面将显示如图16.1所示的提示信息。 图16.1 Google搜索提示页面 网易邮箱注册 在网易邮箱注册时，将采用Ajax实现不刷新页面检测输入数据的合法性。例如，在“用户名”文本框中输入w，将光标移动到“密码”文本框后，将显示如图16.2所示的页面。 图16.2 网易邮箱注册页面 明日科技编程词典服务网 进入到明日科技编程词典服务网的首页，将鼠标移动到各个栏目名称上时，将显示详细的工具提示。例如，将鼠标移动“编程竞技场”上，将显示如图16.3所示的效果。 图16.3 明日科技编程词典服务网首页 16.1.2 Ajax开发模式与传统开发模式的比较 在Web 2.0时代以前，多数网站都采用传统的开发模式，而随着Web 2.0时代的到来，越来越多的网站都开始采用Ajax开发模式。为了让读者更好的了解Ajax开发模式，下面将对Ajax开发模式与传统开发模式进行比较。 在传统的Web应用模式中，页面中用户的每一次操作都将触发一次返回Web服务器的HTTP请求，服务器进行相应的处理（获得数据、运行与不同的系统会话）后，返回一个HTML页面给客户端。如图16.4所示。 图16.4 Web应用的传统模型 而在Ajax应用中，页面中用户的操作将通过Ajax引擎与服务器端进行通信，然后将返回结果提交给客户端页面的Ajax引擎，再由Ajax引擎来决定将这些数据插入到页面的指定位置。如图16.5所示。 图16.5 Web应用的Ajax模型 从图16.4和图16.5中可以看出，对于每个用户的行为，在传统的Web应用模型中，将生成一次HTTP请求，而在Ajax应用开发模型中，将变成对Ajax引擎的一次JavaScript调用。在Ajax应用开发模型中通过JavaScript实现在不刷新整个页面的情况下，对部分数据进行更新，从而降低了网络流量，给用户带来了更好的体验。 16.1.3 Ajax技术特点 与传统的Web应用不同，A