AJAX - Azione

Questo capitolo fornisce un'immagine chiara dei passaggi esatti del funzionamento di AJAX.

Fasi dell'operazione AJAX

  • Si verifica un evento client.
  • Viene creato un oggetto XMLHttpRequest.
  • L'oggetto XMLHttpRequest è configurato.
  • L'oggetto XMLHttpRequest effettua una richiesta asincrona al Webserver.
  • Il server Web restituisce il risultato contenente il documento XML.
  • L'oggetto XMLHttpRequest chiama la funzione callback () ed elabora il risultato.
  • Il DOM HTML viene aggiornato.

Facciamo questi passaggi uno per uno.

Si verifica un evento client

  • Una funzione JavaScript viene chiamata come risultato di un evento.

  • Esempio: la funzione JavaScript validateUserId () è mappata come gestore di eventi a un evento onkeyup nel campo del modulo di input il cui ID è impostato su "userid"

  • <input type = "text" size = "20" id = "userid" name = "id" onkeyup = "validateUserId ();">.

Viene creato l'oggetto XMLHttpRequest

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'oggetto XMLHttpRequest è configurato

In questo passaggio, scriveremo una funzione che verrà attivata dall'evento client e verrà registrata una funzione di callback processRequest ().

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

Effettuare una richiesta asincrona al server web

Il codice sorgente è disponibile nella parte di codice sopra. Il codice scritto in grassetto è responsabile di effettuare una richiesta al server web. Tutto questo viene fatto utilizzando l'oggetto 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);
}

Supponiamo di inserire Zara nella casella userid, quindi nella richiesta precedente, l'URL è impostato su "validate? Id = Zara".

Webserver restituisce il risultato contenente il documento XML

È possibile implementare lo script lato server in qualsiasi lingua, tuttavia la sua logica dovrebbe essere la seguente.

  • Ottieni una richiesta dal cliente.
  • Analizza l'input dal client.
  • Eseguire l'elaborazione richiesta.
  • Invia l'output al client.

Se supponiamo che tu stia per scrivere un servlet, allora ecco il pezzo di codice.

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

Viene chiamata la funzione di callback processRequest ()

L'oggetto XMLHttpRequest è stato configurato per chiamare la funzione processRequest () quando si verifica un cambiamento di stato al readyState del XMLHttpRequest oggetto. Ora questa funzione riceverà il risultato dal server e eseguirà l'elaborazione richiesta. Come nell'esempio seguente, imposta un messaggio variabile su vero o falso in base al valore restituito dal server Web.

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

Il DOM HTML è aggiornato

Questo è il passaggio finale e in questo passaggio, la tua pagina HTML verrà aggiornata. Succede nel modo seguente:

  • JavaScript ottiene un riferimento a qualsiasi elemento in una pagina utilizzando l'API DOM.
  • Il modo consigliato per ottenere un riferimento a un elemento è chiamare.
document.getElementById("userIdMessage"), 
// where "userIdMessage" is the ID attribute 
// of an element appearing in the HTML document
  • JavaScript può ora essere utilizzato per modificare gli attributi dell'elemento; modificare le proprietà di stile dell'elemento; oppure aggiungere, rimuovere o modificare gli elementi figlio. Ecco un esempio:

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

Se hai compreso i sette passaggi sopra menzionati, hai quasi finito con AJAX. Nel prossimo capitolo, vedremo l' oggetto XMLHttpRequest in maggiore dettaglio.