网络编程
位置：首页>> 网络编程>> JavaScript>> 一个用Ajax做的用户名验证程序

一个用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
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com