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

ajax

AJAX的无刷新机制使得在注册系统中对于注册名称的检测能即时显示。

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

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

功能展现 

当输入已经存在的用户名(如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();
}
关于这部分内容的说明 请看

接着是自定义函数

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,各有其说明情况,具体请参看 

使用DHTML中的innerHTML可显示信息在定义的 <span id="test1">是否能注册</span> 上。 示例程序下载地址:http://www.joycar.com.cn/blog/attachments/month_0607/y20067221811.rar

时间: 2024-10-03 15:35:44

AJAX应用之注册用户即时检测的相关文章

注册用户时如何验证用该户名是否存在

问题描述 注册用户时如何验证用该户名是否存在不用刷新(是否使用脚本实现的) 解决方案 解决方案二:验证的方法挺多的,最终都是提取用户的输入的用户名,去数据库作一个比较!脚本可以实现,不过我个人一般不采用脚本的方式!解决方案三:不刷新用ajax,检测用户是否存在sql里exist解决方案四:stringstr=Server.UrlDecode(this.txtname.Text);连接数据库...SqlCommandcmd=newSqlCommand("selectcount(*)fromtabl

java-制作网站,需要对注册用户进行手机号码验证,应该怎么做

问题描述 制作网站,需要对注册用户进行手机号码验证,应该怎么做 制作网站,需要对注册用户进行手机号码验证,应该怎么做,需要几个接口,怎么把接口加进代码里? 之前因为没有接口,所以直接获取验证码后再控制台显示.现在需要几个接口?是不是发送.查看.接收三个接口?还有如何把接口加进代码里 谢谢您 的回答 解决方案 用ajax来做吧,至于需要几个接口就看你的需要了.

ASP.NET MVC+EF框架+EasyUI实现权限管理系列(17)-注册用户功能的细节处理(各种验证)

原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(17)-注册用户功能的细节处理(各种验证) ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框架搭建    (2):数据库访问层的设计Demo    (3):面向接口编程   (4 ):业务逻辑层的封装    (5):前台Jquery easyUI实现    (6):EF上下文实例管理    (7):DBSession的封装   (8):DBSession线程内唯一     (9):TT摸版

使用 phpmyadmin 批量修改 Wordpress 注册用户权限

想到要修改注册用户权限是因为前两天 ppiOS问答 被一位恶意用户发布了一篇恶意的黑帽SEO文章.虽然我已经在 ppiOS问答 后台设置了用户提交的问题默认处于草稿状态,但是这个恶意发文章的用户显然是了解 Wordpress 机制的.尽管没有提供后台接口,但是他还是成功的跳过管理员的审核发布了一篇软文.我发现后第一时间就想到:糟糕,用户权限没有分配好! 之前不了解 Wordpress 的用户注册机制,为了方便用户提问我把新用户注册后的角色统一的设置成了作者,没想到这次却被人利用了这个漏洞.痛定思

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

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

分析称腾讯注册用户9.3亿 盈利依赖14%用户

钟星 中国三星研究院 战略组首席研究员[中国企业家网]腾讯的"企鹅仔"不久前被插上了利刃,背上了"阻碍互联网创新"的骂名.从一款即时通讯软件,到2001年的无线增值业务,再到游戏.门户.电子商务.第三方支付.搜索引擎,过去十几年间,腾讯完成了互联网产业几乎所有业务的布局,2010年已 悄然成为世界第二大互联网公司.那么,腾讯是如何成长为让人"痛恨"的大公司的呢?腾讯的软肋何在? 腾讯三级跳腾讯(Tencent)是中国创立最早.最成功的互联网企业之

Line注册用户突破4亿 日消息发送量突破100亿条

Line注册用户突破4亿 日 消息发送量突破100亿条日本 即时通讯应用Line的开疆扩土工作,已经达到了全 新的历史水平.该公司于今日透露,其总注册用户数已经突破4亿.也就是说,在过去的 五个月时间里,其 用户增长了几乎1亿--Line在去年11月才 刚刚突破了3亿用户的大关.Line指出,用户增长的大头,主要是北美和欧洲市场所贡献的,西班牙和东南亚区域的涨势也相当强劲.另外,每日新注册用户数大约在170万左右.作为Line的本土战场,日本地区的贡献最大(5000万),泰国(2400万)与印度

易信公布目标:六个月注册用户过亿

摘要: 8月19日上午消息, 网易 与 中国电信 今日宣布成立合资公司翼信,并正式发布移动即时通讯社交产品易信( yixin.im ).翼信公司总经理张政今日透露,易信的短期目标是六个月内注册用户 8月19日上午消息, 网易 与 中国电信 今日宣布成立合资公司翼信,并正式发布移动即时通讯社交产品易信( yixin.im ).翼信公司总经理张政今日透露,易信的短期目标是六个月内注册用户过亿,活跃用户的规模超过5000万. 据介绍,翼信作为中国电信和网易的合资公司,注册资金为两个亿.张政也补充说,目

实现通过随机产生密码,然后将密码EMail给注册用户

通过随机产生密码,然后将密码EMail给注册用户,你可以确认用户的EMail填写是否正确.自动产生的密码往往安全性更高,同时,你可以过滤那些无效的用户. 把下面的代码保存为random.asp文件: <% Sub StrRandomize(strSeed) Dim i, nSeed nSeed = CLng(0) For i = 1 To Len(strSeed) nSeed = nSeed Xor ((256 * ((i - 1) Mod 4) * AscB(Mid(strSeed, i, 1