快捷導(dǎo)航

用AJAX實(shí)現(xiàn)頁面登陸以及注冊(cè)用戶名驗(yàn)證的簡(jiǎn)單實(shí)例

更新時(shí)間：2016年10月20日 08:48:35 投稿：jingxian

下面小編就為大家?guī)硪黄肁JAX實(shí)現(xiàn)頁面登陸以及注冊(cè)用戶名驗(yàn)證的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

AJAX即“Asynchronous Javascript And XML”（異步JavaScript和XML），是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。

AJAX 是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁的技術(shù)。其核心是 JavaScript 對(duì)象 XMLHttpRequest。該對(duì)象在 Internet Explorer 5 中首次引入，它是一種支持異步請(qǐng)求的技術(shù)。簡(jiǎn)而言之，XMLHttpRequest使您可以使用 JavaScript 向服務(wù)器提出請(qǐng)求并處理響應(yīng)，而不阻塞用戶。

通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下，對(duì)網(wǎng)頁的某部分進(jìn)行更新。

傳統(tǒng)的網(wǎng)頁（不使用 AJAX）如果需要更新內(nèi)容，必須重載整個(gè)網(wǎng)頁頁面。

試想如果在注冊(cè)時(shí)，提交了注冊(cè)信息，等了幾秒后頁面重載了，結(jié)果彈出一個(gè)提示框告訴你“用戶名已被使用”，那將是很令人惱火的一件事。所以在這里，使用AJAX實(shí)現(xiàn)異步請(qǐng)求，即可在不重載頁面的情況下實(shí)現(xiàn)與數(shù)據(jù)庫(kù)的通訊。

創(chuàng)建XMLHTTPRequest對(duì)象

使用javascript在html頁面中創(chuàng)建XMLHTTPRequest對(duì)象，實(shí)現(xiàn)AJAX異步請(qǐng)求：

<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服務(wù)器返回錯(cuò)誤！");
          }
        }
      }
      xmlhttp.send(); 


</span>

var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //創(chuàng)建XMLHTTP對(duì)象，考慮兼容性

xmlhttp.open("POST", "AJAXTest.ashx?" + "i=5&j=10", true); //“準(zhǔn)備”向服務(wù)器的GetDate1.ashx發(fā)出Post請(qǐng)求（GET可能會(huì)有緩存問題）。這里還沒有發(fā)出請(qǐng)求。

readyState == 4 表示服務(wù)器返回完成數(shù)據(jù)了。之前可能會(huì)經(jīng)歷2（請(qǐng)求已發(fā)送，正在處理中）、3（響應(yīng)中已有部分?jǐn)?shù)據(jù)可用了，但是服務(wù)器還沒有完成響應(yīng)的生成）

注意：

不要以為if (xmlhttp.readyState == 4) 在send之前執(zhí)行就覺得不對(duì)， xmlhttp.send(); 這時(shí)才開始發(fā)送請(qǐng)求。這時(shí)才開始發(fā)送請(qǐng)求后不等服務(wù)器返回?cái)?shù)據(jù)，就繼續(xù)向下執(zhí)行，所以不會(huì)阻塞，界面就不卡了，這就是AJAX中“A”的含義“異步”。

AJAX的封裝

在實(shí)際項(xiàng)目開發(fā)中，會(huì)有多處用到AJAX異步請(qǐng)求，可是創(chuàng)建對(duì)象代碼這么長(zhǎng)，復(fù)制粘貼都嫌麻煩，而且還會(huì)影響代碼的觀賞性，所以需要將AJAX進(jìn)行封裝。將其封裝成js功能文件，并在網(wǎng)頁中導(dǎo)入即可進(jìn)行引用。

簡(jiǎn)單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);//成功時(shí)邏輯操作
          }
          else
          {
            onfail(xmlhttp.status);//失敗是邏輯操作
          }
        }
      }
      xmlhttp.send(); //這時(shí)才開始發(fā)送請(qǐng)求
    }</span>

封裝完成后，我們可以開始寫登陸判斷代碼(我是用的是.net)：

首先，創(chuàng)建一個(gè)html頁login.htm以及ashx一般處理程序userhandle.ashx，請(qǐng)求的url中帶上一個(gè)action參數(shù)，在一般處理程序中對(duì)請(qǐng)求進(jìn)行處理。

function Submit1_onclick() {
      var name = document.getElementById("name").value;
      var psw = document.getElementById("psw").value;
      if (psw != "" && name != "") { 
       //調(diào)用AJAX
       ajax("../userhandle.ashx?operate=login&userName=" + name + "&psw=" + psw, function (resText) {
          if (resText == "fail") {
            alert("用戶名或密碼錯(cuò)誤！");
            return false;
          }
          else {
            document.write(resText);
          }
        })
      }
      else {
        alert("請(qǐng)輸入完整登陸信息！");
        return false;
      }
    }

在一般處理程序中接到請(qǐng)求動(dòng)作，判斷并執(zhí)行相關(guān)查詢，返回一個(gè)字符串，前臺(tái)頁面接到后，判斷并執(zhí)行相應(yīng)功能。

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

服務(wù)器判斷完后，將success或者fail發(fā)送到客戶端。這樣一個(gè)使用AJAX異步請(qǐng)求實(shí)現(xiàn)登陸就完成了。

至于注冊(cè)是判斷用戶名，我就只粘貼上來：

function check() {
      var userName = document.getElementById("Text1").value;
      if (userName == "" || userName == null) {
        document.getElementById("nameMeg").style.color = "red";
        document.getElementById("nameMeg").innerHTML = "用戶名為6-10位英文或數(shù)字";
      }
      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 = "可以使用";
        }
      })
      }
    }

以上就是小編為大家?guī)淼挠肁JAX實(shí)現(xiàn)頁面登陸以及注冊(cè)用戶名驗(yàn)證的簡(jiǎn)單實(shí)例全部?jī)?nèi)容了，希望大家多多支持腳本之家~

您可能感興趣的文章: