Ajax实现判断用户名是否重复
今天刚看完Ajax的一些简单的介绍，本着好好学习，day day up的信念，于是乎自己就写了这么一个简单的判断用户名是否存在的的小demo。好了，废话就不多说了，直接上代码吧，Let's go!
首先，我们需要写了我们的Jsp页面
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
用户名:<input type="text" name="username" id="username" /><span id="msg"></span>
</body>
<script>
window.οnlοad=function(){
//1.获取要判断的文本框
var nameElenment = document.getElementById("username");
//2.绑定失去焦点事件
nameElenment.οnblur=function(){
//3.获取用户输入的值
var username = this.value;
//4.获取XMLHttprequset
var xhr =new XMLHttpRequest();
//5.编写回调函数
xhr.onreadystatechange=function(){
//判断是否一切正常
if(xhr.readyState==4){
if(xhr.status==200){
var msg = document.getElementById("msg");
if(xhr.responseText=="true"){//说明该用户名，已经存在
msg.innerHTML="<font color='red'>用户名已存在</font>"
}else{
msg.innerHTML="可以使用"
}
}
}
}
//6.建立于服务器的链接
xhr.open("GET","${pageContext.request.contextPath}/Check_username?username="+username);
//7.发送请求
xhr.send();
}
}
</script>
</html>标红的地方一定不要写错啦。。。。楼主就是写了，contextPath找了半天都不知道哪里有错！！！！感觉自己笨笨哒。。。
接下来看看我们的Servlet
package com.zhuxingyi.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* 判断用户名是否重复
*/
@WebServlet("/Check_username")
public class Check_username extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
PrintWriter out = response.getWriter();
//获取用户输入的数据
String name = request.getParameter("username");
System.out.println(name);
//正常情况下，这里的数据应该是要从数据库中的查询出来的，但是我们这里是为了展示一下Ajax，所以就先写死了
if("admin".equals(name)) {//判断用户名是否存在
out.print(true);
}else {
out.print(false);
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
就写到这里了哦，楼主要去看世界杯啦。。
