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

ajax是个好东西，本文简单介绍ajax+jsp实现用户名验证的方法。 html页面: <html> <title>AJAX实例：对用户名的校验</title> <!-- 引入verify.js --> <mce:script type="text/javascript" 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 数据接收完成。