AJAX Java 验证用户名
需求:Java版本完成异步检查用户名是否存在。
一、页面制作一个表单
<h3>异步检查用户名是否存在</h3>
<form method="post">
用户名:<input id="nameID" type="text" name="name" /><span id="nameTip"></span><br/>
密码:<input type="password" name="password"/><br/>
<input type="submit" value="提交"/>
</form>
二、编写JS异步提交请求后台
<script type="text/javascript">
window.onload = function(){
document.getElementById("nameID").onblur = function(){
//获取name的值
var nameValue = this.value;
//1.创建异步对象
var ajax = null;
try{
//IE浏览器(低版本)
ajax = new ActiveXObject("microsoft.xmlhttp");
}catch(e){
//非IE浏览器或者IE高版本
ajax = new XMLHttpRequest();
}
//2.设置参数
ajax.open("POST","${pageContext.request.contextPath}/CheckUser");
//注意:异步提交不不会携带请求正文类型的,需要在请求send()之前手动设置请求正文类型
ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");
//3.发生请求 : 注意:POST方式提交参数放在这里
ajax.send("name="+nameValue);
//4.监听
ajax.onreadystatechange = function(){
if(ajax.readyState==4 && ajax.status==200){
var result = ajax.responseText;
if(result=="1"){
//已经被注册
document.getElementById("nameTip").innerHTML = "抱歉,该用户已经占用,请更换".fontcolor("red");
}else{
//没有被注册
document.getElementById("nameTip").innerHTML = "恭喜,该用户可用".fontcolor("green");
}
}
};
};
};
</script>
三、编写一个CheckUser的Servlet程序
/**
*
* @author http://www.yiidian.com
*
*/
//检查用户名是否已经被注册
public class CheckUser extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//1.接收参数
String name = request.getParameter("name");
System.out.println(name);
//2.检查
PrintWriter out = response.getWriter();
if(name.equals("yiidian")){
//已经被注册
out.write("1");
}else{
//没有被注册
out.write("0");
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
四、在web.xml配置Servlet程序
<servlet>
<servlet-name>CheckUser</servlet-name>
<servlet-class>com.yiidian.CheckUser</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>CheckUser</servlet-name>
<url-pattern>/CheckUser</url-pattern>
</servlet-mapping>
五、运行效果
输入不存在的用户名:
输入存在的用户名:
热门文章
优秀文章