%@ page contentType="text/html; charset=utf-8"%>
html>
head>
title>jsp+ajax實(shí)現(xiàn)無(wú)刷新_鼠標(biāo)離開(kāi)文本框即驗(yàn)證用戶名/title>
meta http-equiv="Content-Type" content="text/html; charset=utf-8">
style type="text/css">
.style1 {
color: #FF3333;
font-weight: bold;
}
.style14 {
font-size: 13px
}
.text12black {
font-size: 12px;
}
/style>
/head>
body bottomMargin="0" leftMargin="0" topMargin="0" rightMargin="0"
marginheight="0" marginwidth="0">
table width="748" border="0" align="center" cellpadding="0"
cellspacing="0">
tr>
td height="5">/td>
/tr>
/table>
script language="javascript">
//創(chuàng)建XMLHttpRequest對(duì)象
function GetO() {
var ajax=false;
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (E) {
ajax = false;
}
}
if (!ajax typeof XMLHttpRequest!='undefined') {
ajax = new XMLHttpRequest();
}
return ajax;
}
function getMyHTML(serverPage, objID) {
var ajax = GetO();
//得到了一個(gè)html元素，在下面給這個(gè)元素的屬性賦值
var obj = document.all[objID];
//設(shè)置請(qǐng)求方法及目標(biāo)，并且設(shè)置為異步提交
ajax.open("post", serverPage, true);
ajax.onreadystatechange = function() {
if (ajax.readyState == 4 ajax.status == 200) {
//innerHTML是HTML元素的屬性，如果您不理解屬性那就理解為HTML元素的變量
//ajax.responseText是服務(wù)器的返回值，把值賦給id=passport1的元素的屬性
//innerHTML這個(gè)屬性或說(shuō)這個(gè)變量表示一組開(kāi)始標(biāo)記和結(jié)束標(biāo)記之間的內(nèi)容
obj.innerHTML = ajax.responseText;
}
}
//發(fā)送請(qǐng)求
ajax.send(null);
}
function CheckName() {
getMyHTML("check.jsp?groupName="+name_form.group_name.value, "passport1");
}
//這個(gè)函數(shù)的作用是當(dāng)用戶的焦點(diǎn)從其他地方回到group_name這個(gè)輸入框時(shí)再給屬性賦回原內(nèi)容
function sl(tx) {
if(tx=='passport1') {
document.all[tx].innerHTML = "div class='reds' align='left'>4-20 個(gè)字符 (包括大小寫字母,中文,數(shù)字,特殊字符等) 1個(gè)漢字等于2個(gè)字符，建議使用中文。注冊(cè)后不可修改。/div>";
}
}
/script>
form name="name_form" method=post>
table width="60%" height="80" align="center" border="1" bordercolor="#96D6E8"
class="text12black">
tr>
td width="22%" height="20" align="right">
用戶名：
/td>
td width="61%" align="left">
INPUT name="group_name" type="text" value="" size=30
maxlength="50" onBlur="javaScript:CheckName();"
onFocus="return sl('passport1');" />
br />
div id="passport1" style="color: red">/div>
/td>
td id="passport2" valign="top">
div class="explain_blue" align='left'>
span class="gray">4-20 個(gè)字符 (包括大小寫字母,中文,數(shù)字,特殊字符等)
1個(gè)漢字等于2個(gè)字符，建議使用中文昵稱。注冊(cè)后不可修改。/span>
/div>
/td>
/tr>
/table>
/form>
/body>
/html>

%@ page contentType="text/html; charset=utf-8"%>
%
String action = "";
String groupname = "";
//檢查用戶名
//用作數(shù)據(jù)庫(kù)聯(lián)接，可以根據(jù)你的情況修改，如果為測(cè)試可以不用*作記號(hào)的語(yǔ)句
try {
action = request.getParameter("action");
groupname = request.getParameter("groupName").trim();
if ("".equals(groupname)) {
out.println("div class='reds' align='left'>用戶名不能為空！/div>");
} else if (groupname.length() 4 || groupname.length() > 20) {
out.println("div class='reds' align='left'>用戶名"
+ groupname + "不合法！(長(zhǎng)度為4到20位，且不能使用?#=等特殊字符)/div>");
} else if ("zhangsan".equals(groupname)) {
out.println("div class='reds' align='left'>" + "用戶名"
+ groupname + "已被占用，請(qǐng)重新輸入！/div>");
} else {
out.println("您的用戶名可用");
}
} catch (Exception e) {
System.out.println(request.getServletPath() + " error : "
+ e.getMessage());
}
%>