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

时间 2019-11-13

原文原文链接

AJAX即“ A synchronous J avascript And X ML”（异步JavaScript和XML），是指一种建立交互式网页应用的网页开发技术。

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

经过在后台与服务器进行少许数据交换，AJAX 能够使网页实现异步更新。这意味着能够在不从新加载整个网页的状况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）若是须要更新内容，必须重载整个网页页面。

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

建立XMLHTTPRequest对象

      使用javascript在html页面中建立XMLHTTPRequest对象，实现AJAX异步请求：

[html] view plain copy

print ?

<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（响应中已有部分数据可用了，可是服务器尚未完成响应的生成）javascript

注意：不要觉得if (xmlhttp.readyState == 4) 在send以前执行就以为不对， xmlhttp.send(); 这时才开始发送请求。这时才开始发送请求后不等服务器返回数据，就继续向下执行，因此不会阻塞，界面就不卡了，这就是AJAX中“A”的含义“异步”。

AJAX的封装

在实际项目开发中，会有多处用到AJAX异步请求，但是建立对象代码这么长，复制粘贴都嫌麻烦，并且还会影响代码的观赏性，因此须要将AJAX进行封装。将其封装成js功能文件，并在网页中导入便可进行引用。

简单AJAX封装后代码：

[javascript] view plain copy

print ?

<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参数，在通常处理程序中对请求进行处理。

[javascript] view plain copy

print ?

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;
}
}

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

[javascript] view plain copy

print ?

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异步请求实现登录就完成了。

至于注册是判断用户名，我就只粘贴上来：

[javascript] view plain copy

print ?

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 = "能够使用";
}
})
}
}