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.

↰ Previous page Next page ↱