ajax——登录系统 用户名是否存在校验

1.在用户名 输入出 设置失去焦点函数

<td><input type="text" id="username" name="username" class="text" maxlength="20" onblur="checkUsername()"/><span id="span1"></span>

</td>

2.编写函数体  ajax的四个步骤！  1.创建对象 2.设置监听 3.打开连接 4.发送数据

function checkUsername(){var username=document.getElementById("username").value;//1.创建XMLHttpRequest对象var xmlhttp;if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();  }else  {// code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }  //2.设置监听 onreadystatechange存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。  xmlhttp.onreadystatechange=function(){  if(xmlhttp.readyState==4&&xmlhttp.status==200)  {  document.getElementById("span1").innerHTML=xmlhttp.responseText;  }  }  //3.打开连接  xmlhttp.open("GET", "${pageContext.request.contextPath}/user_findNameBy.action?time="+new Date().getTime()+"&username="+username, true)  //4.发送数据  xmlhttp.send(null);}

3.编写action

public String findNameBy() throws IOException{String username=user.getUsername();User getuser=userService.findNameBy(username);HttpServletResponse response=ServletActionContext.getResponse();response.setContentType("text/html;charset=UTF-8");if(getuser!=null){response.getWriter().println("<font color='red'>用户名已存在</font>");}else{response.getWriter().println("<font color='green'>用户名可以使用</font>");}return NONE;}

效果显示：