jsp+ajax实现无刷新(鼠标离开文本框即验证用户名)实现思路

RanQi0

2013-01-29

jsp+ajax实现无刷新,鼠标离开文本框即验证用户名，操作如下：新建一个输入页面，起名为input.jsp,

代码如下：

<%@ page contentType="text/html; charset=utf-8"%> 
<html> 
<head> 
<title>jsp+ajax实现无刷新_鼠标离开文本框即验证用户名</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"> 
//创建XMLHttpRequest对象 
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(); 
//得到了一个html元素，在下面给这个元素的属性赋值 
var obj = document.all[objID]; 
//设置请求方法及目标，并且设置为异步提交 
ajax.open("post", serverPage, true); 
ajax.onreadystatechange = function() { 
if (ajax.readyState == 4 && ajax.status == 200) { 
//innerHTML是HTML元素的属性，如果您不理解属性那就理解为HTML元素的变量 
//ajax.responseText是服务器的返回值，把值赋给id=passport1的元素的属性 
//innerHTML这个属性或说这个变量表示一组开始标记和结束标记之间的内容 
obj.innerHTML = ajax.responseText; 
} 
} 
//发送请求 
ajax.send(null); 
} 
function CheckName() { 
getMyHTML("check.jsp?groupName="+name_form.group_name.value, "passport1"); 
} 
//这个函数的作用是当用户的焦点从其他地方回到group_name这个输入框时再给属性赋回原内容 
function sl(tx) { 
if(tx=='passport1') { 
document.all[tx].innerHTML = "<div class='reds' align='left'>4-20 个字符 (包括大小写字母,中文,数字,特殊字符等) 1个汉字等于2个字符，建议使用中文。注册后不可修改。</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 个字符 (包括大小写字母,中文,数字,特殊字符等) 
1个汉字等于2个字符，建议使用中文昵称。注册后不可修改。</span> 
</div> 
</td> 
</tr> 
</table> 
</form> 
</body> 
</html>

在新建一个校验页面，起名为check.jsp,代码如下：

代码如下：

<%@ page contentType="text/html; charset=utf-8"%> 
<% 
String action = ""; 
String groupname = ""; 
//检查用户名 
//用作数据库联接，可以根据你的情况修改，如果为测试可以不用*作记号的语句 
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 + "不合法！(长度为4到20位，且不能使用?#=等特殊字符)</div>"); 
} else if ("zhangsan".equals(groupname)) { 
out.println("<div class='reds' align='left'>" + "用户名" 
+ groupname + "已被占用，请重新输入！</div>"); 
} else { 
out.println("您的用户名可用"); 
} 
} catch (Exception e) { 
System.out.println(request.getServletPath() + " error : " 
+ e.getMessage()); 
} 
%>

ajax