用AJAX實現頁面登陸以及註冊使用者名稱驗證的簡單一實例_AJAX相關

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實現頁面登陸以及註冊使用者名稱驗證的簡單一實例全部內容了，希望大家多多支援雲棲社區~