Comment utiliser Ajax ? Étapes de fonctionnement Ajax

Comment utiliser Ajax ? Cet article vous présentera les opérations Ajax et vous permettra de comprendre les étapes des opérations Ajax. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Tout d'abord, résumons les étapes du fonctionnement d'Ajax, puis présentons en détail comment chaque étape est effectuée.

1. Appeler les événements client

2. Créer un objet XMLHttpRequest

3. Configurer l'objet XMLHttpRequest.

4. L'objet XMLHttpRequest émet une requête asynchrone au serveur Web.

5. Le serveur Web renvoie des résultats contenant des documents XML.

6. L'objet XMLHttpRequest appelle la fonction callback() et traite le résultat.

7. Mettre à jour le DOM HTML.

Mettez en œuvre ces étapes étape par étape pour mettre en œuvre les opérations Ajax.

Appel d'événements client

Les fonctions JavaScript sont appelées à la suite de l'événement.

Exemple :

<input type =“text”size =“20”id =“userid”name =“id”onkeyup =“validateUserId（）;”>

Description :

La fonction JavaScript validateUserId() en tant que gestionnaire d'événements est mappée à l'événement onkeyup sur le champ du formulaire de saisie avec son identifiant défini sur " ID de l'utilisateur ".

Créer un objet XMLHttpRequest

var ajaxRequest;  // 使Ajax成为可能的变量！
function ajaxFunction() {
   try {
      // Opera 8.0+, Firefox, Safari
      ajaxRequest = new XMLHttpRequest();
   } catch (e) {
   
      // Internet Explorer浏览器
      try {
         ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
      
         try {
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (e) {
      
            alert("Your browser broke!");
            return false;
         }
      }
   }}

Configurer l'objet XMLHttpRequest

Dans cette étape, nous allons écrire une fonction qui sera déclenchée par les événements client et enregistrera une fonction de rappel processRequest().

function validateUserId() {
   ajaxFunction();
   
   // 这里的processRequest（）是回调函数。
   ajaxRequest.onreadystatechange = processRequest;
   
   if (!target) target = document.getElementById("userid");
   var url = "validate?id=" + escape(target.value);
   
   ajaxRequest.open("GET", url, true);
   ajaxRequest.send(null);
}

Fait une requête asynchrone au serveur web

Le code source se trouve dans le code ci-dessus. Le code écrit en gras est chargé de faire des requêtes au serveur web. Tout cela se fait à l'aide de l'objet XMLHttpRequest ajaxRequest.

function validateUserId() {
   ajaxFunction();
   
   // 这里的processRequest（）是回调函数。
   ajaxRequest.onreadystatechange = processRequest;
   
   if (!target) target = document.getElementById("userid");
   var url = "validate?id = " + escape(target.value);
   
   ajaxRequest.open("GET", url, true);
   ajaxRequest.send(null);
}

En supposant que "Zara" soit saisi dans la zone ID utilisateur, alors dans la requête ci-dessus, l'URL sera définie sur "validate?id=Zara".

Le serveur Web renvoie des résultats contenant un document XML

Le script côté serveur peut être implémenté dans n'importe quel langage mais sa logique doit être celle indiquée ci-dessous.

1. Récupérez la demande du client.

2. Analysez les entrées du client.

3. Doit être traité.

4. Envoyer la sortie au client.

Si nous supposons que vous souhaitez écrire une servlet, alors il s'agit d'un morceau de code.

public void doGet(HttpServletRequest request,
   HttpServletResponse response) throws IOException, ServletException {
   String targetId = request.getParameter("id");
   
   if ((targetId != null) && !accounts.containsKey(targetId.trim())) {
      response.setContentType("text/xml");
      response.setHeader("Cache-Control", "no-cache");
      response.getWriter().write("<valid>true</valid>");
   } else {
      response.setContentType("text/xml");
      response.setHeader("Cache-Control", "no-cache");
      response.getWriter().write("<valid>false</valid>");
   }
}

La fonction de rappel appelle processRequest()

L'objet XMLHttpRequest est configuré pour appeler processRequest() lorsque l'état readyState du La fonction de l'objet XMLHttpRequest change. Désormais, cette fonction recevra les résultats du serveur et effectuera le traitement requis. Comme le montre l'exemple suivant, il définit la variable message sur true ou false en fonction de la valeur de retour du serveur Web.

function processRequest() {
   if (req.readyState == 4) {
      if (req.status == 200) {
         var message = ...;
...
}

Mettre à jour le DOM HTML

C'est la dernière étape, dans cette étape, la page HTML sera mise à jour. Cela se produit de la manière suivante :

1. JavaScript utilise l'API DOM pour obtenir une référence à n'importe quel élément de la page.

2. La méthode recommandée pour obtenir des éléments à référencer est d'appeler.

document.getElementById("userIdMessage"),

3. Vous pouvez désormais utiliser JavaScript pour modifier les attributs des éléments, modifier les attributs de style des éléments, ou ajouter, supprimer ou modifier des éléments enfants.

Donnez un exemple :

code js :

   <!--
   function setMessageUsingDOM(message) {
      var userMessageElement = document.getElementById("userIdMessage");
      var messageText;
      
      if (message == "false") {
         userMessageElement.style.color = "red";
         messageText = "Invalid User Id";
      } else {
         userMessageElement.style.color = "green";
         messageText = "Valid User Id";
      }
      
      var messageBody = document.createTextNode(messageText);
      
      // 如果消息体元素已简单创建
      // 需要替换它，否则追加新元素
      if (userMessageElement.childNodes[0]) {
         userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]);
      } else {
         userMessageElement.appendChild(messageBody);
      }
   }
   -->

code html :

<div id = "userIdMessage"><div>

Si vous avez compris les sept ci-dessus étapes, alors vous avez presque terminé l’opération Ajax. Vous pouvez l'essayer vous-même pour approfondir votre compréhension. J'espère que cela vous sera utile pour votre apprentissage. Tutoriels vidéo associés recommandés : Tutoriel Ajax, Tutoriel JavaScript !

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!