Un exemple simple d'utilisation d'AJAX pour implémenter la connexion à la page et la vérification du nom d'utilisateur enregistré

Maintenant, je vais vous présenter un exemple simple d'utilisation d'AJAX pour implémenter la connexion à la page et la vérification du nom d'utilisateur enregistré. Permettez-moi de le partager avec vous maintenant et de le donner comme référence pour tout le monde.

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 une page html pour implémenter une requête asynchrone 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'); //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 sont utilisées à de nombreux endroits, mais le code pour créer l'objet est si long . Le copier-coller est gênant et 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(&#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>

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.

En ce qui concerne l'inscription, qui consiste à déterminer le nom d'utilisateur, je vais simplement 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 = "可以使用";
        }
      })
      }
    }

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère qu'il sera utile à tout le monde. à l'avenir.

Articles connexes :

Page de renvoi de demande de publication Ajax

La page du formulaire de soumission Ajax s'actualise rapidement

Deux solutions pour qu'Ajax ouvre une nouvelle fenêtre et soit bloqué par le navigateur

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!