Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 10 di 24
  • livello principiante
Indice lezioni

Leggere un testo

Effettuare una richiesta asincrona per importare il contenuto di un file di testo
Effettuare una richiesta asincrona per importare il contenuto di un file di testo
Link copiato negli appunti

A questo punto si hanno tutte le informazioni per creare un primo applicativo in AJAX. Per concentrarsi solo sul codice utile è consigliabile mettere le funzioni più comuni su un file esterno, chiamato in questo caso utility.js e visionabile o scaricabile in questa pagina. Si consiglia inoltre di leggere i commenti presenti al suo interno.

Ecco il primo esempio di richiesta AJAX, scritto in xhtml 1.1 e compatibile con i validatori più conosciuti.

Listato 15. Importare un testo con AJAX

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" >
<head>
<title>HTML.it | AJAX | Primo esempio</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="HTML.it | Guida ajax, request testuale" />
<meta name="keywords" content="guida, ajax, remote scripting, esempio, esempi" />
<meta name="author" content="Andrea Giammarchi per HTML.IT" />
<script type="text/javascript" src="utility.js"><!--// ajax utility //--></script>
<script type="text/javascript"><!--//


// funzione di caricamento testo,
// accetta una stringa contenente
// il nome di un file da leggere

function caricaTesto(nomeFile) {

  // variabili di funzione
  var
    // assegnazione oggetto XMLHttpRequest
    ajax = assegnaXMLHttpRequest(),
    // assegnazione elemento del documento
    elemento = prendiElementoDaId("contenuto-dinamico"),
    // risultato booleano di funzione
    usaLink = true;
  
  // se l'oggetto XMLHttpRequest non è nullo
  if(ajax) {
    // il link al file non deve essere usato
    usaLink = false;

    // impostazione richiesta asincrona in GET
    // del file specificato
    ajax.open("get", nomeFile, true);

    // rimozione dell'header "connection" come "keep alive"
    ajax.setRequestHeader("connection", "close");

    // impostazione controllo e stato della richiesta
    ajax.onreadystatechange = function() {
      
      // verifica dello stato
      if(ajax.readyState === readyState.COMPLETATO) {
        // verifica della risposta da parte del server
        if(statusText[ajax.status] === "OK")
          // operazione avvenuta con successo
          elemento.innerHTML = ajax.responseText;
        else {
          // errore di caricamento
          elemento.innerHTML = "Impossibile effettuare l'operazione richiesta.<br />";
          elemento.innerHTML += "Errore riscontrato: " + statusText[ajax.status];
        }
      } 
    }

    // invio richiesta
    ajax.send(null);
  }
   
  return usaLink;

//--></script>
<style type="text/css" media="all">
body {
 font-family: Verdana, Helvetica, sans-serif;
 font-size: 9pt;
 background: #FFF;
 color: #000;
}
h1 {
 font-size: 12pt;
 border-bottom: 1px solid silver;
 color: #009;
}
</style>
</head>
<body>
<div>
<h1>Request Testuale</h1>

<div id="contenuto-dinamico">
Questo testo è stato inserito all'interno di un elemento di tipo div
con id univoco: contenuto-dinamico .<br />
Per cambiare questo contenuto è sufficiente clickare su

<!-- è importante fare caso alla costruzione di questo link:
     permette di leggere il testo anche senza AJAX -->

<a href="testo.txt"
onclick="return caricaTesto(this.href);"
onkeypress="return this.onclick();"
tabindex="1">questo link</a>.
</div>

</div>
</body>
</html>

I commenti presenti nel codice JavaScript dovrebbero essere abbastanza esplicativi, i passaggi fondamentali sono:

  • si verifica la possibilità di usare AJAX,
  • si imposta la richiesta,
  • si effettuano operazioni differenti a seconda che quest'ultima sia fallita o meno.

Note sull'accessibilità

È degno di nota anche il markup utilizzato nell'esempio. Infatti con o senza il supporto di XMLHttpRequest, sia che la pagina fosse XHTML, sia che non lo fosse, rimane salvaguardata l'accessibilità al testo. Questo grazie al modo in cui è costruito il link.

La doppia assegnazione dei due eventi, onclick ed onkeypress, potrebbe essere considerata superflua, considerando che il solo evento onclick è gestito da qualunque browser come pointer-indipendent e sfruttabile quindi da qualunque dispositivo di puntamento, tastiera compresa. Le regole sull'accessibilità però obbligano ancora gli sviluppatori più attenti a questo tema ad inserire il controllo su onkeypress.

Non è obiettivo di questa guida spiegare come gestire gli eventi della tastiera mentre è fondamentale capire che costruire un link in questo modo consente l'accesso al testo sia di utenti senza javascript sia dai robots, quali ad esempio i motori di ricerca, che fin'ora difficilmente indicizzano i contenuti asincroni richiamati in AJAX.

Il concetto della multi compatibilità ha un nome ben preciso: degradabilità.

Listato 16. Esempio base di link degradabile

<a href="pagina.html" onclick="return richiestaAsincrona(this.href);">pagina.html</a>


Ti consigliamo anche