ajax的简单应用：对表单进行预处理

最近在做一个网站注册模块的时候，想着用ajax对输入内容进行预处理，在表单提交之前先进行校验，可以提高用户体验。

实现了以后，把ajax部分的代码提取了出来。

demo的目录结构（register.jsp负责显示表单，register.js是ajxa处理，RegisterServlet.java对ajax请求进行预处理）：

register.jsp负责显示表单：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>








	

		用户名：
		

		


	

register.js是ajxa处理

window.onload = function(){
	document.getElementById("username").onchange = function(){
		 var username = document.getElementById("username").value;
		 var xhr = ajaxFunction();
		 xhr.onreadystatechange = function(){
			if(xhr.readyState==4){
				if(xhr.status==200||xhr.status==304){
					var data = xhr.responseText;
					document.getElementById("usernametest").innerHTML = data;
				}
			}
		 };
		 //路径后面加一个时间戳，防止浏览器缓存
		 xhr.open("POST","../RegisterServlet?timeStamp="+new Date().getTime(),true);
		 //如果是post请求方式，设置请求首部信息;如果get请求方式，可省略
		 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		 
		 xhr.send("username="+username);
	};
};

function ajaxFunction(){
   var xmlHttp;
   try{ // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
    }catch (e){
	   try{// Internet Explorer
	         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
	      }catch (e){
		      try{
		         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		      }catch (e){}
	      }
    }
	return xmlHttp;
 }

RegisterServlet.java对ajax请求进行预处理

response.setContentType("text/html;charset=UTF-8");
		PrintWriter out = response.getWriter();
		
		String username = request.getParameter("username");
		//判空
		if(username==null || username.trim().equals("")){
			out.println("用户名不能为空");
		} else{
			//判断用户名是否存在，可改作访问数据库查询等操作
			if(username.equals("sun")){
				out.println("用户名已存在");
			} else{
				out.println("可用用户名");
			}
		}