AJAX - Guida rapida

AJAX sta per Asincrono JavaScript e XML. AJAX è una nuova tecnica per creare applicazioni web migliori, più veloci e più interattive con l'aiuto di XML, HTML, CSS e Java Script.

  • Ajax utilizza XHTML per il contenuto, CSS per la presentazione, insieme a Document Object Model e JavaScript per la visualizzazione del contenuto dinamico.

  • Le applicazioni Web convenzionali trasmettono informazioni da e verso il server utilizzando richieste sincrone. Significa che compili un modulo, premi Invia e vieni indirizzato a una nuova pagina con nuove informazioni dal server.

  • Con AJAX, quando premi submit, JavaScript farà una richiesta al server, interpreterà i risultati e aggiornerà la schermata corrente. Nel senso più puro, l'utente non saprebbe mai che qualcosa è stato trasmesso al server.

  • XML è comunemente utilizzato come formato per la ricezione dei dati del server, sebbene sia possibile utilizzare qualsiasi formato, incluso il testo normale.

  • AJAX è una tecnologia del browser web indipendente dal software del server web.

  • Un utente può continuare a utilizzare l'applicazione mentre il programma client richiede informazioni dal server in background.

  • Interazione utente intuitiva e naturale. Non è necessario fare clic, il movimento del mouse è un trigger di evento sufficiente.

  • Basato sui dati anziché basato sulla pagina.

Ricca tecnologia per applicazioni Internet

AJAX è la tecnologia RIA (Rich Internet Application) più praticabile finora. Sta ottenendo un enorme slancio nel settore e stanno emergendo diversi strumenti e framework. Ma allo stesso tempo, AJAX ha un'incompatibilità del browser ed è supportato da JavaScript, che è difficile da mantenere ed eseguire il debug.

AJAX è basato su standard aperti

AJAX si basa sui seguenti standard aperti:

  • Presentazione basata su browser utilizzando HTML e CSS (Cascading Style Sheets).
  • I dati vengono memorizzati in formato XML e recuperati dal server.
  • I dati dietro le quinte vengono recuperati utilizzando oggetti XMLHttpRequest nel browser.
  • JavaScript per far accadere tutto.

AJAX non può funzionare in modo indipendente. Viene utilizzato in combinazione con altre tecnologie per creare pagine Web interattive.

JavaScript

  • Linguaggio di scripting tipizzato.
  • La funzione JavaScript viene chiamata quando si verifica un evento in una pagina.
  • Colla per l'intera operazione AJAX.

DOM

  • API per l'accesso e la manipolazione di documenti strutturati.
  • Rappresenta la struttura dei documenti XML e HTML.

CSS

  • Consente una chiara separazione dello stile di presentazione dal contenuto e può essere modificato a livello di codice da JavaScript

XMLHttpRequest

  • Oggetto JavaScript che esegue l'interazione asincrona con il server.

Ecco un elenco di alcune famose applicazioni web che fanno uso di AJAX.

Google Maps

Un utente può trascinare un'intera mappa utilizzando il mouse, anziché fare clic su un pulsante.

Google Suggest

Durante la digitazione, Google offre suggerimenti. Usa i tasti freccia per navigare tra i risultati.

Gmail

Gmail è una webmail basata sull'idea che le email possano essere più intuitive, efficienti e utili.

Yahoo Maps (nuovo)

Ora è ancora più facile e divertente arrivare dove stai andando!

Differenza tra AJAX e il programma CGI convenzionale

Prova questi due esempi uno per uno e sentirai la differenza. Mentre provi l'esempio AJAX, non c'è discontinuità e ottieni la risposta molto rapidamente, ma quando provi l'esempio GCI standard, dovresti aspettare la risposta e anche la tua pagina viene aggiornata.

Esempio AJAX

Esempio standard

NOTE- Abbiamo fornito un esempio più complesso nel database AJAX .

Tutti i browser disponibili non supportano AJAX. Di seguito è riportato un elenco dei principali browser che supportano AJAX.

  • Mozilla Firefox 1.0 e versioni successive.
  • Netscape versione 7.1 e successive.
  • Apple Safari 1.2 e versioni successive.
  • Microsoft Internet Explorer 5 e versioni successive.
  • Konqueror.
  • Opera 7.6 e versioni successive.

Quando scrivi la tua prossima applicazione, considera i browser che non supportano AJAX.

NOTE - Quando diciamo che un browser non supporta AJAX, significa semplicemente che il browser non supporta la creazione di un oggetto Javascript - oggetto XMLHttpRequest.

Scrittura del codice specifico del browser

Il modo più semplice per rendere il tuo codice sorgente compatibile con un browser è usare try ... catch blocchi nel tuo JavaScript.

<html>
   <body>
      <script language = "javascript" type = "text/javascript">
         <!-- 
         //Browser Support Code
         function ajaxFunction() {
            var ajaxRequest;  // The variable that makes Ajax possible!

            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;
                  }
               }
            }
         }
         //-->
      </script>
      
      <form name = 'myForm'>
         Name: <input type = 'text' name = 'username' /> <br />
         Time: <input type = 'text' name = 'time' />
      </form>
      
   </body>
</html>

Nel codice JavaScript sopra, proviamo tre volte a creare il nostro oggetto XMLHttpRequest. Il nostro primo tentativo -

  • ajaxRequest = nuovo XMLHttpRequest ();

È per i browser Opera 8.0+, Firefox e Safari. Se fallisce, proviamo altre due volte a creare l'oggetto corretto per un browser Internet Explorer con:

  • ajaxRequest = nuovo ActiveXObject ("Msxml2.XMLHTTP");
  • ajaxRequest = nuovo ActiveXObject ("Microsoft.XMLHTTP");

Se non funziona, possiamo usare un browser molto obsoleto che non supporta XMLHttpRequest, il che significa anche che non supporta AJAX.

Molto probabilmente, tuttavia, la nostra variabile ajaxRequest sarà ora impostata su qualsiasi standard XMLHttpRequest utilizzato dal browser e possiamo iniziare a inviare dati al server. Il flusso di lavoro AJAX graduale è spiegato nel capitolo successivo.

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 caratteri tipografici 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 modo più dettagliato.

L'oggetto XMLHttpRequest è la chiave per AJAX. È stato disponibile sin dal rilascio di Internet Explorer 5.5 nel luglio 2000, ma non è stato completamente scoperto fino a quando AJAX e Web 2.0 nel 2005 non sono diventati popolari.

XMLHttpRequest (XHR) è un'API che può essere utilizzata da JavaScript, JScript, VBScript e altri linguaggi di scripting del browser Web per trasferire e manipolare i dati XML da e verso un server Web utilizzando HTTP, stabilendo un canale di connessione indipendente tra il lato client di una pagina Web e Lato server.

I dati restituiti dalle chiamate XMLHttpRequest saranno spesso forniti dai database back-end. Oltre a XML, XMLHttpRequest può essere utilizzato per recuperare dati in altri formati, ad esempio JSON o anche testo semplice.

Hai già visto un paio di esempi su come creare un oggetto XMLHttpRequest.

Di seguito sono elencati alcuni dei metodi e delle proprietà con cui devi familiarizzare.

Metodi XMLHttpRequest

  • abort()

    Annulla la richiesta corrente.

  • getAllResponseHeaders()

    Restituisce il set completo di intestazioni HTTP come stringa.

  • getResponseHeader( headerName )

    Restituisce il valore dell'intestazione HTTP specificata.

  • open( method, URL )

  • open( method, URL, async )

  • open( method, URL, async, userName )

  • open( method, URL, async, userName, password )

    Specifica il metodo, l'URL e altri attributi facoltativi di una richiesta.

    Il parametro del metodo può avere un valore di "GET", "POST" o "HEAD". Altri metodi HTTP come "PUT" e "DELETE" (utilizzati principalmente nelle applicazioni REST) ​​potrebbero essere possibili.

    Il parametro "async" specifica se la richiesta deve essere gestita in modo asincrono o meno. "true" significa che l'elaborazione dello script prosegue dopo il metodo send () senza attendere una risposta e "false" significa che lo script attende una risposta prima di continuare l'elaborazione dello script.

  • send( content )

    Invia la richiesta.

  • setRequestHeader( label, value )

    Aggiunge una coppia etichetta / valore all'intestazione HTTP da inviare.

Proprietà XMLHttpRequest

  • onreadystatechange

    Un gestore di eventi per un evento che si attiva a ogni cambio di stato.

  • readyState

    La proprietà readyState definisce lo stato corrente dell'oggetto XMLHttpRequest.

    La tabella seguente fornisce un elenco dei possibili valori per la proprietà readyState:

Stato Descrizione
0 La richiesta non è inizializzata.
1 La richiesta è stata impostata.
2 La richiesta è stata inviata.
3 La richiesta è in corso.
4 La richiesta è completata.

readyState = 0 Dopo aver creato l'oggetto XMLHttpRequest, ma prima di aver chiamato il metodo open ().

readyState = 1 Dopo aver chiamato il metodo open (), ma prima di aver chiamato send ().

readyState = 2 Dopo aver chiamato send ().

readyState = 3 Dopo che il browser ha stabilito una comunicazione con il server, ma prima che il server abbia completato la risposta.

readyState = 4 Dopo che la richiesta è stata completata e i dati di risposta sono stati completamente ricevuti dal server.

  • responseText

    Restituisce la risposta come stringa.

  • responseXML

    Restituisce la risposta come XML. Questa proprietà restituisce un oggetto documento XML, che può essere esaminato e analizzato utilizzando i metodi e le proprietà dell'albero del nodo DOM W3C.

  • status

    Restituisce lo stato come numero (ad esempio, 404 per "Non trovato" e 200 per "OK").

  • statusText

    Restituisce lo stato come una stringa (ad esempio, "Non trovato" o "OK").

Per illustrare chiaramente quanto sia facile accedere alle informazioni da un database utilizzando AJAX, creeremo query MySQL al volo e visualizzeremo i risultati su "ajax.html". Ma prima di procedere, facciamo il lavoro di base. Crea una tabella utilizzando il seguente comando.

NOTE - Si presume che tu abbia privilegi sufficienti per eseguire le seguenti operazioni MySQL.

CREATE TABLE 'ajax_example' (
   'name' varchar(50) NOT NULL,
   'age' int(11) NOT NULL,
   'sex' varchar(1) NOT NULL,
   'wpm' int(11) NOT NULL,
   PRIMARY KEY  ('name')
)

Ora scarica i seguenti dati in questa tabella utilizzando le seguenti istruzioni SQL:

INSERT INTO 'ajax_example' VALUES ('Jerry', 120, 'm', 20);
INSERT INTO 'ajax_example' VALUES ('Regis', 75, 'm', 44);
INSERT INTO 'ajax_example' VALUES ('Frank', 45, 'm', 87);
INSERT INTO 'ajax_example' VALUES ('Jill', 22, 'f', 72);
INSERT INTO 'ajax_example' VALUES ('Tracy', 27, 'f', 0);
INSERT INTO 'ajax_example' VALUES ('Julie', 35, 'f', 90);

File HTML lato client

Ora disponiamo del nostro file HTML lato client, che è ajax.html, e avrà il seguente codice:

<html>
   <body>
      <script language = "javascript" type = "text/javascript">
         <!-- 
         //Browser Support Code
         function ajaxFunction() {
            var ajaxRequest;  // The variable that makes Ajax possible!
            
            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;
                  }
               }
            }
            
            // Create a function that will receive data
            // sent from the server and will update
            // div section in the same page.
            ajaxRequest.onreadystatechange = function() {
            
               if(ajaxRequest.readyState == 4) {
                  var ajaxDisplay = document.getElementById('ajaxDiv');
                  ajaxDisplay.innerHTML = ajaxRequest.responseText;
               }
            }
            
            // Now get the value from user and pass it to
            // server script.
            var age = document.getElementById('age').value;
            var wpm = document.getElementById('wpm').value;
            var sex = document.getElementById('sex').value;
            var queryString = "?age = " + age ;
            
            queryString +=  "&wpm = " + wpm + "&sex = " + sex;
            ajaxRequest.open("GET", "ajax-example.php" + queryString, true);
            ajaxRequest.send(null); 
         }
         //-->
      </script>

      <form name = 'myForm'>
         Max Age: <input type = 'text' id = 'age' /> <br />
         Max WPM: <input type = 'text' id = 'wpm' /> <br />
         Sex: 
         
         <select id = 'sex'>
            <option value = "m">m</option>
            <option value = "f">f</option>
         </select>
         
         <input type = 'button' onclick = 'ajaxFunction()' value = 'Query MySQL'/>
      </form>
      
      <div id = 'ajaxDiv'>Your result will display here</div>
   </body>
</html>

NOTE - Il modo di passare le variabili nella Query è conforme allo standard HTTP e ha formaA.

URL?variable1 = value1;&variable2 = value2;

Il codice sopra ti darà una schermata come indicato di seguito -

Il risultato verrà visualizzato qui in questa sezione dopo aver inserito la voce.

NOTE - Questo è uno schermo fittizio.

File PHP lato server

Il tuo script lato client è pronto. Ora dobbiamo scrivere il nostro script lato server, che recupererà età, wpm e sesso dal database e lo invierà al client. Inserisci il codice seguente nel file "ajax-example.php".

<?php
$dbhost = "localhost"; $dbuser = "dbusername";
$dbpass = "dbpassword"; $dbname = "dbname";
	
//Connect to MySQL Server
mysql_connect($dbhost, $dbuser, $dbpass); //Select Database mysql_select_db($dbname) or die(mysql_error());
	
// Retrieve data from Query String
$age = $_GET['age'];
$sex = $_GET['sex'];
$wpm = $_GET['wpm'];
	
// Escape User Input to help prevent SQL Injection
$age = mysql_real_escape_string($age);
$sex = mysql_real_escape_string($sex);
$wpm = mysql_real_escape_string($wpm);
	
//build query
$query = "SELECT * FROM ajax_example WHERE sex = '$sex'";

if(is_numeric($age)) $query .= " AND age <= $age"; if(is_numeric($wpm))
   $query .= " AND wpm <= $wpm";
	
//Execute query
$qry_result = mysql_query($query) or die(mysql_error());

//Build Result String
$display_string = "<table>"; $display_string .= "<tr>";
$display_string .= "<th>Name</th>"; $display_string .= "<th>Age</th>";
$display_string .= "<th>Sex</th>"; $display_string .= "<th>WPM</th>";
$display_string .= "</tr>"; // Insert a new row in the table for each person returned while($row = mysql_fetch_array($qry_result)) { $display_string .= "<tr>";
   $display_string .= "<td>$row[name]</td>";
   $display_string .= "<td>$row[age]</td>";
   $display_string .= "<td>$row[sex]</td>";
   $display_string .= "<td>$row[wpm]</td>";
   $display_string .= "</tr>"; } echo "Query: " . $query . "<br />";
$display_string .= "</table>"; echo $display_string;
?>

Ora prova inserendo un valore valido (ad esempio, 120) in Max Age o qualsiasi altra casella e quindi fai clic sul pulsante Query MySQL.

Il risultato verrà visualizzato qui in questa sezione dopo aver inserito la voce.

Se hai completato con successo questa lezione, allora sai come usare MySQL, PHP, HTML e Javascript in tandem per scrivere applicazioni AJAX.

Sicurezza AJAX: lato server

  • Le applicazioni Web basate su AJAX utilizzano gli stessi schemi di protezione lato server delle normali applicazioni Web.

  • Puoi specificare i requisiti di autenticazione, autorizzazione e protezione dei dati nel tuo file web.xml (dichiarativo) o nel tuo programma (programmatico).

  • Le applicazioni Web basate su AJAX sono soggette alle stesse minacce alla sicurezza delle normali applicazioni Web.

Sicurezza AJAX: lato client

  • Il codice JavaScript è visibile a un utente / hacker. L'hacker può utilizzare il codice JavaScript per dedurre i punti deboli del lato server.

  • Il codice JavaScript viene scaricato dal server ed eseguito ("eval") sul client e può compromettere il client con codice mal intenzionale.

  • Il codice JavaScript scaricato è vincolato dal modello di sicurezza sandbox e può essere rilassato per JavaScript firmato.

AJAX sta crescendo molto velocemente e questo è il motivo per cui contiene molti problemi. Ci auguriamo che con il passare del tempo si risolveranno e AJAX diventerà l'ideale per le applicazioni web. Stiamo elencando alcuni problemi di cui soffre attualmente AJAX.

Complexity is increased

  • Gli sviluppatori lato server dovranno comprendere che la logica di presentazione sarà richiesta nelle pagine client HTML così come nella logica lato server.

  • Gli sviluppatori di pagine devono avere competenze tecnologiche JavaScript.

AJAX-based applications can be difficult to debug, test, and maintain

  • JavaScript è difficile da testare: il test automatico è difficile.
  • Modularità debole in JavaScript.
  • Mancanza ancora di modelli di progettazione o linee guida sulle migliori pratiche.

Toolkits/Frameworks are not mature yet

  • La maggior parte di loro sono in fase beta.

No standardization of the XMLHttpRequest yet

  • La versione futura di IE affronterà questo problema.

No support of XMLHttpRequest in old browsers

  • Iframe ti aiuterà.

JavaScript technology dependency and incompatibility

  • Deve essere abilitato affinché le applicazioni funzionino.
  • Esistono ancora alcune incompatibilità del browser.

JavaScript code is visible to a hacker

  • Il codice JavaScript mal progettato può creare problemi di sicurezza.