简单ajax应用实例：ajax+jsp实现用户名验证

来源：互联网发布：java统计数字出现次数编辑：程序博客网时间：2024/06/14 12:55

转载出处：http://blog.csdn.net/javaalpha/article/details/6559176

[c-sharp] view plain copy
ajax是个好东西，本文简单介绍ajax+jsp实现用户名验证的方法。  
html页面:  
<html>  
<title>AJAX实例：对用户名的校验</title>  
<!-- 引入verify.js -->  
<mce:script type="text/<a href="http://lib.csdn.net/base/javascript" class='replace_word' title="JavaScript知识库" target='_blank' style='color:#df3434; font-weight:bold;'>JavaScript</a>" src="verify.js" mce_src="verify.js"></mce:script>  
<body>  
   <!-- AJAX方式下不需要用表单来提交数据,因此不用写表单标签 -->  
   <!-- AJAX方式不需要name属性，需要id属性 -->  
   输入用户名后，当光标离开用户名输入框，即响应onblur事件。  
   用户名：<input type="text" id="username" onblur="verify()"/>  
   密   码：<input type="text" id="password"/>  
     
   <!-- 这个div用来存入服务器返回的信息，开始为空 -->  
   <!-- id属性定义是为了利用dom的方式找到一个节点进行操作 -->  
   <div id="result"></div>  
     
</body>  
  
verify.js文件  
//定义XMLHttpRequest对象  
var xmlhttp;  
function verify(){  
    var username=document.getElementById("username").value;  
      
      
    //创建XMLHttpRequest对象  
      
    if(window.XMLHttpRequest){  
      //针对FireFox,Mozillar,Opera,Safari,IE7,IE8  
       xmlhttp = new XMLHttpRequest();  
         
       //对某些特定版本的mozillar浏览器的bug进行修正  
       if(xmlhttp.overrideMineType){  
          xmlhttp.overrideMineType("text/xml");  
       }  
    }else if(window.ActiveXObject){  
       //针对IE5，IE5.5，IE6  
         
       //两个可以用于创建XMLHTTPRequest对象的控件名称。保存在一个JS数组中。  
       var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];  
       for(var i = 0; i<activeName.length; i++){  
           //取出一个控件名进行创建，如果成功就终止循环  
           try{  
              xmlhttp = new ActiveXObject(activexName[i]);  
              break;  
           }catch(e){}  
       }         
         
    }  
      
    if(xmlhttp){  
       alert("XMLHttpRequest对象创建成功！");  
       return;  
    }else{  
       alert("XMLHttpRequest对象创建失败！");  
    }  
      
      
    //注册回调函数,只写函数名，不能写括号，写括号表示调用函数。  
    xmlhttp.onreadystatechange = callback;  
      
    //设置连接信息(请求方式，请求的url,true表示异步方式交互)  
    xmlhttp.open("GET","AJAXServer?name=" + username, true);  
        
    //发送数据，开始和服务器进行交互。  
    xmlhttp.send(null);  
      
      
    //使用POST方式请求，需要手动设置http的请求头  
    //xmlhttp.setRequestHeader("Content-Type","aplication/x-www-form-urlencoded");  
    //xmlhttp.send("name=" + username);  
      
}  
  
//回调函数  
function callback(){  
   //判断对象的状态是否交互完成  
   if(xmlhttp.readyState == 4){  
     
      //判断http的交互是否成功  
      if(xmlhttp.status == 200){  
        
         //获取服务器端返回的数据（文本）  
         var resbonseText = xmlhttp.responseText;  
           
         //将数据显示在页面上  
         var divNode = document.getElementById("result");  
           
         //设置元素节点中的html内容  
         divNode.innerHTML = responseText;  
           
      }  
        
   }  
}  
   
后台servlet程序代码：  
  
public class AJAXServer extends HttpServlet{  
    protected void doPost(httpServletRequest request, HttpServletResbonse resbonse)throws ServletException,IOException{  
    doGet(request, resbonse);  
    }  
      
    protected void doGet(httpServletRequest request, HttpServletResbonse resbonse)throws ServletException,IOException{  
    try{  
        request.setCharacterEncoding("utf-8");  
        resbonse.setContentType("text/html; charset=utf-8");  
        PrintWriter out = resbonse.getWriter();  
        String old = request.getParameter("name");  
        if(old == null || old.length() == 0){  
        out.println("用户名不能为空！");  
        }else{  
             String name = old;  
             if(name.equals("zhangsan")){  
             out.println("用户名[" + name + "]已经存在！");  
             }else{  
                 out.println("用户名[" + name + "]尚未存在，可以使用！");  
             }  
        }  
    }catch(Exception e){  
       e.printStackTrace();  
    }  
      
    }  
}  

说明：
1.onreadystatechange 请求状态改变的事件触发器（readyState变化时会调用此方法）
2.readyState有五中状态：
   readyState = 0 未初始化
   readyState = 1 表示open方法成功调用
   readyState = 2 服务器已经应答客户端请求
   readyState = 3 交互中。Http头信息已经接收，响应数据尚未接收。
   readyState = 4 数据接收完成。

0 1