如何使用Ajax改进用户体验

概念和定义
1.1.1        Web 2.0
Web 2.0不是一项技术或开发语言，而是一种思想。Web 2.0没有一个明确的界限，而是一个重力核心。可以将Web 2.0视作一组原则和实践，由此来把距离核心或远或近的网站组成为一个类似太阳系的网络系统，这些网站或多或少地体现着Web 2.0的原则。图

1为Web 2.0的“模拟图”，这个图仍处于演化阶段，但已经描绘出了从Web 2.0核心理念中衍生出的许多概念。应用Web 2.0开发的项目有很多，现在大家熟知有BitTorrent、博客、Web Service、RSS、维基百科全书、Google AdSense等等。

1.1.2        Ajax
Ajax也是Web 2.0程序的一个关键组件，它是几个单词首字母的缩写：Asynchronous（异步的）JavaScript And Xml。Ajax并不是一项全新的技术，而是几项技术的组合，每项技术自身都很繁荣，它们以强有力的全新方式结合起来。Ajax涵盖：
-- 运用XHTML和CSS实现基于各种标准的展示；
-- 运用文档对象模型（Document Object Model）实现动态显示和交互；
-- 运用XML和XSLT实现数据交换和操作；
-- 运用XMLHttpRequest实现异步数据检索；
-- JavaScript将所有这些绑定到一起。
主要是JavaScript，我们通过JavaScript的XMLHttpRequest对象完成发送请求到服务器并获得返回结果的任务，然后使用JavaScript更新局部的网页。异步指的是JavaScript脚本发送请求后，并不是一直等待服务器的响应，而是发送请求后继续做别的事，请求响应的处理时异步完成的。
需求：
使用Ajax实现用户注册功能
关键代码：

public class UserAction extends BaseAction {
        private UserBiz userBiz = null;
        public ActionForward doCheckUserExists(...)
                        throws ServletException, IOException {
                String uname = request.getParameter("uname");
                boolean bExists = this.getUserBiz().isExists(uname);
                PrintWriter out = response.getWriter();
                out.print(bExists);      
                return null;
        }
}

var xmlHttpRequest;
function createXmlHttpRequest(){
    if(window.ActiveXObject){
        return new ActiveXObject("Microsoft.XMLHTTP");
    }else if(window.XMLHttpRequest){
        return new XMLHttpRequest();
    }
}
// 发送请求到服务器，判断用户名是否存在
// 请求字符串
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("用户名可以使用");
        }


1.1.3        DWR
DWR（Direct Web Remoting）是一个开源的类库，可以帮助开发人员开发包含Ajax技术的网站。它可以允许在浏览器里的代码使用运行在WEB服务器上的Java方法，就像它就在浏览器里一样。它包含两个主要的部分：允许JavaScript从WEB服务器上一个遵循了Ajax原则的Servlet中获取数据，另一方面提供了一个JavaScript库可以帮助网站开发人员轻松地利用获取的数据来动态改变网页的内容。DWR可以动态生成基于Java类的JavaScript代码。这样WEB开发人员就可以在JavaScript里使用Java代码就像它们是浏览器的本地代码（客户端代码）一样；但是Java代码运行在WEB服务器端，而且可以自由访问WEB服务器的资源。出于安全的理由，WEB开发者必须适当地配置哪些Java类可以安全的被外部使用。
1.2        流程和步骤
1.2.1        使用DWR开发Ajax应用程序的步骤
（1）导入库文件
（2）在web.xml中配置
（3）编写要发布成Ajax的Java类
（4）创建并编写配置文件：/WEB-INF/dwr.xml
（5）在页面中编写JavaScript使用DWR
（6）运行测试
需求：
使用DWR实现用户注册功能
关键代码：


<servlet>
    <servlet-name>dwr</servlet-name>
    <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>dwr</servlet-name>
    <url-pattern>/dwr
public class UserManager {
                public boolean check(String uname) {
                        boolean exist= false;
                        Session session = HibernateSessionFactory.getSession ();
                        String hql = "from TblUser as user where user.uname='"+uname+"'";
                        try {
                                Query query = session.createQuery (hql);
                                List list = query.list();
                                if( list != null && list.size() >= 1 ){
                                        exist = true;
                                }
                                session.close ();
                                return exist;
                        } catch (RuntimeException re) {
                                throw re;
                        }
                }
}

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC
        "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
        "http://getahead.org/dwr/dwr20.dtd">
<dwr>
    <allow>
         <create creator="new" javascript="JUserChecker">
             <param name="class" value="com.aptech.jb.biz.UserManager" />
             <include method="check" />
         </create>
   </allow>
</dwr>

<script src='dwr/interface/JUserChecker.js'></script>
<script src='dwr/engine.js'></script>
<script src='dwr/util.js'></script>
function checkUserExists(oCtl){
    var uname = oCtl.value;
    // 发送请求到服务器，判断用户名是否存在
    JUserChecker.check (uname, haoLeJiaoWo);
}
function haoLeJiaoWo(isExist) {
    if (isExist == 1){
        alert("用户名已存在!");
    }
    else if(isExist == 0){
        alert("用户名不存在!");
    }
}
#SinaEditor_Temp_FontName