返回顶部
首页 > 资讯 > 前端开发 > html >如何应用AJAX进行注册用户即时检测
  • 222
分享到

如何应用AJAX进行注册用户即时检测

2024-04-02 19:04:59 222人浏览 八月长安
摘要

本篇文章为大家展示了如何应用ajax进行注册用户即时检测,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。 AJAX的无刷新机制使得在注册

本篇文章为大家展示了如何应用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();
}

接着是自定义函数


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> 上。

上述内容就是如何应用AJAX进行注册用户即时检测,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注编程网html频道。

--结束END--

本文标题: 如何应用AJAX进行注册用户即时检测

本文链接: https://lsjlt.com/news/81485.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 如何应用AJAX进行注册用户即时检测
    本篇文章为大家展示了如何应用AJAX进行注册用户即时检测,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。 AJAX的无刷新机制使得在注册...
    99+
    2024-04-02
  • php如何应用Ajax技术检测用户名
    这篇文章主要介绍php如何应用Ajax技术检测用户名,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1.搭建Ajax开发框架,代码如下<script language=...
    99+
    2024-04-02
  • JavaWeb实现注册用户名检测
    本文实例为大家分享了JavaWeb实现注册用户名检测的具体代码,供大家参考,具体内容如下 案例说明 实现一个可以异步获取用户名是否被注册的小案例。如: 1.编写Html与js: ...
    99+
    2024-04-02
  • Ajax如何实现无刷新在注册用户名时的应用
    这篇文章主要介绍Ajax如何实现无刷新在注册用户名时的应用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! var xmlHttp; ...
    99+
    2024-04-02
  • AJAX 用户注册时的应用过程是怎样的
    本篇文章给大家分享的是有关AJAX 用户注册时的应用过程是怎样的,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。 ...
    99+
    2024-04-02
  • AJAX如何判定用户是否注册
    这篇文章主要介绍AJAX如何判定用户是否注册,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!在很多注册的页面上,我们可能会遇到以下情况,当我们注册用户名的时候可能会提示该用户名已注册,...
    99+
    2024-04-02
  • ajax如何检测用户名是否被占用
    这篇文章主要讲解了“ajax如何检测用户名是否被占用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“ajax如何检测用户名是否被占用”吧!代码如下://检测用...
    99+
    2024-04-02
  • AJAX如何检测用户名是否存在
    小编给大家分享一下AJAX如何检测用户名是否存在,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!vscode:index:<!DOCTYPE htm...
    99+
    2023-06-08
  • Ajax注册用户时如何实现表单验证功能
    这篇文章主要讲解了“Ajax注册用户时如何实现表单验证功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Ajax注册用户时如何实现表单验证功能”吧!很多时候在网站上注册时,我们会发现,注册表...
    99+
    2023-06-08
  • 如何利用Ajax检测用户名是否被占用
    小编给大家分享一下如何利用Ajax检测用户名是否被占用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!采用Ajax实现用户名验证使用jQuery给出提示信息用户注册...
    99+
    2023-06-08
  • AJAX如何实现无刷新检测用户名功能
    这篇文章将为大家详细讲解有关AJAX如何实现无刷新检测用户名功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。先来看看原理图register.php<!DOCTYPE html>&l...
    99+
    2023-06-08
  • AJAX应用实例之如何实现检测用户名是否唯一功能
    小编给大家分享一下AJAX应用实例之如何实现检测用户名是否唯一功能,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!效果图如下所示:下面写一个简单的例子,检测用户名是否唯一(直接撸代码):前端...
    99+
    2024-04-02
  • node.js+jQuery如何实现用户登录注册AJAX交互
    这篇文章给大家分享的是有关node.js+jQuery如何实现用户登录注册AJAX交互的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。1.login.ejs实现form框架&nbs...
    99+
    2024-04-02
  • 如何使用Ajax实时检测"用户名、邮箱等"是否已经存在
    本篇内容主要讲解“如何使用Ajax实时检测"用户名、邮箱等"是否已经存在”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何使用Ajax实时检...
    99+
    2024-04-02
  • php如何实现用户注册
    这篇文章主要讲解了“php如何实现用户注册”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“php如何实现用户注册”吧!创建注册表单首先,我们需要在前端创建一个表单,让用户填写必要的信息。通常注...
    99+
    2023-07-05
  • 如何使用AJAX进行WEB应用程序开发
    这篇文章主要为大家展示了“如何使用AJAX进行WEB应用程序开发”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用AJAX进行WEB应用程序开发”这篇文章吧...
    99+
    2024-04-02
  • 如何使用AJAXRequest进行AJAX应用程序开发
    小编给大家分享一下如何使用AJAXRequest进行AJAX应用程序开发,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!准备 在使...
    99+
    2024-04-02
  • three.js如何利用射线Raycaster进行碰撞检测
    这篇文章主要为大家展示了“three.js如何利用射线Raycaster进行碰撞检测”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“three.js如何利用射线R...
    99+
    2024-04-02
  • 在Python中如何使用OpenCV进行直线检测
    这篇文章主要介绍了在Python中如何使用OpenCV进行直线检测的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇在Python中如何使用OpenCV进行直线检测文章都会有所收获,下面我们一起来看看吧。1. 引言...
    99+
    2023-06-29
  • Android如何使用GestureDetector进行手势检测详解
    目录1.引言2.进行手势检测2.1 创建GestureDetector2.2 与onTouchEvent结合使用2.3 GestureDetector.OnGestureListen...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作