struts2框架下用ajax实现网页局部刷新

             我们知道AJAX是AsynchronousJavascript And Xml ，他最大的功能就是异步通信实现页面的局部刷新。下面就是用户注册页面时，验证用户名是否已经被注册过（就是验证数据库中是否已经有了这个用户名，不是用户名语法规则的验证），其中最主要的是

XMLHttpRequest对象。它 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

    如下图所示当用户输入注册昵称然后改输入其他项时，后台已经开始查询用户名是否在数据库中存在，并将查询结果返回进行页面提示

      

页面striptease代码

<script type="text/javascript">         var xmlhttp;   function test(){         var username = document.getElementById("un").value;         //创建ajax中的XMLHttpRequest对象，针对于不同浏览器         if(window.XMLHttpRequest){              xmlhttp = new XMLHttpRequest();             }else{               xmlhttp = new ActiveXObject("MSXML2.XMLHTTP.6.0")                 }                           xmlhttp.onreadystatechange= test1;               xmlhttp.open("GET","user_usernameValidate.do?username="+username, true);               xmlhttp.send(null);                  }     function test1(){     alert(xmlhttp.readyState);                var sp = document.getElementById("msg");               if(xmlhttp.readyState==4){                    var flag = xmlhttp.responseText;                    if(flag==0)                        sp.innerHTML = "<font color='red'>用户名已存在</font>";                        else if(flag==1)                            sp.innerHTML = "<font color='green'>用户名可以使用</font>";                                                              }     }</script>

 页面html代码

<form action="user_testname.do" method="post">    昵称：<input type="text" name="username" id="un" onblur="test()"/>    <span id="msg"></span>    <br/>    密码：<input type="password" name="password"/><br/>    <input type="submit" value="确认登录"/><br/>    <input type="reset" value="取消"/><br/>    </form>

XMLHttpRequest是Ajax最核心的对象，它有以下几个重要的方法或属性：
    ●open()：建立到服务器的新请求。

    ●send()：向服务器发送请求。

    ●abort()：退出当前请求。

    ●readyState：提供当前 HTML 的就绪状态。

    ●responseText：服务器返回的请求响应文本。

其中readyState的五个状态含义为：

0: (Uninitialized) the send( ) method has not yet been invoked. 
 1: (Loading) the send( ) method has been invoked, request in progress. 
 2: (Loaded) the send( ) method has completed, entire response received.
 3: (Interactive) the response is being parsed. 
 4: (Completed) the response has been parsed, is ready for harvesting. 

 0 － （未初始化）还没有调用send()方法
 1 － （载入）已调用send()方法，正在发送请求
 2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
 3 － （交互）正在解析响应内容
 4 － （完成）响应内容解析完成，可以在客户端调用了

每一次readyState的变化都会触发readystatechange进而触发test1；

    从上面代码可知当“姓名”的文本框失去焦点就会触发test（）方法调用后台ACTION，action 返回的结果被responsetext接收，在script中做出最终要显示的提示