Ajax realisiert den gesamten Prozess der Registrierung des Benutzernamens

Dieses Mal werde ich Ihnen den gesamten Prozess der Registrierung eines Benutzernamens bei Ajax vorstellen. Was sind die Vorsichtsmaßnahmen , um den gesamten Prozess der Registrierung eines Benutzernamens bei Ajax zu realisieren? sehen.

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 der HTML-Seite zu erstellen, um eine asynchrone AJAX-Anfrage zu implementieren:

<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-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 Objekte erstellen Der Code ist so lang, dass das Kopieren und Einfügen mühsam ist und sich auch auf die Anzeigequalität des Codes auswirkt. 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('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>

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

Zuerst erstellen eine HTML-Seite login.htm und einen allgemeinen Ashx-Handler userhandle.ashx. Die angeforderte URL trägt einen Aktionsparameter und die Anfrage 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;
      }
    }

Nach dem Empfang der Anforderungsaktion im allgemeinen Verarbeitungsprogramm beurteilt und führt es die entsprechende Abfrage aus und gibt eine Zeichenfolge zurück. Nach dem Empfang beurteilt und führt die Startseite die entsprechende Funktion 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 die Beurteilung abgeschlossen 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 darum geht, den Benutzernamen zu ermitteln, 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 = "可以使用";
        }
      })
      }
    }

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben Informationen, bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie natives Ajax zur Verarbeitung von JSON-Daten

So implementieren Sie die Kartenschnittstelle mit dem Datenbank + Ajax-Methode

Das obige ist der detaillierte Inhalt vonAjax realisiert den gesamten Prozess der Registrierung des Benutzernamens. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!