首頁 > web前端 > js教程 > 主體

用AJAX實作頁面登陸以及註冊使用者名稱驗證的簡單實例

亚连
發布: 2018-05-23 14:14:01
原創
3473 人瀏覽過

下面我就為大家帶來一篇用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(&#39;Microsoft.XMLHTTP&#39;);
      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(&#39;Microsoft.XMLHTTP&#39;);
      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 post請求跳轉頁面

#Ajax提交表單頁面刷新很快的解決方法

Ajax開啟新視窗被瀏覽器攔截的兩個解決方案

以上是用AJAX實作頁面登陸以及註冊使用者名稱驗證的簡單實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!