AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
AJAX 是一种用于创建快速动态网页的技术。其核心是 JavaScript 对象 XMLHttpRequest。该对象在 Internet Explorer 5 中首次引入,它是一种支持异步请求的技术。简而言之,XMLHttpRequest使您可以使用 JavaScript 向服务器提出请求并处理响应,而不阻塞用户。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。
试想如果在注册时,提交了注册信息,等了几秒后页面重载了,结果弹出一个提示框告诉你“用户名已被使用”,那将是很令人恼火的一件事。所以在这里,使用AJAX实现异步请求,即可在不重载页面的情况下实现与数据库的通讯。
创建XMLHTTPRequest对象
使用javascript在html页面中创建XMLHTTPRequest对象,实现AJAX异步请求:
<span style="font-size:14px;"> var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); xmlhttp.open("POST", "AJAXTest.ashx?" + "i=5&j=10", true); xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4) { if (xmlhttp.status == 200) { alert(xmlhttp.responseText); } else { alert("AJAX服务器返回错误!"); } } } xmlhttp.send(); </span>
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //创建XMLHTTP对象,考虑兼容性
xmlhttp.open("POST", "AJAXTest.ashx?" + "i=5&j=10", true); //“准备”向服务器的GetDate1.ashx发出Post请求(GET可能会有缓存问题)。这里还没有发出请求。
readyState == 4 表示服务器返回完成数据了。之前可能会经历2(请求已发送,正在处理中)、3(响应中已有部分数据可用了,但是服务器还没有完成响应的生成)
注意:
不要以为if (xmlhttp.readyState == 4) 在send之前执行就觉得不对, xmlhttp.send(); 这时才开始发送请求。这时才开始发送请求后不等服务器返回数据,就继续向下执行,所以不会阻塞,界面就不卡了,这就是AJAX中“A”的含义“异步”。
AJAX的封装
在实际项目开发中,会有多处用到AJAX异步请求,可是创建对象代码这么长,复制粘贴都嫌麻烦,而且还会影响代码的观赏性,所以需要将AJAX进行封装。将其封装成js功能文件,并在网页中导入即可进行引用。
简单AJAX封装后代码:
<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 != "") { //调用AJAX ajax("../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实现页面登陆以及注册用户名验证的简单实例全部内容了,希望大家多多支持小牛知识库~
本文向大家介绍php实现用户登陆简单实例,包括了php实现用户登陆简单实例的使用技巧和注意事项,需要的朋友参考一下 php实现用户登陆简单实例 前言: 最近要完成的最后一个部分,就是对用户提交的数据进行管理,至于管理,那肯定就是管理员的事了,那一定涉及登陆,验证账号权限,账号是否过期等等问题。 所需知识 session,确实是很重要的东西。并且我遇到session不能跨页,修改PHP.ini的se
本文向大家介绍Ajax+asp.net实现用户登陆,包括了Ajax+asp.net实现用户登陆的使用技巧和注意事项,需要的朋友参考一下 以用户登录为例练习ajax的使用方法 login.html DAL.cs BLL.cs Server.aspx.cs Server.aspx 以上所述就是本文的全部内容了,希望大家能够喜欢。
本文向大家介绍js操作数据库实现注册和登陆的简单实例,包括了js操作数据库实现注册和登陆的简单实例的使用技巧和注意事项,需要的朋友参考一下 自从node-js出现之后,不只是java,php等后端语言可以操作数据库,进行内容的增删改查,javascript简本语言同样具备了该项技能,而且在node下,js具备了很强的操作性和代码的阅读性,让晦涩难懂的代码变得更加的清晰了,下面我简单介绍javasc
本文向大家介绍php实现的简单检验登陆类,包括了php实现的简单检验登陆类的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了php实现的简单检验登陆类。分享给大家供大家参考。具体如下: 希望本文所述对大家的php程序设计有所帮助。
本文向大家介绍PHP实现登陆表单提交CSRF及验证码,包括了PHP实现登陆表单提交CSRF及验证码的使用技巧和注意事项,需要的朋友参考一下 1、表单提交,并将其提交到本页 (1) form 属性method为post方法,修改路由,使其接收post、get的请求 Route::any('/admin/login','Admin\LoginController@login'); (2)LoginCo
本文向大家介绍jsp+dao+bean+servlet(MVC模式)实现简单用户登录和注册页面,包括了jsp+dao+bean+servlet(MVC模式)实现简单用户登录和注册页面的使用技巧和注意事项,需要的朋友参考一下 功能介绍 本项目通过使用jsp和servlet实现简单的用户登录。主要逻辑为: 如果用户不存在,则首先进行注册(注册信息同步到数据库中)。 进行注册后,可进入登录页面对账号进行