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>


XMLHttpRequestAjax最核心的对象,它有以下几个重要的方法或属性:
    ●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中做出最终要显示的提示




注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com