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

Leggere le news di Google: lato client

Invio dati con GET per ottenere una risposta personalizzata
Invio dati con GET per ottenere una risposta personalizzata
Link copiato negli appunti

Proseguiamo l'esempio mettendo in piedi lo script per generare la richiesta asincrona. Oltre al solito file utility.js il client dovrà avere a disposizione un altro file, chiamato all'occorrenza leggiGoogleNews.js, che contiene la funzione leggiGoogleNews() per offrire questo servizio.

Listato 30. Chiamata asincrona alle news di Google

// scegliere il nome del file server da utilizzare
// leggiNews.php oppure leggiNews.aspx
var serverSide = 'PHP/leggiNews.php';

function leggiGoogleNews(idPaese, idSubmit, idRisultato) {

  // variabili di funzione
  var
    // select contenente alcuni paesi
    paeseScelto = prendiElementoDaId(idPaese).value,
  
    // tasto di invio richiesta form
    bottoneSubmit = prendiElementoDaId(idSubmit),
  
    // div con id univoco per mostrare il risultato
    divRisultato = prendiElementoDaId(idRisultato),
  
    // oggetto ajax
    ajax = assegnaXMLHttpRequest();
 
  // se tutti gli elementi appena assegnati sono validi
  if(ajax && paeseScelto && bottoneSubmit && divRisultato) {

    // evitiamo richieste multiple disabilitando il bottone di submit
    bottoneSubmit.disabled = true;
  
    // inizializziamo l'oggetto per la richiesta richiamando il file
    // server desiderato ed aggiungendo alla url la querystring
    // contenente l'abbreviazione del nome del paese
    // riconosciuta da Google
    ajax.open("get", serverSide + "?lingua=" + paeseScelto, true);
    ajax.setRequestHeader("connection", "close");
  
    // funzione assegnata ad onreadystatechange
    ajax.onreadystatechange = function() {
  
      // se le operazioni sono state effettuate
      if(ajax.readyState === readyState.COMPLETATO) {
   
        // ... ed il server non ha dato errori
        if(statusText[ajax.status] === "OK")
          // stampiamo il risultato
          divRisultato.innerHTML = parsaXml(ajax.responseXML);
    
        // ... altrimenti mandiamo un avviso
        else
          divRisultato.innerHTML = "Impossibile effettuare l'operazione richiesta.<br />" + "Errore riscontrato: " + statusText[ajax.status];
     
        // riabiliamo il bottone per permettere un'altra richiesta
        bottoneSubmit.disabled = false;
      };
    };
  
    // invio richiesta
    ajax.send(null);
  
    // durante l'attesa si comunica all'utente
    // che la pagina sta effettuando l'operazione richiesta
    divRisultato.innerHTML = "<img src="immagini/indicatore.gif" alt="caricamento dati" />" + "   lettura in corso ...";
  };
 
  // se qualche elemento manca o il browser non supporta AJAX
  // ritorna 'true' per far operare il form come
  // se non ci fosse alcun javascript
  return !ajax;
};

La funzione parsaXml() è a grandi linee la stessa usata nell'esempio della request in XML ad eccezione del controllo sull'autore.

Un form per tutti

È fondamentale strutturare il form perchè sia degradabile, qualità indispensabile per permettere a chiunque di utilizzare il servizio proposto.

Listato 31. Form degradabile per lanciare la richiesta

<div>
 <form
  method="get"
  action="http://news.google.it/news"
  onsubmit="return leggiGoogleNews('paese', 'visualizza', 'risultato');"
 >
  <fieldset>
   <legend>Di quale paese ti interessano le news ?</legend>
   <label for="paese">lingua e paese scelti per le news</label>
   <select tabindex="1" id="paese" name="ned">
    <!--// ... alcuni paesi selezionabili //-->
    <option value="en_ie">Irlanda</option>
    <option value="it" selected="selected">Italia</option>
    <option value="es_mx">Messico</option>
    <!--// altri paesi selezionabili ... //-->
   </select>
   <label for="visualizza">visualizza il risultato</label>
   <input tabindex="2" id="visualizza" type="submit" value="leggi le news" />
  </fieldset>
 </form>
</div>
<div id="risultato"></div>

Il fulcro della degradabilità è rappresentato dall'evento onsubmit, il quale verrà ignorato sia dagli utenti che non hanno JavaScript abilitato sia da coloro che non hanno un browser aggiornato. Il valore true, restituito in questo caso dalla funzione, farà richiedere alla form stessa la pagina http://news.google.it/news con appesa la variabile del paese selezionato.

Lo scopo del servizio è permettere di leggere tali news, e la variabile output=rss è stata volutamente omessa nell'attributo action, per evitare che un browser non aggiornato mostri all'utente l'albero RSS, di difficile lettura.

Per concludere con questo esempio, ecco il link al file zip contenente tutto il necessario per testare l'applicativo, il quale dovrà essere lanciato dal file index.html attraverso il webserver locale in grado di gestire PHP oppure ASP.NET.

Ti consigliamo anche