用AJAX实现页面登陆以及注册用户名验证的简单实例
- 作者: 谁的浮生乱了谁的流年
- 来源: 51数据库
- 2021-07-10
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实现页面登陆以及注册用户名验证的简单实例全部内容了，希望大家多多支持~
