Ajax判断用户名是否存在并

最新推荐文章于 2024-12-09 23:06:54 发布

最新推荐文章于 2024-12-09 23:06:54 发布 · 57 阅读

本文详细介绍了如何在JavaScript中使用Ajax技术实现用户名验证功能，包括创建XMLHttpRequest对象、发送POST请求到服务器端进行验证，以及处理返回的响应信息。

//javaScript部分：var xmlHttpRequest; function createXmlHttpRetuest() { if (window.ActiveXObject) { try { xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP"); } return xmlHttpRequest; } else if (window.XMLHttpRequest) { return new XMLHttpRequest(); } } function validate(field) { if (trim(field.value).length != 0) { createXmlHttpRetuest(); url = "validate!validateIsUserNameExist.action?user.userId =" + field.value; xmlHttpRequest.open('post', url, true); xmlHttpRequest.setRequestHeader("if-Modified-Since", "0"); xmlHttpRequest.onreadystatechange = function() { var responseStr = trim(xmlHttpRequest.responseText); if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) { if (responseStr != '') { document.getElementById("isExitUserId").innerHTML = "<font color='red'>" + responseStr + "</font>"; } else { document.getElementById("isExitUserId").innerHTML = ""; } } else { alert('响应失败，错误码：' + xmlHttpRequest.status); } }; xmlHttpRequest.send(null); } else { document.getElementById("isExitUserId").innerHTML = ""; } }

html部分：

当焦点离开输入域的时候触发事件：

Action部分：

/** * 利用Ajax判断用户名是否存在 * * @author Jeelon * @return SUCCESS * @throws IOException */ public String validateIsUserNameExist() throws IOException { if ((user = tUserBiz.findById(user.getUserId())) != null) { HttpServletResponse response = ServletActionContext.getResponse(); response.setContentType("text/plain");// 设置输出为文字流 response.setCharacterEncoding("UTF-8"); PrintWriter out = response.getWriter(); out.print("*该用户已存在"); out.flush(); out.close(); } return null; }