一个用Ajax做的用户名验证程序
作者:zhanglincon 来源:zhanglincon的blog 发布时间:2007-10-21 20:40:00
标签:用户名,ajax
现在Ajax是一个相当火的东西,那么Ajax是什么呢?我的理解Ajax就是一个工具,就是一个客户端的技术,不管用何种服务器端技术都可以用Ajax。这里我说的是用java作为服务器端技术。闲言废语不要讲,表一表NB技术Ajax!
1,我先说一下这个例子要实现的效果,比如用户注册时要输入用户名,在输入完用户名,当用户输入下一项的时候,而且是在页面提交之前,利用Ajax判断用户输入的用户名是否合法可用。这就用到了Ajax的异步提交的作用
asp之家注:如果使用同步false验证的话代码会短很多,但是有个缺点,就是当服务器程序运行出问题或运行缓慢时,你的浏览器就处于假死状态,就是此时你什么都不能做,只能等着服务器返回信息,有时候甚至连电脑的其它程序都无法操作,一个字:卡...。
2,下面是程序的例子,一个用户输入数据的页面,一个是服务器端的相应。
<html>
<head>
<title>Ajax实例</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body >
<center>
<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是服务器的返回值(asp使用response.write "存在或不存在"即可),把值赋给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>
0
投稿
猜你喜欢
- (一).确认删除用法: 1. BtnDel.Attributes.Add("onclick","return
- 大家好,我是海拥,在今天的博客中,我们将讨论 Python 中简化代码的技巧。我清楚地记得当我选择学习 python 时,最令我震惊的是它的
- <?php function getIPLoc_sina($queryIP){ $url = &#
- 实现多表更新,尤其是A表和A的子表B表数据更新,下面是例子有A、B张表,其记录如下:A表c1
- 项目需要就在现有的服务器上面重新安装了个mysql服务器,还挺费劲儿呢,因为之前都是在我的笔记本上面试验的,它的系统是Ubuntu的,什么路
- Oracle shutdown的时候突然断电,导致使用sql/plus启动时无法连接到数据库,具体描述为:connection can no
- 水平线对于制作网页的朋友来说一定不会陌生,它在网页的版式设计中是非常有作用的,可以用来分隔文本和对象。
- 本文实例为大家分享了vue+moment实现倒计时的具体代码,供大家参考,具体内容如下示例代码<!-- 使用计算属性,传入截止日期 -
- 先来有用的use 数据库 update news set author='jb51' where author is nul
- 前言如果想分布式执行用例,用例设计必须遵循以下原则:1、用例之间都是独立的,2、用例a不要去依赖用例b3、用例执行没先后顺序,4、随机都能执
- python中的lambda通常是用来在python中创建匿名函数的,而用def创建的方法是有名称的,除了从表面上的方法名不一样外,pyth
- 处理数据集的过程中用到了mask 但是源数据集中只给了mask顶点的坐标值,那么在python中怎么实现生成只有0、1表示的mask区域呢?
- 导言在前面的教程里我们学习了DataList提供了一些风格样式的属性.而且我们还学习了如何定义HeadStyle, ItemStyle, A
- 前言本文给大家介绍的是关于在vue单页应用中使用jquery的相关内容,主要记录一个今天用到的vue-cli建立的应用中引入jquery的方
- 在Keras中可以自定义损失函数,在自定义损失函数的过程中需要注意的一点是,损失函数的参数形式,这一点在Keras中是固定的,须如下形式:d
- 前言本文介绍在 pandas 中如何读取数据行列的方法。数据由行和列组成,在数据库中,一般行被称作记录 (record),列被称作字段 (f
- 写在前面数据库本质上是一种共享资源,因此在最大程度提供并发访问性能的同时,仍需要确保每个用户能以一致的方式读取和修改数据。锁机制(Locki
- 1.不要放过任何一个看上去很简单的小编程问题——他们往往并不那么简单,或者可以引伸出很多知识点;2.会用asp,并不说明你会asp;3.看a
- 本文实例为大家分享了python多进程读图提取特征存npy的具体代码,供大家参考,具体内容如下import multiprocessingi
- os 包 和 bufio 包Go 标准库的 os 包,为我们提供很多操作文件的函数,如 Open(name) 打开文件、Create(nam