效果圖展示：
異步(Asynchronous)的概念和同步(Synchronous)相對。當一個異步過程調用發出後，調用者不需要立刻得到結果，可以繼續做自己的事情，等到過程調用完畢，再通過回調函數通知調用方。而同步情況下，調用方必須等待對方得到結果，才能繼續運行
具體解釋參考http://www.w3school.com.cn/ajax/
前臺代碼
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gbk">
<title>welcome ,註冊本系統</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
<script type="text/javascript">
var xhr=null;
function checkUname(){
var username=document.myform.uname.value;
//alert(username);
if(username==""||username==null){
document.getElementById("msgDiv").innerHTML="<font color='red'>請輸入用戶名</font>";
}
//ajax的核心對象
//var xhr=new XMLHttpRequest();//只對非ie瀏覽器生效
if(window.ActiveXObject){
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}else{
xhr=new XMLHttpRequest();
}
var url="http://localhost:8080/12softsms0415/RegServlet?uname="+username;
//當核心對象的狀態發生改變，它的處理函數
xhr.onreadystatechange=haolejiaowo;
xhr.open("get",url,true);
xhr.send(null);
}
//纔是核心處理函數
function haolejiaowo(){
if(xhr.readyState==4&&xhr.status==200){
var result=xhr.responseText;//得到遠程服務器返回的結果
if(result.indexOf("true")!=-1){
alert(result);
document.getElementById("msgDiv").innerHTML="<font color='red'>用戶名已存在</font>";;
}else{
document.getElementById("msgDiv").innerHTML="可以註冊";
}
}
}
</script>
</head>
<body>
<div align="center">
<%-- 登錄 --%>
<div class="login" align="center">
<br/>
<h2>短信系統註冊</h2>
<form action="UserServlet" method="post" name="myform">
<input type="hidden" name="cmd" value="reg">
用戶名<input type="text" name="uname" class="input" οnblur="checkUname()"/>
<div id="msgDiv" style="display:inline">提示信息</div>
<br/>
密 碼<input type="password" name="upass" class="input"/><br/>
重複密碼<input type="password" name="upassrep" class="input"/><br/>
<input type="submit" value=" 註冊 " class="btn"/>
</form>
</div>
</div>
</body>
</html>
Servlet核心代碼
public boolean isExist(String username){
//模擬後臺數據庫有三個用戶
String[] names={"jack","rose","marry","12210810235"};
for (String s : names) {
if(username.equalsIgnoreCase(s)){
return true;
}
}
return false;
}
doGet()方法