用AJAX實現頁面登錄以及註冊用戶名驗證

 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異步請求：
      

  

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