首先先聲說抱歉，因爲在寢室，所以效率低一些，就不寫一些關於ajax的知識了，如果想學可以去w3school搜索ajax
這裏主要實現了通過ajax來判斷用戶名是否已經被註冊，爲了實現簡單後臺的匹配直接使用了admin
一、前端實現
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<base href="${pageContext.request.scheme }://${pageContext.request.serverName}:${pageContext.request.serverPort }/${pageContext.request.contextPath}"/>
</head>
<body>
<script type="text/javascript">
function checkUsername(username) {
var xhr;
if(window.XMLHttpRequest)
{
xhr=new XMLHttpRequest();
}
else
{
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onreadystatechange=function()
{
if(xhr.readyState==4)
{
if(xhr.status==200)
{
var myname=document.getElementById("myname");
myname.innerHTML=xhr.responseText;
}
else
{
alert("錯誤");
}
}
}
xhr.open("GET","/myweb/checkUsername.do?username="+username,true);
//發送相關 的請求
xhr.send();
}
</script>
姓名:<input type="text" name="username" onblur="checkUsername(this.value)"><span id="myname" style="font-size: 12px"></span><br>
密碼 :<input type="password" name="userpassword">
</body>
</html>
二、Servlet
package com.ui.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;
/**
* Servlet implementation class chechUsername
*/
@WebServlet("/checkUsername.do")
public class chechUsername extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public chechUsername() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out=response.getWriter();
String username=request.getParameter("username");
System.out.println(username);
if("admin".equals(username))
{
out.print("<font color='red'>用戶名已經註冊</font>");
}
else
{
out.print("<font color='green'>用戶名可以</font>");
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
三、實現結果
