十：使用Ajax改进用户体验
十：使用Ajax改进用户体验

asynchronous :异步的
synchronous :同步的
focus :焦点
direct :直接
remote :远程
initial :初始化


目标
10.1:Web 2.0
10.1.1:互联网前世今生
10.1.2:Web2.0的特点
10.2：Ajax
10.2.1：为什么使用Ajax
10.2.2：什么是Ajax
10.2.2：怎样使用Ajax
10.3：Ajax框架
小结：


目标

10.1:Web 2.0
10.1.1:互联网前世今生
黑暗年代：数据和信息不通过电子途径传播和共享的年代。
静态网页时代：互联网提供静态网页给人们浏览。
动态网页时代：动态网页技术的发展史人们可以在互联网上发布信息，数据库技术的发展使互联网开始指导人们的事务。
Web 2.0时代：更佳的用户体验和更高的参与程度（如果说互联网的出现是一次革命，那Web2.0的登场时另外一次革命）。
10.1.2:Web2.0的特点
1），用户贡献内容；2），内容聚合：RSS；3），更丰富的“用户体验”，新的交互方式。（RSS是将信息规范化的一个标准，最主要的应用在Blog[部落格]中）
用户体验的七个目标：有价值，实用，好用，悦人，可信，易寻找，可获取。用户体验：使用软件（或浏览网站）是，很容易地找到想要找的东西，轻松完成想完成的事，视觉效果很舒服，用完后心情好。
应用：Web2.0站点普遍使用了Ajax等技术，出现了Tag等很多新的交互方式，让用户使用软件的过程连贯，方便，自然。举例：Google页面输入框的自动补全功能；可以在自己页面中添加Tab页和“小窗口”通过RSS聚合内容；小窗口可以关闭，最下化和进行个性化设置......
10.2：Ajax
10.2.1：为什么使用Ajax
Ajax技术：通过JavaScript发送请求到服务器，并得到返回结果而只是刷新局部页面（做到“无刷新”）。
无刷新技术：只刷新页面的一小部分，而不用整个页面都刷新。优点：1，避免重复加载，浪费网络资源；2，提供连续的用户体验，不被页面刷新中断。例如：Chinaren首页上的登录功能，tudou网上单击其他按钮并不影响视屏的连续播放，Google地图提供的拖动，放大，缩小等类似桌面程序的用户体验.....
10.2.2：什么是Ajax
Ajax——Asynchronous(异步的),JavaScript And Xml.Ajax只是整合了几种现有的技术：JavaScript,XML和CSS。
解释：主要是JavaScript：通过Javascript的XMLHttpRequest对象完成发送请求道服务器并获得返回结果的任务，然后使用Javascript更新局部的网页。
异步指的是：Javascript发送请求后并不是一直等着服务器的响应，而是发送请求后继续做别的事，请求响应是异步完成的。
XML一般用于请求数据和响应数据的封装，CSS用于美化页面样式。
10.2.2：怎样使用Ajax
编写Ajax代码前先开发好服务器端程序。然后，使用Javascript的XMLHttpRequest发送请求得到结果。
创建XMLHttpRequest对象实例的代码：
function createXmlHttpRequest(){
if(window.ActiveXObject){//如果是IE浏览器
return new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){//非IE浏览器
return new XMLHttpRequest();
}
}
使用XmlHttpRequest对象分四个步骤：
代码：
var xmlHttpRequest;
function checkUserExists(OCt1){
var uname=oCt1.value;
if(!uname){//??
alert("用户名不能为空");
oCt1.focus();
return ;
}
//发送请求道服务器，判断用户名是否存在
//请求字符串
var url="?operate=doCheckUserExists&uname="+uname;
//1,创建XMLHttpRequest组件
xmlHttpRequest=createXmlHttpRequest();
//2,设置回调函数
xmlHttpRequest.onreadystatechange=haolejiaowo;
//3,初始化XMLHttpRequest组件
xmlHttpRequest.open("GET","url",true);
//4,发送请求
xmlHttpRequest.send(null);
}

function haolejiaowo(){
if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
var b=xmlHttpRequest.responseText;
if(b=="true"){
alert("用户名已存在");
}else{
alert("用户名可以使用");
}
}
}
//
//
解释：
第2句代码：onreadystatechange是xmlHttpRequest对象的一个事件，haolejiaowo是一个JavaScript方法名。含义：在xmlHttpRequest对象的状态发生改变时调用haolejiaowo这个函数。
第3句代码：xmlHttpRequest对象的open方法用于初始化xmlHttpRequest对象，参数（请求发送的方式，请求的url,请求同异步否）；true表示是异步的（在调用send方法发送请求后不用等请求响应继续执行后面的代码）。
每次xmlHttpRequest对象状态改变都会调用这个方法。
xmlHttpRequest对象有5种状态：0，未初始化；1，已初始化；2，发送请求；3，开始接受结果；4，接受结果完毕。故而，我们只处理状态readyState为4的情况。
xmlHttpRequest.status表示服务器响应的状态码：200，正常；404，not found(没找到资源)；500，服务器出错。
只处理正常响应的情况，即xmlHttpRequest.status为200的情况。当xmlHttpRequest的readyState为4和status为200同时满足时，就可以从xmlHttpRequest.responseText中得到服务器响应的字符串了。
10.3：Ajax框架
Ajax框架简化编码，若使用DWR框架（http://getahead.org/dwr）需要先将Jar包导入项目，在web.xml中配置，并在/WEB-INF/下创建dwr.xml配置文件。
在web.xml中的配置:
<servlet>
<servlet-name>dwr</servlet-name>
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dwr</servlet-name>
<url-pattern>/dwr/*</url-pattern>