Ajax réalise le processus complet d'enregistrement du nom d'utilisateur

Cette fois, je vais vous présenter le processus complet d'enregistrement d'un nom d'utilisateur avec Ajax. Quelles sont les précautions pour réaliser le processus complet d'enregistrement d'un nom d'utilisateur avec Ajax. Voici un cas pratique, allons-y. jetez un oeil.

AJAX signifie « Asynchronous Javascript And XML », qui fait référence à une technologie de développement Web permettant de créer des applications Web interactives.

AJAX est une technologie permettant de créer des pages Web rapides et dynamiques. L'objet JavaScript XMLHttpRequest est à la base. Introduit pour la première fois dans Internet Explorer 5, cet objet est une technologie qui prend en charge les requêtes asynchrones. En bref, XMLHttpRequest vous permet d'utiliser JavaScript pour envoyer des requêtes au serveur et gérer les réponses sans bloquer l'utilisateur.

AJAX permet de mettre à jour les pages Web de manière asynchrone en échangeant une petite quantité de données avec le serveur en arrière-plan. Cela signifie que certaines parties d'une page Web peuvent être mises à jour sans recharger la page entière.

Les pages Web traditionnelles (n'utilisant pas AJAX) doivent recharger la page Web entière si le contenu doit être mis à jour.

Imaginez si vous soumettez les informations d'inscription lors de votre inscription, attendez quelques secondes, puis la page est rechargée. En conséquence, une boîte de dialogue apparaît vous indiquant que "le nom d'utilisateur a été utilisé". très ennuyeux. Une chose. Donc ici, en utilisant AJAX pour implémenter des requêtes asynchrones, vous pouvez communiquer avec la base de données sans recharger la page.

Créer un objet XMLHTTPRequest

Utilisez javascript pour créer un objet XMLHTTPRequest dans la page html pour implémenter la requête asynchrone 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'); //Créer un objet XMLHTTP, considérer la compatibilité

xmlhttp.open("POST", "AJAXTest.ashx?" + "i=5&j=10", true); //"Préparer" pour émettre une requête Post au GetDate1.ashx du serveur (GET peut avoir des problèmes de mise en cache) . Aucune demande n'a encore été faite ici.

readyState == 4 signifie que le serveur a renvoyé les données d'achèvement. Vous en avez peut-être expérimenté 2 (la demande a été envoyée et est en cours de traitement), 3 (une partie des données de la réponse est disponible, mais le serveur n'a pas fini de générer la réponse)

Remarque :

Ne pensez pas que ce soit une erreur si if (xmlhttp.readyState == 4) est exécuté avant l'envoi, xmlhttp.send(); . A ce moment, la requête commence à être envoyée et l'exécution continue sans attendre que le serveur renvoie des données, elle ne sera donc pas bloquée et l'interface ne sera pas bloquée. C'est le sens de « asynchrone » en AJAX.

Encapsulation AJAX

Dans le développement réel du projet, les requêtes asynchrones AJAX seront utilisées à de nombreux endroits, mais créer des objets Le code est si long qu'il est difficile à copier et coller, et cela affectera également la qualité d'affichage du code, AJAX doit donc être encapsulé. Encapsulez-le dans un fichier de fonction js et importez-le dans la page Web pour référence.

Code encapsulé AJAX simple :

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

Une fois l'encapsulation terminée, nous pouvons commencer à écrire le code de jugement de connexion (j'utilise .net) :

Tout d'abord, créez une page html login.htm et un gestionnaire général ashx userhandle.ashx. L'URL demandée comporte un paramètre d'action et la demande est traitée dans le gestionnaire général.

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

Après avoir reçu l'action de requête dans le programme de traitement général, il jugera et exécutera la requête correspondante et renverra une chaîne. Après l'avoir reçue, la page d'accueil jugera et exécutera la fonction correspondante.

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

Une fois que le serveur a terminé le jugement, il envoie le succès ou l'échec au client. De cette façon, la connexion à l'aide d'une requête asynchrone AJAX est terminée.

Quant à l'inscription, qui consiste à déterminer le nom d'utilisateur, je vais juste le coller :

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

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article Pour plus de passionnant. Pour plus d'informations, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser l'ajax natif pour traiter les données json

Comment implémenter l'interface cartographique avec le base de données + méthode ajax

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!