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

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

 ajax是个好东西，本文简单介绍ajax+jsp实现用户名验证的方法。
 html页面:

 AJAX实例：对用户名的校验

 "text/http://lib.csdn.net/base/javascript" class='replace_word' title="JavaScript知识库" target='_blank' style='color:#df3434; font-weight:bold;'>JavaScript" src="verify.js" mce_src="verify.js">



    输入用户名后，当光标离开用户名输入框，即响应onblur事件。
    用户名："text" id="username" οnblur="verify()"/>
    密   码："text" id="password"/>



    "result">

  

     

  

  

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

           //取出一个控件名进行创建，如果成功就终止循环  

           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 数据接收完成。