直接上代码:
reg_ajax.html
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>Ajax请求servlet实现用户名是否存在验证</title>
</head>
<body>
<script type="text/javascript"> /** * 得到XMLHttpRequest对象 */ function getajaxHttp() { var xmlHttp; try { // Firefox,Opera 8.0+,Safari xmlHttp = new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("您的浏览器不支持AJAX！"); return false; } } } return xmlHttp; } /** * 发送ajax请求 * url--请求到服务器的URL * methodtype(post/get) * con (true(异步)|false(同步)) * functionName(回调方法名，不需要引号,这里只有成功的时候才调用) * (注意：这方法有二个参数，一个就是xmlhttp,一个就是要处理的对象) */ function ajaxrequest(url,methodtype,con,functionName) { //获取XMLHTTPRequest对象 var xmlhttp = getajaxHttp(); //设置回调函数（响应的时候调用的函数） xmlhttp.onreadystatechange = function() { //这个函数中的代码在什么时候被XMLHTTPRequest对象调用？ //当服务器响应时，XMLHTTPRequest对象会自动调用该回调方法 if (xmlhttp.readyState == 4) { if (xmlhttp.status == 200) { functionName(xmlhttp.responseText); } } }; //创建请求 xmlhttp.open(methodtype,url,con); //发送请求 xmlhttp.send(); } function checkUsername() { var username=document.getElementById('username').value; //调用ajax请求Servlet ajaxrequest("userServlet?username="+username,"POST",true,ckUsernameResponse); } function ckUsernameResponse(responseContents){ if (responseContents=='yes') { document.getElementById('usernameMsg').innerHTML="<font color='red'>用户名存在</font>"; document.getElementById('username').style="background-color: red"; }else{ document.getElementById('usernameMsg').innerHTML=""; document.getElementById('username').style="background-color: white"; } } </script>
<table>
<tr>
<td>用户名</td>
<td><input type="text" id="username" onblur="checkUsername()"/></td>
<td><div id="usernameMsg"></div></td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="text" id="email" /></td>
<td><div id="emailMsg"></div></td>
</tr>
</table>
</body>
</html>
请求的Servlet代码如下；
UserServlet.java
package cn.bestchance.servlet;
import java.io.IOException;
import java.util.ArrayList;
import javax.servlet.servletexception;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/** * Servlet implementation class UserServlet */
@WebServlet("/userServlet")
public class UserServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request,HttpServletResponse response) throws servletexception,IOException {
doPost(request,response);
}
/** * @see HttpServlet#doPost(HttpServletRequest request,HttpServletResponse response) */
protected void doPost(HttpServletRequest request,IOException {
String username=request.getParameter("username");
//这里使用ArrayList代替从数据库中查询数据
ArrayList<String> userList =new ArrayList<String>();
userList.add("admin");
userList.add("test");
userList.add("chance");
//验证用户名是否存在
boolean flag = false;
for (String string : userList) {
if(string.equals(username)){
flag = true;
break;
}
}
if(flag){//用户名已存在
response.getWriter().print("yes");
}else{//用户名不存在
response.getWriter().print("no");
}
}
}