準備jquery庫！
註冊頁面！
<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<head>
<title>
註冊
</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function UserNameCheck()
{
$.ajax({
type:"GET",
url:"doAjax.jsp",
dataType:"html",
data:"user_name="+$("#username").val(),
beforeSend:function(XMLHttpRequest){
$("#check_username").text("querying ,please wait");
},
success:function(meg){
$("#check_username").html(meg);
$("#check_username").css("color","red");
//$("#check_username").css("css","red");
},
complete:function(XMLHttpRequest,textState){
},
error:function(){
// error option
}
}); }
</script>
</head>
<body>
<div align="center">
<form name="regForm" method="post" action="doAjax.jsp">
<table width="70%" border="1">
<tr align="center">
<td colspan="2">
用戶註冊
</td>
</tr>
<tr>
<td width="24%" align="center">
用戶名:
</td>
<td width="76%">
<input name="username" type="text" id="username" onBlur="UserNameCheck()">
<span id="check_username"></span>
</td>
</tr>
<tr>
<td align="center">
密碼:
</td>
<td>
<input name="password" type="password" id="password">
</td>
</tr>
<tr>
<td align="center">
重複密碼:
</td>
<td>
<input name="repassword" type="password" id="repassword">
</td>
</tr>
<tr>
<td align="center">
email:
</td>
<td>
<input name="email" type="text" id="email">
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="button" name="Submit" value="按鈕" onClick="Form_Submit()">
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
jqury+ajax代碼！
function UserNameCheck()
{
$.ajax({
type:"GET",
url:"doAjax.jsp",
dataType:"html",
data:"user_name="+$("#username").val(),
beforeSend:function(XMLHttpRequest){
$("#check_username").text("querying ,please wait");
},
success:function(meg){
$("#check_username").html(meg);
$("#check_username").css("color","red");
//$("#check_username").css("css","red");
},
complete:function(XMLHttpRequest,textState){
},
error:function(){
// error option
}
}); }處理請求用戶請求的JSP代碼！
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/xml"
%>
<%!String[] usernameList = new String[] { "Tom", "Jerry", "Brain" }; %>
<%! //聲明方法用來判斷用戶名是否已經存在
public boolean isContain(String param) {
for (int i = 0; i < usernameList.length; i++) {
if (usernameList[i].equals(param)) {
return true;
} else
continue;
}
return false;
} %>
<%
String username = (String) request.getParameter("user_name");
String xml = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>";
if (username.equals("") || username == null) {
xml +="<message><info>Username is required !</info></message>";
}else if(this.isContain(username))
{
xml += "<message><info>The username has exsites,Please choose other username!</info></message>";
}
else
{
xml += "<message><info>合法!</info></message>";
}
//
System.out.print(xml);
response.getWriter().write(xml);
%>
鼠標onblur事件會觸發函數調用！