一个用Ajax做的用户名验证程序
作者：zhanglincon 来源：zhanglincon的blog 时间：2007-10-21 20:40:00
现在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>
标签：用户名,ajax
0
投稿猜你喜欢
Python实现8个概率分布公式的方法详解
2022-05-14 08:14:37
python基础教程之元组操作使用详解
2023-11-29 01:18:52
Python如何把字典写入到CSV文件的方法示例
2021-04-02 08:27:52
vue+springboot实现项目的CORS跨域请求
2024-05-09 09:48:23
基于asyncio 异步协程框架实现收集B站直播弹幕
2021-07-14 19:34:40
UltraEdit编辑器免费激活方法
2023-09-14 22:19:33
MySQL索引失效十种场景与优化方案
2024-01-26 06:07:33
浅谈python在提示符下使用open打开文件失败的原因及解决方法
2023-12-07 18:31:33
python 监控服务器是否有人远程登录（详细思路+代码）
2022-05-16 04:08:26
简单的文本内容处理工具
2010-01-28 12:31:00
在ASP中使用SQL语句之5:开始执行
2007-08-11 12:36:00
Python Pandas两个表格内容模糊匹配的实现
2021-09-06 01:56:23
Python之Web框架Django项目搭建全过程
2022-03-21 03:06:08
python linecache 处理固定格式文本数据的方法
2022-10-23 21:06:05
MySql安装步骤图文教程及中文乱码的解决方案
2024-01-28 23:19:33
python将多个文本文件合并为一个文本的代码（便于搜索）
2021-10-23 07:21:27
Python实现合并同一个文件夹下所有PDF文件的方法示例
2021-01-21 23:08:18
JS实现获取毫秒值及转换成年月日时分秒的方法
2024-04-18 09:42:54
Data URI 和 MHTML
2009-08-16 16:19:00
pycharm 2018 激活码及破解补丁激活方式
2021-10-16 12:10:00
