直接上代碼:
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, HttpServletResponse response) throws ServletException, 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");
}
}
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。