Ein einfaches Beispiel für die Verwendung von AJAX zur Implementierung der Seitenanmeldung und der Überprüfung des registrierten Benutzernamens

Jetzt zeige ich Ihnen ein einfaches Beispiel für die Verwendung von AJAX zur Implementierung der Seitenanmeldung und der Überprüfung des registrierten Benutzernamens. Lassen Sie mich es jetzt mit Ihnen teilen und es allen als Referenz geben.

AJAX steht für „Asynchronous Javascript And XML“ und bezeichnet eine Webentwicklungstechnologie zur Erstellung interaktiver Webanwendungen.

AJAX ist eine Technologie zur Erstellung schneller, dynamischer Webseiten. Im Mittelpunkt steht das JavaScript-Objekt XMLHttpRequest. Dieses Objekt wurde erstmals in Internet Explorer 5 eingeführt und ist eine Technologie, die asynchrone Anforderungen unterstützt. Kurz gesagt, XMLHttpRequest ermöglicht Ihnen die Verwendung von JavaScript, um Anfragen an einen Server zu stellen und Antworten zu verarbeiten, ohne den Benutzer zu blockieren.

AJAX ermöglicht die asynchrone Aktualisierung von Webseiten durch den Austausch einer kleinen Datenmenge mit dem Server im Hintergrund. Das bedeutet, dass Teile einer Webseite aktualisiert werden können, ohne dass die gesamte Seite neu geladen werden muss.

Herkömmliche Webseiten (die kein AJAX verwenden) müssen die gesamte Webseite neu laden, wenn der Inhalt aktualisiert werden muss.

Stellen Sie sich vor, Sie geben bei der Registrierung die Registrierungsinformationen ein, warten ein paar Sekunden und dann wird die Seite neu geladen. Als Ergebnis erscheint eine Meldung, dass „der Benutzername verwendet wurde“. sehr ärgerlich. Wenn Sie hier also AJAX zur Implementierung asynchroner Anforderungen verwenden, können Sie mit der Datenbank kommunizieren, ohne die Seite neu laden zu müssen.

XMLHTTPRequest-Objekt erstellen

Verwenden Sie Javascript, um ein XMLHTTPRequest-Objekt auf einer HTML-Seite zu erstellen, um eine asynchrone AJAX-Anfrage zu implementieren:

<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-Objekt erstellen, Kompatibilität berücksichtigen

xmlhttp.open("POST", "AJAXTest.ashx?" + "i=5&j=10", true); //"Vorbereiten", um eine Post-Anfrage an GetDate1.ashx des Servers auszugeben (GET kann Caching-Probleme haben). Hier wurden noch keine Anfragen gestellt.

readyState == 4 bedeutet, dass der Server Abschlussdaten zurückgegeben hat. Möglicherweise haben Sie die Erfahrung gemacht: 2 (die Anfrage wurde gesendet und wird verarbeitet), 3 (ein Teil der Daten in der Antwort ist verfügbar, aber der Server hat die Antwort noch nicht vollständig generiert)

Hinweis:

Halten Sie es nicht für falsch, wenn (xmlhttp.readyState == 4) vor dem Senden ausgeführt wird, xmlhttp.send(); erst zu diesem Zeitpunkt mit dem Senden der Anfrage beginnt . Zu diesem Zeitpunkt beginnt das Senden der Anforderung und die Ausführung wird fortgesetzt, ohne auf die Rückgabe von Daten durch den Server zu warten, sodass sie nicht blockiert wird und die Schnittstelle nicht hängen bleibt. Dies ist die Bedeutung von „asynchron“ in AJAX.

AJAX-Kapselung

In der tatsächlichen Projektentwicklung werden an vielen Stellen asynchrone AJAX-Anfragen verwendet, aber der Code zum Erstellen des Objekts ist sehr lang Das Kopieren und Einfügen ist mühsam und beeinträchtigt auch die Anzeigequalität des Codes. Daher muss AJAX gekapselt werden. Kapseln Sie es in eine js-Funktionsdatei und importieren Sie es als Referenz in die Webseite.

Einfacher AJAX-gekapselter Code:

<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>

Nachdem die Kapselung abgeschlossen ist, können wir mit dem Schreiben des Login-Beurteilungscodes beginnen (ich verwende .net):

Erstellen Sie zunächst einen The Die HTML-Seite login.htm und der allgemeine Ashx-Handler userhandle.ashx verfügen über einen Aktionsparameter in der angeforderten URL, und die Anforderung wird im allgemeinen Handler verarbeitet.

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

empfängt die Anforderungsaktion im allgemeinen Verarbeitungsprogramm, beurteilt und führt die entsprechende Abfrage aus und gibt eine Zeichenfolge zurück. Nach dem Empfang beurteilt die Startseite die entsprechende Funktion und führt sie aus.

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

Nachdem der Server dies festgestellt hat, sendet er Erfolg oder Misserfolg an den Client. Auf diese Weise wird die Anmeldung mithilfe der asynchronen AJAX-Anfrage abgeschlossen.

Was die Registrierung betrifft, bei der es um die Festlegung des Benutzernamens geht, füge ich einfach Folgendes ein:

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 = "可以使用";
        }
      })
      }
    }

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird .

Verwandte Artikel:

Ajax-Beitragsanfrage-Sprungseite

Die Ajax-Einreichungsformularseite wird schnell aktualisiert

Zwei Lösungen dafür, dass Ajax ein neues Fenster öffnet und vom Browser blockiert wird

Das obige ist der detaillierte Inhalt vonEin einfaches Beispiel für die Verwendung von AJAX zur Implementierung der Seitenanmeldung und der Überprüfung des registrierten Benutzernamens. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!