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=34&log_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=34&log_id=718

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

其余表单页面就不详叙了

打包文件下载（下载后将后缀 .cnbruce 修改为 .rar）：

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

赞 (0)

相关推荐

  • AJAX 用户注册时的应用实例

    如果我们用AJAX技术来实现以上的操作则不必等待服务器返回信息,用户输入用户名或企业名称的时候,当输入文本框失去焦点的时候,则会自动向服务器发出请求,用户继续做下面的操作,不必点击"检查",也不必等待服务器返回信息,检查与用户操作是异步的,可同时进行.当服务器信息返回的时候,会自动在面页相应位置显示返回信息,不必刷新页面,相当于局部刷新的效果. 下面我们来看代码吧. HTML页面的完整代码如下: 程序代码 <%@page language="java" con

  • PHP+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)

    PHP+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)

    前 言 直接上代码有点不厚道.于是按照天朝传统,整段描述吧....(本人语言表达能力有限,大家忍着看) 功 能 在网站注册用户时使用,主要为了无刷新异步验证用户输入的用户名或者Email是否已注册. 这功能大家肯定见过,大多数网站都有的,我一直对这个功能很感兴趣,所以这几天研究了下 jQuery + Ajax 整了一个功能不算完善,但足以应付普通使用的代码 (更牛的功能大家自己去发掘) 文 件 说 明 reg.php //为注册页面 check_user.php //为用户验证页面 (GET,P

  • Ajax 无刷新在注册用户名时的应用的代码

    var xmlHttp;  uName() //用户名失去焦点时  {   if(all.uname.=="")   {    all.l1.innerHTML="不能为空!";    setTimeout("close(1)",1500);    return;   }   else   {    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");    xmlHttp.onrea

  • ajax对注册名进行验证检测是否存在于数据库中

    这个是我在网上看到的一个有错的ajax 我改正确了,却找不到那个帖子了. 用servlet验证: 复制代码 代码如下: package Servlet; import java.io.*; import java.sql.*; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.*; import javax.servlet.http.HttpServletRequest; import jav

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

    AJAX的无刷新机制使得在注册系统中对于注册名称的检测能即时显示. 常见的用户注册是用户输入用户名,后台程序检测数据库中用户名是否重复而做出注册的成功与失败之提示(当用户注册重名时将返回重新注册),或者稍微人性化一点就是在用户名文本框后添加一个检测按钮,让用户检测后再做注册. 以上操作,对于用户体验方面来说是比较"差劲"的,一个很好的用户体验就是:当用户输入完注册用户名后,Web系统应能即时检查并即时显示,并在检查和显示的同时不影响当前页面的操作.这也就是"异步获取数据&qu

  • .net采用ajax实现邮箱注册和地区选择实例

    本文实例讲述了.net采用ajax实现邮箱注册和地区选择的方法.分享给大家供大家参考.具体实现方法如下: 首先要知道Ajax是 Asynchronous JavaScript and XML(以及 DHTML 等)的缩写. ajax就是在浏览器上同服务器实现异步交互.在XMLhttpRequest被广泛使用之前,用户停留在页面上没有办法实现局部更新的功能,只能通过刷新整个页面来获取最新的数据,而由此代码的代价是需要传输大量的数据,而且有可能临时的一些用户信息也会丢失,而ajax的使用实现了局部更

  • 在Python的Flask框架中验证注册用户的Email的方法

    在Python的Flask框架中验证注册用户的Email的方法

    本教程详细介绍在用户注册过程中如何去验证他们的email地址. 工作流程上来讲,在用户注册一个新账户后会寄送一个确认信.直到用户按指示完成了邮件中的"验证",否则他们的账户会一直处于"未验证"状态.这是大多数网络应用会采用的工作流程. 这当中很重要的一件事就是,未验证的用户有什么权限?或者说,对于你的应用,他们是有全部权限呢,还是被限制的权限呢,还是根本没有权限?对于本教程中的应用,未验证用户会在登录后进到一个页面,会提醒他们只有验证了账户才可以进入应用. 开始前说

  • ajax 操作全局监测,用户session失效的解决方法

    ajax 操作全局监测,用户session失效的解决方法 jQuery(function ($) { // 备份jquery的ajax方法 var _ajax = $.ajax; // 重写ajax方法,先判断登录在执行success函数 $.ajax = function (opt) { var _success = opt && opt.success || function (a, b) { }; var _opt = $.extend(opt, { success: functio

  • 浅析巧用Ajax的beforeSend提高用户体验

    jQuery是经常使用的一个开源js框架,其中的$.ajax请求中有一个beforeSend方法,用于在向服务器发送请求前执行一些动作. $.ajax({ beforeSend:function(){ // handle the beforeSend event }, complete:function(){ // handle the complete event } }); 防止重复数据 在实际项目开发中,提交表单时常常由于网络或者其原因,用户点击提交按钮误认为自己没有操作成功,进而会重复提

  • joomla实现注册用户添加新字段的方法

    本文实例讲述了joomla实现注册用户添加新字段的方法.分享给大家供大家参考,具体如下: joomla原来的注册很简单,为了添加自己想要的字段,比如电话. 在数据库添加这一字段"telphone" 修改libraries\joomla\database\table\user.php 在JTableUser这个类添加新的变量: var $telphone = null; 页面的修改 修改components\com_user\views\register\tmpl\default.php

  • 注册用户就出现这个CDO.Message.1 错误 80040220

    我一注册用户就出现这个~ 请问这是是哪里出问题拉 CDO.Message.1 错误 '80040220' "SendUsing"配置值无效. /inc-freehost-function/FreeHostFunctionMain.asp,行 637 答: 您服务器上没有装iis的smtp,如果你不想装,请在系统参数中配置使用jmail

  • 在layui中使用form表单监听ajax异步验证注册的实例

    今天给大家介绍的是当下很流行的框架layui中的一个小案例.就是form表单监控提交并且使用ajax异步提交验证数据.在layui中我们想使用哪个模块就要layui.use('form',function{});这种形式要引用form内置模板,下面是HTML全部代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>注册</title> <

  • Ajax注册用户时实现表单验证

    Ajax注册用户时实现表单验证

    很多时候在网站上注册时,我们会发现,注册表单通常需要检查用户名和电子邮件地址的可用性:从而确保用户之间不拥有相同的用户名和电子邮件地址:一些网站喜欢在用户提交填写的用户信息时,做信息可用性的检查,而一些网站会做实时的用户名和电子邮件地址可用性检查,例如:"用户名"文本框失去焦点时:就用户体验来说,实时的用户信息检查用户体验效果更好,而不是在表单提交后,告诉用户信息不符合系统要求. 下面截图是新浪微博的注册界面,它采用的是实时的用户信息检查,如:手机号码和用户名等信息. 图1新浪微博注册

  • JQuery运用ajax注册用户实例(后台asp.net)

    复制代码 代码如下: //JS代码 function checkname() { var Msg = document.getElementById("d_username"); var chk = CheckN(); if (chk) { $.ajax({ url: 'registerOK.aspx', type: 'POST', data: { lb: "checkname", username: $("#username").val() }

随机推荐