AJAX实现页面登录及注册用户名验证

AJAX介绍

定义：“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

AJAX 是一种用于创建快速动态网页的技术。其核心是 JavaScript 对象 XMLHttpRequest。该对象在 Internet Explorer 5 中首次引入，它是一种支持异步请求的技术。简而言之，XMLHttpRequest使您可以使用 JavaScript 向服务器提出请求并处理响应，而不阻塞用户。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

试想如果在注册时，提交了注册信息，等了几秒后页面重载了，结果弹出一个提示框告诉你“用户名已被使用”，那将是很令人恼火的一件事。所以在这里，使用AJAX实现异步请求，即可在不重载页面的情况下实现与数据库的通讯。

AJAX封装

将其封装成js功能文件，并在网页中导入即可进行引用。

<span style="font-family:Times New Roman;font-size:14px;">function ajax(url,onsuccess,onfail){var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');xmlhttp.open("POST", url, true);xmlhttp.onreadystatechange = function (){if (xmlhttp.readyState == 4){if (xmlhttp.status == 200){onsuccess(xmlhttp.responseText);//成功时逻辑操作}else{onfail(xmlhttp.status);//失败时逻辑操作}}}xmlhttp.send(); //这时才开始发送请求}
</span>

下面开始写登陆判断代码(用的是.net)：
首先，创建一个html页login.htm以及ashx一般处理程序userhandle.ashx，请求的url中带上一个action参数，在一般处理程序中对请求进行处理。

function Submit1_onclick() {var name = document.getElementById("name").value;var psw = document.getElementById("psw").value;if (psw != "" && name != "") { //调用AJAXajax("../userhandle.ashx?operate=login&userName=" + name + "&psw=" + psw, function (resText) {if (resText == "fail") {alert("用户名或密码错误！");return false;}else {document.write(resText);}})}else {alert("请输入完整登陆信息！");return false;}}

在一般处理程序中接到请求动作，判断并执行相关查询，返回一个字符串，前台页面接到后台，判断并执行相应功能。

 public void login(HttpContext context){userBLL ub = new userBLL（）；string userName = context.Request["userName"];string userPsw = context.Request["psw"];      bool b = ub.Login(userName, userPsw);//封装好的bll层方法，判断用户名密码是否正确if (b == true){context.Session["Name"] = userName;context.Session["role"] = "user";context.Response.Write("success");}else{context.Response.Write("fail");}}

服务器判断完后，将success或者fail发送到客户端。这样一个使用AJAX异步请求实现登陆就完成了。

注册时判断用户名

function check() {var userName = document.getElementById("Text1").value;if (userName == "" || userName == null) {document.getElementById("nameMeg").style.color = "red";document.getElementById("nameMeg").innerHTML = "用户名为6-10位英文或数字";}else { ajax("../userhandle.ashx?operate=checkName&userName=" + userName, function (resText) {if (resText == "forbid") {document.getElementById("nameMeg").style.color = "red";document.getElementById("nameMeg").innerHTML = "用户名含有非法词语";} else if (resText == "already have") {document.getElementById("nameMeg").style.color = "red";document.getElementById("nameMeg").innerHTML = "用户名已被使用";} else {document.getElementById("nameMeg").style.color = "green";document.getElementById("nameMeg").innerHTML = "可以使用";}})}}

AJAX实现页面登录及注册用户名验证相关推荐

html+css+php+mysql 简单的页面登录与注册(数据库的交互)
这是一个简单的小项目,但对于我这小白来说,也是写了好几天才完成,中间心态炸裂n次,但最后还是搞定了!!! 说了那麽多,还是分享一下吧! 目录主页面(登录页面) 登录页面的后台操作注册页面注册页 ...
[Duolingo]如何在PC版页面登录手机号注册的账号
一.背景最近想在PC上玩多邻国,结果发现页面登录需要账号或邮箱号.但是当时注册时使用的手机号,搜索解决方案无果后尝试自救.在一顿瞎鼓捣后,终于成功登录. 二.步骤本方案适用于手机号注册的用户,下面 ...
ssm当用户登录成功显示用户名_从零到企业级SSM电商项目实战教程（十八）用户登录功能开发...
用户模块功能介绍 1.登录 2.用户名验证 3.注册 4.忘记密码 5.提交问题答案 6.重置密码 7.获取用户信息 8.更新用户信息 9.退出登录学习目标 1.理解横向越权.纵向越权安全漏洞 2. ...
利用ajax验证用户名,3.6.2 利用Ajax验证注册用户名（1）
3.6.2 利用Ajax验证注册用户名(1) 由于注册的用户比较多,如果能在客户端还没提交注册表单之前验证用户名是否可用,如果不可用则禁止提交,这样将大大减少网络流量和服务器负载.本节将介绍如何利用 ...
PHP登录与注册页面简单实现（包含数据库验证）（包含数据库）
log.php(登录主界面) 由于是简单的页面,登录页面只做了数据库验证,其实有条件也可以加上邮箱验证和验证码验证. <!doctype html> <html> <he ...
html语言怎么清除用户名 name= password=,在html页面中填写注册表单后，它会给出这个错误，并使用用户名和密码并将值存储在登录表单中...
在html页面中填写注册表单后,它会给出此错误,并使用用户名和密码并将值存储在登录表单中:TypeError at /login/ argument of type 'NoneType' is not ...
用php mui ajax注册登录页面,ajax实现简单登录页面
本文实例为大家分享了ajax实现简单登录页面的具体代码,供大家参考,具体内容如下一.什么是ajax Ajax是一种无需重新加载整个网页,能够更新部分网页的技术. 二.ajax的工作原理 Ajax工作 ...
ajax mysql登录我注册_ajax方式实现注册功能(提交数据到后台数据库完成交互)
一.当我们在验证表单的时候,为了阻止把错误的也发送到服务器,我们通常这样设置: $(function(){ var isusername;(定一个变量) var ispwd; $('form').su ...
原生JavaScript实现登录注册前端验证
原生JavaScript实现登录注册前端验证功能:实现一个简单的前端登录页面的验证, 废话不多说,直接上代码... 登录窗口代码段... //html <div class="log ...

AJAX实现页面登录及注册用户名验证

AJAX实现页面登录及注册用户名验证相关推荐

最新文章

热门文章