• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    AJAX应用之注册用户即时检测
    AJAX的无刷新机制使得在注册系统中对于注册名称的检测能即时显示。

    常见的用户注册是用户输入用户名,后台程序检测数据库中用户名是否重复而做出注册的成功与失败之提示(当用户注册重名时将返回重新注册),或者稍微人性化一点就是在用户名文本框后添加一个检测按钮,让用户检测后再做注册。

    以上操作,对于用户体验方面来说是比较“差劲”的,一个很好的用户体验就是:当用户输入完注册用户名后,Web系统应能即时检查并即时显示,并在检查和显示的同时不影响当前页面的操作。这也就是“异步获取数据”的要求,而这正是AJAX的强项

    比如如下的示例就能展现AJAX的该功能:

    http://www.cnbruce.com/test/ajax/t1.htm

    当输入已经存在的用户名(如cnbruce、cnrose)时页面将显示重名不能注册(false),否则将显示可以注册(true),这为用户的注册提供了快速的参考,用户体验至上。

    那么下面就来说说是如何来实现这样的功能的。

    其实通过如上的t1.htm的源代码,各位就可以看到AJAX的精髓

    首先是定义XMLHttp对象


    var xmlHttp = false;
    try {
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e2) {
        xmlHttp = false;
      }
    }
    if (!xmlHttp  typeof XMLHttpRequest != 'undefined') {
      xmlHttp = new XMLHttpRequest();
    }



    关于这部分内容的说明请看:
    http://www.cnbruce.com/blog/showlog.asp?cat_id=34log_id=987

    接着是自定义函数


    function callServer() {
      var u_name = document.getElementById("u_name").value;
      if ((u_name == null) || (u_name == "")) return;
      var url = "cu.asp?name=" + escape(u_name);
      xmlHttp.open("GET", url, true);
      xmlHttp.onreadystatechange = updatePage;
      xmlHttp.send(null);  
    }


    该函数的主要功能就是异步获得cu.asp的内容,在此前将先提取当前页表单元素“u_name”即用户名文本框zhogn 的值,通过cu.asp其后的参数及赋值而得到了不同的结果(true or false)。

    那么这里要说的即是cu.asp,他的主要功能就是接受URL参数name的值做内容显示,该内容最终被t1.htm异步获取。



    !--cu.asp的源码示例-->

    !--#include file="conn.asp"-->
    %
    name=request.querystring("name")
    Set rs = Server.CreateObject ("ADODB.Recordset")
    sql = "Select * from u_ser where u_name='"name"'"
    rs.Open sql,conn,1,1
    if rs.eof and rs.bof then
        response.write("true")
    else
        response.write("false")
    end if
    rs.close
    set rs=nothing
    call CloseDatabase
    %>



    如何将异步获取的信息显示在当前页呢


    function updatePage() {
      if (xmlHttp.readyState  4) {
        test1.innerHTML="loading...";
      }
      if (xmlHttp.readyState == 4) {
        var response = xmlHttp.responseText;
        test1.innerHTML=response;
      }
    }


    其中xmlHttp.readyState中的readyState表示服务器在处理请求时的进展状况,其值分别有0-4,各有其说明情况,具体请参看:

    http://www.cnbruce.com/blog/showlog.asp?cat_id=34log_id=718

    使用DHTML中的innerHTML可显示信息在定义的 span id="test1">是否能注册/span> 上。

    其余表单页面就不详叙了

    打包文件下载(下载后将后缀 .cnbruce 修改为 .rar):

    http://www.cnbruce.com/test/ajax/ajax.cnbruce
    您可能感兴趣的文章:
    • PHP+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)
    • AJAX 用户注册时的应用实例
    • Ajax 无刷新在注册用户名时的应用的代码
    • ajax对注册名进行验证检测是否存在于数据库中
    上一篇:Ajax技术(WEB无刷新提交数据)-
    下一篇:AJAX初体验之上手篇
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    AJAX应用之注册用户即时检测 AJAX,应,用之,注册,用户,