|
天堂之光 人间希望
你我共同品味
JAVA的浓香.
Linux的清芬. |
| « | August 2025 | » | | 日 | 一 | 二 | 三 | 四 | 五 | 六 | | | | | | 1 | 2 | | 3 | 4 | 5 | 6 | 7 | 8 | 9 | | 10 | 11 | 12 | 13 | 14 | 15 | 16 | | 17 | 18 | 19 | 20 | 21 | 22 | 23 | | 24 | 25 | 26 | 27 | 28 | 29 | 30 | | 31 | | | | | | | |
| 链接 |
联系我
msn:zhanglincon@hotmail.com |
| Blog信息 |
|
blog名称:
日志总数:99
评论数量:281
留言数量:4
访问次数:806925
建立时间:2005年11月17日 |
| |
|
 [Ajax]一个用Ajax做的用户名验证程序
原创空间, 软件技术
zhanglincon 发表于 2006/6/15 23:37:50 |
| 现在Ajax是一个相当火的东西，那么Ajax是什么呢？我的理解Ajax就是一个工具，就是一个客户端的技术，不管用何种服务器端技术都可以用Ajax。这里我说的是用java作为服务器端技术。闲言废语不要讲，表一表NB技术Ajax！
1，我先说一下这个例子要实现的效果，比如用户注册时要输入用户名，在输入完用户名，当用户输入下一项的时候，而且是在页面提交之前，利用Ajax判断用户输入的用户名是否合法可用。这就用到了Ajax的异步提交的作用。
2，下面是程序的例子，一个用户输入数据的页面userInput.jsp,一个是服务器端的相应。
------------userInput.jsp-------------------
<%@ page contentType="text/html; charset=GBK" %><html><style type="text/css"><!--@import url("../aqgc/style_c.css");--></style><head><title>Ajax实例</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><style type="text/css"><!--.style1 { color: #FF3333; font-weight: bold;}.style14 {font-size: 13px}
.text12black { font-size: 12px;}--></style>
<script language="JavaScript" src="/images1/functions.js"></script></head><body bottomMargin="0" leftMargin="0" topMargin="0" rightMargin="0" marginheight="0" marginwidth="0"><center><SCRIPT language=JavaScript src="/comm/include_header.asp" type=text/javascript></SCRIPT><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("GET", 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 CheckGroupName(){ getMyHTML("http://www.***.com/check.jsp?action=checkgroupname&groupName="+name_form.group_name.value, "passport1"); } //这个函数的作用是当用户的焦点从其他地方回到group_name这个输入框时再给属性赋回原内容 function sl(tx){ if(tx=='passport1'){ document.all[tx].innerHTML = "<div class='explain_blue' align='left'>4-20 个字符 (包括大小写字母,中文,数字,特殊字符等) 1个汉字等于2个字符，建议使用中文。注册后不可修改。</div>"; } } function check() {
if(document.name_form.group_name.value.length<1) { alert("请您给您的群组取个名字！"); document.name_form.group_name.focus(); return false; }
if(!OK()){ return false; }
document.name_form.action='addgroup.do'; document.name_form.target='_parent'; document.name_form.submit(); } function OK(){ var obj = document.getElementById("passport1"); if(obj.innerHTML.indexOf("可用")==-1){ return false; } return true; }
--></script>
<form name="name_form" method=post>
<td height="200" valign="top" >
<table width="100%" height="270" 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:CheckGroupName();" onFocus="return sl('passport1');" /> </td> <td id="passport1" valign="top"><div class="explain_blue" align='left' ><span class="gray">4-20 个字符 (包括大小写字母,中文,数字,特殊字符等) 1个汉字等于2个字符，建议使用中文昵称。注册后不可修改。</span></div> </td> </tr></table> </td> </form></BODY></html>
---------------check.jsp-----------------
<%--/************************************************************************** 程序名称: check.jsp ** 功能描述: 检查用户注册信息合法性 ** 作 者: 张丽鹏 2006/05/26 created ** ***************************************************************************/--%><%@ page contentType="text/xml; charset=GBK" %><%@ page import="com.xiaoyouxi.db.ConnectionManager,com.xiaoyouxi.group.*"%><%@ page import="sun.jdbc.rowset.*"%><%@ page import="com.xiaoyouxi.util.RegisterCheck"%>
<%String action=request.getParameter("action");
//检查用户名if("checkgroupname".equals(action)){ //System.out.println("come in checkgroupname"); //用作数据库联接，可以根据你的情况修改，如果为测试可以不用*作记号的语句 ConnectionManager manager=ConnectionManager.getInstance();//****************** String groupname=request.getParameter("groupName").trim(); if("".equals(groupname)){ System.out.println("null"); out.println("<div class='explain_blue' align='left'>用户名不能为空！</div>"); } else if(groupname.length()<4 || groupname.length()>20 || !RegisterCheck.checkUserName(groupname) ){ out.println("<div class='explain_blue' align='left'>用户名"+groupname+"不合法！(长度为4到20位，且不能使用?#=等特殊字符)</div>"); } else{//******************
String sql="select g_name from jy_group where g_name='"+groupname+"'";//****************** try {//****************** CachedRowSet crs=manager.getRs(sql);//****************** if(crs.next() && crs.size()>0){//****************** out.println("<div class='explain_blue' align='left'>用户名"+groupname+"已被占用，请重新输入！</div>");//****************** }//****************** else{
out.println("您的用户名可用"); }
} catch(Exception e){ System.out.println("checkgroupname:"+e); } }
}%> |
|
|
回复:一个用Ajax做的用户名验证程序
原创空间, 软件技术
Rolex Replica(游客)发表评论于2012/8/9 18:16:21 |
| Very soon, you will be given all plum offers and your path for success will be paved. You will attain success in all phases of life. These [url=http://www.totallysoaked.com/]rolex replica watches[/url] will become an integral part of your life and you will not be able to get apart from them. Since these are reasonably priced, you can have many of these without burning a hole in your pocket. |
|
|
回复:一个用Ajax做的用户名验证程序
原创空间, 软件技术
asdasd(游客)发表评论于2008/11/24 15:14:30 |
| dfsdfsdfdfsdfsdfsdffssfsdfsdsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf |
|
|
回复:一个用Ajax做的用户名验证程序
原创空间, 软件技术
天蓝(游客)发表评论于2008/11/23 23:56:08 |
|
» 1 »
|