站长资源网络编程
jsp+ajax实现无刷新(鼠标离开文本框即验证用户名)实现思路
简介jsp+ajax实现无刷新,鼠标离开文本框即验证用户名，操作如下：新建一个输入页面，起名为input.jsp, 复制代码 代码如下: <%@ page contentType="text/html; charset=utf-8"%> jsp+ajax实现无刷</div>
<div class="news_infos"><div id="MyContent">jsp+ajax实现无刷新,鼠标离开文本框即验证用户名，操作如下：新建一个输入页面，起名为input.jsp, <BR><U>复制代码</U> 代码如下: <BR><%@ page contentType="text/html; charset=utf-8"%> <BR><html> <BR><head> <BR><title>jsp+ajax实现无刷新_鼠标离开文本框即验证用户名</title> <BR><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <BR><style type="text/css"> <BR>.style1 { <BR>color: #FF3333; <BR>font-weight: bold; <BR>} <BR>.style14 { <BR>font-size: 13px <BR>} <BR>.text12black { <BR>font-size: 12px; <BR>} <BR></style> <BR></head> <BR><body bottomMargin="0" leftMargin="0" topMargin="0" rightMargin="0" <BR>marginheight="0" marginwidth="0"> <BR><table width="748" border="0" align="center" cellpadding="0" <BR>cellspacing="0"> <BR><tr> <BR><td height="5"></td> <BR></tr> <BR></table> <BR><script language="javascript"> <BR>//创建XMLHttpRequest对象 <BR>function GetO() { <BR>var ajax=false; <BR>try { <BR>ajax = new ActiveXObject("Msxml2.XMLHTTP"); <BR>} <BR>catch (e) { <BR>try { <BR>ajax = new ActiveXObject("Microsoft.XMLHTTP"); <BR>} <BR>catch (E) { <BR>ajax = false; <BR>} <BR>} <BR>if (!ajax && typeof XMLHttpRequest!='undefined') { <BR>ajax = new XMLHttpRequest(); <BR>} <BR>return ajax; <BR>} <BR>function getMyHTML(serverPage, objID) { <BR>var ajax = GetO(); <BR>//得到了一个html元素，在下面给这个元素的属性赋值 <BR>var obj = document.all[objID]; <BR>//设置请求方法及目标，并且设置为异步提交 <BR>ajax.open("post", serverPage, true); <BR>ajax.onreadystatechange = function() { <BR>if (ajax.readyState == 4 && ajax.status == 200) { <BR>//innerHTML是HTML元素的属性，如果您不理解属性那就理解为HTML元素的变量 <BR>//ajax.responseText是服务器的返回值，把值赋给id=passport1的元素的属性 <BR>//innerHTML这个属性或说这个变量表示一组开始标记和结束标记之间的内容 <BR>obj.innerHTML = ajax.responseText; <BR>} <BR>} <BR>//发送请求 <BR>ajax.send(null); <BR>} <BR>function CheckName() { <BR>getMyHTML("check.jsp?groupName="+name_form.group_name.value, "passport1"); <BR>} <BR>//这个函数的作用是当用户的焦点从其他地方回到group_name这个输入框时再给属性赋回原内容 <BR>function sl(tx) { <BR>if(tx=='passport1') { <BR>document.all[tx].innerHTML = "<div class='reds' align='left'>4-20 个字符 (包括大小写字母,中文,数字,特殊字符等) 1个汉字等于2个字符，建议使用中文。注册后不可修改。</div>"; <BR>} <BR>} <BR></script> <BR><form name="name_form" method=post> <BR><table width="60%" height="80" align="center" border="1" bordercolor="#96D6E8" <BR>class="text12black"> <BR><tr> <BR><td width="22%" height="20" align="right"> <BR>用户名： <BR></td> <BR><td width="61%" align="left"> <BR><INPUT name="group_name" type="text" value="" size=30 <BR>maxlength="50" onBlur="javaScript:CheckName();" <BR>onFocus="return sl('passport1');" /> <BR><br /> <BR><div id="passport1" style="color: red"></div> <BR></td> <BR><td id="passport2" valign="top"> <BR><div class="explain_blue" align='left'> <BR><span class="gray">4-20 个字符 (包括大小写字母,中文,数字,特殊字符等) <BR>1个汉字等于2个字符，建议使用中文昵称。注册后不可修改。</span> <BR></div> <BR></td> <BR></tr> <BR></table> <BR></form> <BR></body> <BR></html> <BR> <BR>在新建一个校验页面，起名为check.jsp,代码如下： <BR><U>复制代码</U> 代码如下: <BR><%@ page contentType="text/html; charset=utf-8"%> <BR><% <BR>String action = ""; <BR>String groupname = ""; <BR>//检查用户名 <BR>//用作数据库联接，可以根据你的情况修改，如果为测试可以不用*作记号的语句 <BR>try { <BR>action = request.getParameter("action"); <BR>groupname = request.getParameter("groupName").trim(); <BR>if ("".equals(groupname)) { <BR>out.println("<div class='reds' align='left'>用户名不能为空！</div>"); <BR>} else if (groupname.length() < 4 || groupname.length() > 20) { <BR>out.println("<div class='reds' align='left'>用户名" <BR>+ groupname + "不合法！(长度为4到20位，且不能使用?#=等特殊字符)</div>"); <BR>} else if ("zhangsan".equals(groupname)) { <BR>out.println("<div class='reds' align='left'>" + "用户名" <BR>+ groupname + "已被占用，请重新输入！</div>"); <BR>} else { <BR>out.println("您的用户名可用"); <BR>} <BR>} catch (Exception e) { <BR>System.out.println(request.getServletPath() + " error : " <BR>+ e.getMessage()); <BR>} <BR>%> <BR></div>
</div>
</div>
<div class="share"> </div>
<div class="nextinfo">
<p>上一篇：<a href="http://m.wwsws.com/show/1/163139.html" title="JSP中实现系统登录后的退出原理及代码">JSP中实现系统登录后的退出原理及代码</a></p>
<p>下一篇：<a href="http://m.wwsws.com/show/1/163141.html" title="jsp中session过期设置及web.xml配置学习">jsp中session过期设置及web.xml配置学习</a></p>
</div>
<div class="otherlink">
<h2>最新资源</h2>
<ul>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/620773.html" one-link-mark="yes" title="群星《歌手2024 第3期》[FLAC/分轨][204.16MB]"><span>群星《歌手2024 第3期》[FLAC/分轨][204.16MB]</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/620772.html" one-link-mark="yes" title="群星《乘风2024 第6期》[320K/MP3][57.95MB]"><span>群星《乘风2024 第6期》[320K/MP3][57.95MB]</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/620771.html" one-link-mark="yes" title="群星《乘风2024 第6期》[FLAC/分轨][170.72MB]"><span>群星《乘风2024 第6期》[FLAC/分轨][170.72MB]</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/620770.html" one-link-mark="yes" title="陈立强1995-我爱你胜过这世界[福茂][WAV+CUE]"><span>陈立强1995-我爱你胜过这世界[福茂][WAV+CUE]</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/620769.html" one-link-mark="yes" title="群星-《2014年十大发烧唱片精选HQCD》[低速原抓WAV+CUE]"><span>群星-《2014年十大发烧唱片精选HQCD》[低速原抓</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/620768.html" one-link-mark="yes" title="群星2013-青春缤纷辑压箱宝大公开3CD2[新加坡限量版][WAV整轨]"><span>群星2013-青春缤纷辑压箱宝大公开3CD2[新加坡限</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/620767.html" one-link-mark="yes" title="林育群.2013-BalladShow（日本版）【环球】【WAV+CUE】"><span>林育群.2013-BalladShow（日本版）【环球】【WAV+</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/620766.html" one-link-mark="yes" title="陈加洛.1992-痛到感觉不到【宝丽金】【WAV+CUE】"><span>陈加洛.1992-痛到感觉不到【宝丽金】【WAV+CUE】</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/620765.html" one-link-mark="yes" title="群星.2023-宿命之敌电视剧原声带【韶愔音乐】【FLAC分轨】"><span>群星.2023-宿命之敌电视剧原声带【韶愔音乐】【</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/620764.html" one-link-mark="yes" title="東京事変-大発見[FLAC+CUE]"><span>東京事変-大発見[FLAC+CUE]</span></a>
</li>
</ul>
</div>
</div>
<div class="sidebar">
<div class="cloud"><h2 class="hometitle">一句话新闻</h2><a href="/3G/1/604690.html"><ul>Windows上运行安卓你用过了吗<br><br>在去年的5月23日，借助Intel Bridge Technology以及Intel Celadon两项技术的驱动，Intel为PC用户带来了Android On Windows（AOW）平台，并携手国内软件公司腾讯共同推出了腾讯应用宝电脑版，将Windows与安卓两大生态进行了融合，PC的使用体验随即被带入到了一个全新的阶段。</ul></a></div>
</div>
</article>
<footer>
<p>友情链接:<a href="http://www.imxmx.com/" title="杰晶网络" target="_blank">杰晶网络</a> <a href="http://www.ddrfans.com/" title="DDR爱好者之家" target="_blank">DDR爱好者之家</a> <a href="http://www.nqxw.com/" title="南强小屋" target="_blank">南强小屋</a> <a href="http://www.paidiu.com/" title="黑松山资源网" target="_blank">黑松山资源网</a> <a href="http://www.dyhadc.com/" title="白云城资源网" target="_blank">白云城资源网</a> <a href="/sitemap.xml">SiteMap</a></p>
<p>Design by <a href="http://m.wwsws.com">伏龙阁资源网</a> <a href="/">http://m.wwsws.com</a></p>
</footer>
<script src="/images/nav.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function() {
var elm = jQuery('#left_flow2');
var startPos = jQuery(elm).offset().top;
jQuery.event.add(window, "scroll", function() {
var p = jQuery(window).scrollTop();
jQuery(elm).css('position', ((p) > startPos) ? 'fixed' : '');
jQuery(elm).css('top', ((p) > startPos) ? '0' : '');
});
});
</script>
</body>
</html>