AJAX - Action

Ce chapitre vous donne une image claire des étapes exactes de l'opération AJAX.

Étapes de l'opération AJAX

Un événement client se produit.
Un objet XMLHttpRequest est créé.
L'objet XMLHttpRequest est configuré.
L'objet XMLHttpRequest envoie une requête asynchrone au serveur Web.
Le serveur Web renvoie le résultat contenant le document XML.
L'objet XMLHttpRequest appelle la fonction callback () et traite le résultat.
Le DOM HTML est mis à jour.

Prenons ces étapes une par une.

Un événement client se produit

Une fonction JavaScript est appelée à la suite d'un événement.
Exemple - La fonction JavaScript validateUserId () est mappée en tant que gestionnaire d'événements à un événement onkeyup sur le champ du formulaire d'entrée dont l'ID est défini sur "userid"
<input type = "text" size = "20" id = "userid" name = "id" onkeyup = "validateUserId ();">.

L'objet XMLHttpRequest est créé

var ajaxRequest;  // The variable that makes Ajax possible!
function ajaxFunction() {
   try {
      // Opera 8.0+, Firefox, Safari
      ajaxRequest = new XMLHttpRequest();
   } catch (e) {
   
      // Internet Explorer Browsers
      try {
         ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
      
         try {
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (e) {
      
            // Something went wrong
            alert("Your browser broke!");
            return false;
         }
      }
   }
}

L'objet XMLHttpRequest est configuré

Dans cette étape, nous écrirons une fonction qui sera déclenchée par l'événement client et une fonction de rappel processRequest () sera enregistrée.

function validateUserId() {
   ajaxFunction();
   
   // Here processRequest() is the callback function.
   ajaxRequest.onreadystatechange = processRequest;
   
   if (!target) target = document.getElementById("userid");
   var url = "validate?id=" + escape(target.value);
   
   ajaxRequest.open("GET", url, true);
   ajaxRequest.send(null);
}

Faire une requête asynchrone au serveur Web

Le code source est disponible dans le morceau de code ci-dessus. Le code écrit en caractères gras est responsable de faire une demande au serveur Web. Tout cela se fait à l'aide de l'objet XMLHttpRequest ajaxRequest .

function validateUserId() {
   ajaxFunction();
   
   // Here processRequest() is the callback function.
   ajaxRequest.onreadystatechange = processRequest;
   
   if (!target) target = document.getElementById("userid");
   var url = "validate?id = " + escape(target.value);
   
   ajaxRequest.open("GET", url, true);
   ajaxRequest.send(null);
}

Supposons que vous saisissiez Zara dans la zone userid, puis dans la requête ci-dessus, l'URL est définie sur "validate? Id = Zara".

Webserver renvoie le résultat contenant le document XML

Vous pouvez implémenter votre script côté serveur dans n'importe quelle langue, mais sa logique doit être la suivante.

Obtenez une demande du client.
Analysez l'entrée du client.
Effectuez le traitement requis.
Envoyez la sortie au client.

Si nous supposons que vous allez écrire un servlet, voici le 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 processRequest () est appelée

L'objet XMLHttpRequest a été configuré pour appeler la fonction processRequest () lors d'un changement d'état du readyState de l' objet XMLHttpRequest . Maintenant, cette fonction recevra le résultat du serveur et effectuera le traitement requis. Comme dans l'exemple suivant, il définit un message variable sur true ou false en fonction de la valeur renvoyée par le serveur Web.

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

Le DOM HTML est mis à jour

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

JavaScript obtient une référence à n'importe quel élément d'une page à l'aide de l'API DOM.
La méthode recommandée pour obtenir une référence à un élément est d'appeler.

document.getElementById("userIdMessage"), 
// where "userIdMessage" is the ID attribute 
// of an element appearing in the HTML document

JavaScript peut maintenant être utilisé pour modifier les attributs de l'élément; modifier les propriétés de style de l'élément; ou ajouter, supprimer ou modifier les éléments enfants. Voici un exemple -

<script type = "text/javascript">
   <!--
   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 the messageBody element has been created simple 
      // replace it otherwise append the new element
      if (userMessageElement.childNodes[0]) {
         userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]);
      } else {
         userMessageElement.appendChild(messageBody);
      }
   }
   -->
</script>

<body>
   <div id = "userIdMessage"><div>
</body>

Si vous avez compris les sept étapes mentionnées ci-dessus, alors vous avez presque terminé avec AJAX. Dans le chapitre suivant, nous verrons l' objet XMLHttpRequest plus en détail.