ajax,servlet实现无刷新验证用户名是否存在

1.jsp页面中
<input class="input-text" type="text" name="loginName" value="" οnblur="checkLoginName(this)"/>
2.js页面
//注意把req设置为全局变量,否则onchange事件不执行

var req = null;
	function checkLoginName(obj) {
		alert("事件执行");
		var n = obj.value;
		var vn = null;
		if (window.XMLHttpRequest) {
			req = new XMLHttpRequest();
		} else {
			req = new ActiveXObject("Microsoft.XMLHttp");
		}
		if (!req)
			return;
		req.open("POST", "servlet/CheckLoginName", true);//true表示同步,false表示异步
		req.onreadystatechange = handleStateChange
		req.send(n);
	}


	function handleStateChange(){
		alert(req.readyState);
		if (req.readyState == 4 && req.status == 200) {
			vn = req.responseText;
			if (vn == "用户名已经存在!") {
				$("Erro1").innerHTML = vn;
			} else {
				$("Erro1").innerHTML = "";
			}
		}
	}

3.servlet页面CheckLoginName中

public class CheckLoginName extends HttpServlet{
		public void doPost(HttpServletRequest request, HttpServletResponse response)
				throws ServletException, IOException {
			//注意这里要设置charset否则跳转时会出现乱码
			response.setContentType("text/plain;charset=GBK");
			request.setCharacterEncoding("GBK");
			BufferedReader br = request.getReader();
			StringBuilder sb = new StringBuilder();
			String line = null;
			while ((line = br.readLine()) != null) {
				sb.append(line);
			}
			br.close();
			Biz b = new Biz();
			//biz中的方法检测用户名是否已经存在
			if (b.checkExistsLoginName(sb.toString())) {
				response.getWriter().write("用户名已经存在!");
			} else {
				System.out.println(sb.toString());
				response.getWriter().write(sb.toString());
			}
		}
	}

4.web.xml

<servlet>
	<servlet-name>test</servlet-name>
	<servlet-class>com.huyao.Test</servlet-class>
</servlet>
<servlet-mapping>
	<servlet-name>test</servlet-name>
	<url-pattern>servlet/CheckLoginName</url-pattern>
</servlet-mapping>