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

AJAX介绍

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

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

       通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。
    
       试想如果在注册时，提交了注册信息，等了几秒后页面重载了，结果弹出一个提示框告诉你“用户名已被使用”，那将是很令人恼火的一件事。所以在这里，使用AJAX实现异步请求，即可在不重载页面的情况下实现与数据库的通讯。

 

AJAX封装

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

         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(); //这时才开始发送请求
        }

 

下面开始写登陆判断代码(用的是.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 = "可以使用";
                }
            })
            }
        }