SSH轻量级框架实践课件：使用AJAX改进和用户体验

使用AJAX改进和用户体验本章目标了解AJAX的应用场合理解AJAX的实现过程掌握AJAX的实现技巧了解XMLHttpRequest对象的作用理解XMLHttpRequest对象的属性和方法掌握XMLHttpRequest对象的应用WEB2.0互联网的前世今生互联网的发展经历了以下几个阶段：黑暗年代

静态网页时代

动态网页时代WEB2.0时代WEB2.0概述

WEB2.0有别于以往，主要体现在以下几个方面。用户贡献内容内容聚合——RSS更丰富的“用户体验”，新的交互方式为什么用AJAXAJAX技术使我们可以通过JavaScript发送请求到服务器，并获得返回结果。这就让我们可以在必要的时候只更新页面的一小部分，而不用整个页面都刷新，这称为“无刷新”技术。如图2-5所示，搜狐首页上的登录功能就使用了AJAX技术。输入登录信息单击“登录”按钮后，只是刷新登录区域的内容。首页上信息很多，这就避免了重复加载，浪费网络资源。这是无刷新技术的第一个优势。

再看土豆网的例子，在观看视频的时候，我们可以在页面上单击其他按钮执行操作，由于只是局部刷新，页面不会刷新，视频继续播放，不会受影响，如图2-6所示。这体现了无刷新技术的第二个优势：提供连续的用户体验，不因页面刷新而中断。什么是AJAXAiax是几个单词首字母的缩写：AsynchronousJavaScriptAndXml。AJAX并不是一种全新的技术，而是整合了几种现有的技术：JavaScript、XML和CSS。主要是JavaScript，我们通过JavaScript的XMLHttpRequest对象完成发送请求到服务器并获得返回结果的任务，然后使用JavaScript更新局部的网页。Asynchronous（异步）指的是JavaScript脚本发送请求后并不是一直等着服务器响应，而是发送请求后继续做别的事，请求响应的处理是异步完成的。XML一般用于请求数据和响应数据的封装，CSS用于美化页面样式。怎样使用AJAX我们用一个实际的案例解释AJAX的应用。在用户注册信息时，通常因为输入的用户名已被使用而一遍又一遍地重复注册，这便不是好的用户体验。如果当用户名输入框失去焦点时，就发送请求到服务器，判断用户是否存在。已经存在则弹出窗口提示：“用户名已经存在”。完成这个功能的过程中页面不刷新便可以解决这个难题了，如图2-9所示。传统Web应用解决方案传统的Web应用是同步交互的方式，这种同步交互方式的处理过程如下图所示：AJAX解决方案与传统的WEB应用不同，AJAX采用的是一种异步交互的处理方式，这种异步交互方式的处理过程如下图所示：AJAX相关技术AJAX应用程序所用到的基本技术包括：XHTML和CSS：基于标准的表示技术。JavaScript脚本：运行AJAX应用程序的核心代码，帮助改进与服务器应用程序的通信。文档对象模型DOM：通过JavaScript代码处理HTML结构和服务器返回的XML。XML和XSTL：进行浏览器和服务器两端的数据信息交换与处理。XMLHttpRequest：进行浏览器和服务两端的异步数据读取。XMLHttpRequest对象的方法和属性表2-1

XMLHttpRequest对象的一些典型方法发送请求首先，为得到XMLHttpRequest对象实例的一个引用，可以创建一个新的实例，这里，我们只需调用这个函数即可，即createXMLHttpRequest()；接着，告诉XMLHttpRequest对象，哪个函数会处理XMLHttpRequest对象状态的改变，为此要把对象的onreadystatechange属性设置为指向JavaScript函数的指针，即xmlHttp.onreadystatechange=handleResponse；然后，指定请求的属性。XMLHttpRequest对象的open()方法会指定发出的请求。open()方法通常取3个参数：一个是指示所用的方法（通常是GET或POST）的串，一个是表示目标资源URL的串，一个是boolean值，指示请求是否是异步的。上述代码片段采用GET请求方式，即xmlHttp.open("GET",url,true)；将请求发送给服务器最后，将请求发送给服务器。XMLHttpRequest对象的send()方法把请求发送给指定的目标资源。send()方法接受一个参数，通常是一个串或一个DOM对象。这个参数作为请求体的一部分发送到目标URL。当向send()方法提供参数时，要确保open()中指定的方法是POST。如果没有数据作为请求体的一部分被发送，则使用null响应数据服务器不一定都要按简单文本格式发送响应。当Content-Type响应首部正确地设置为text/xml（如果是简单文本，Content-Type响应首部则是text/plain），将响应作为XML数据发送完全是可以的（复杂的数据结构适合以XML格式发送）。此时可以使用XMLHttpRequest对象的responseXML属性来获取响应数据。信息搜索示例这一节，我们将综合运用本章所讲述的内容，来实现一个网页中常见的信息搜索功能。该实例模拟了音乐网站中常见的歌曲分类搜索，实现的效果如下图所示。在页面的选择列表框中列出所有的歌曲分类，当用户选择某一类别时，下方显示出所有该类别的歌曲信息。显示效果如图2-13所示：

总结

本章提供了几个例子，展示了应用AJAX技术改善用户体验的方法。相信这些例