十：使用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>
</servlet-mapping>
这样，不用在UserAction中添加方法，DWR可以将普通的类发布成Javascript可以调用的脚本对象。（直接创建UserManager类，提供check方法，用于检查用户名是否已存在）
配置dwr.xml：
主要是配置<create>节点，<create>节点有两个属性，creator属性设为new,表示通过new创建对象示例；javascript属性表示页面引用时的脚本对象名；子节点<param>，定义要发布的类别，name属性设为class，value属性设为要发布的类别名；子节点<include>定义暴露的方法。
<dw>
<allow>
<create creator="new" javascript="JUserChecker">
<param name="class" value="com.aptech.jb.biz.UserManager"/>
<include method="check"/>
</create>
</allow>
</dw>
启动服务器，浏览http://localhost:8080/zf10/dwr/,可以看到通过DWR发布的类的列表，单击链接可以打开对应的实例页面，查看并查看实例代码，
<script src='dwr/interface/JUserCheck.js'></script>
<script src='dwr/engine.js'></script>
<script src='dwr/util.js'></script>
function checkUserExists(oCt1){
var name=oCt1.value;
//发送请求到服务器，判断用户名是否存在
JUserchecker.check(uname,haolejiaowo);
}
function haolejiaowo(isExist){
......//同未用DWR框架时代码相同
}
解释：导入定义了JUserChecker脚本对象的dwr/interface/JUserChecker.js和dwr/engine.js,导入包括一些工具方法的dwr/util.js.
通过JUserChecker直接调用check方法，参数（对应原方法的参数，处理响应数据的的函数的函数名），而对于要调用的函数需要的参数，DWR会将Java类check方法执行的返回值传给它。

小结：
通过Ajax技术可以通过JavaScript发送请求到服务器，只需要更新局部页面而不需要刷新整个页面。
Ajax并不是全新技术，而是整合了Javascript，XML和CSS新的应用方式。
Ajax技术的核心组件是XMLHttpRequest,可以向服务器发送异步请求并获得响应文本。
使用DWR框架可以简化Ajax开发，通过在dwr.xml配置可以暴露Java类给JavaScript脚本。
通过http://appserver:8080/app/dwr/可以浏览并查看已经通过DWR发布的Java类列表以及页面实例代码。参考这些代码对编写我们自己的程序很有帮助。