Esempio Pratico

   
Implementazione di un Motore di Ricerca JavaScript lato client
Ora invece di proseguire con esempi astratti faremo un esercizio di utilità e concretezza.
anche per questo esercizio vale la stessa
NOTA:
Se si usa il browser firefox si può usare una cartella del file system sul desktop,
altrimenti occorre un qualunque serverHTTP, anche se tutte le operazione verranno svolte lato CLIENT da JavaScript.

<!DOCTYPE html>
<html lang="it">
  <head>
    <title>MotoreDiRicerca</title>
    <meta charset="ISO-8859-1">

    <script type="text/javascript">
      function loadXMLDoc(dname) {  
        var trova = document.modulo.casella.value.toUpperCase(); //Controllo ricerca per nessun valore
        if ((trova == "") || (trova == "undefined")) { //verrà restituito un messaggio di avviso 
          risultati.innerHTML = "Inserire un termine per eseguire una ricerca";
          return false;
        }
        else risultati.innerHTML = "";  //ripuliamo la casella cerca
      //Ci serviamo dell'oggetto XMLHttpRequest per creare l'oggetto DOM per browser standard
        if (window.XMLHttpRequest) {
          xhttp=new XMLHttpRequest();
        }
        else {
        xhttp=new ActiveXObject("Microsoft.XMLHTTP");  //se il browser é IE prima della versione 7
        }
        xhttp.open("GET",dname,false);
        xhttp.send();
        xmlDoc = xhttp.responseXML; //memorizza il file "mappa.xml" passato dal pulsante controlla
        var output = "";  //impostiamo la variabile di uscita vuota
        var nodes = xmlDoc.documentElement.childNodes; //memorizzazzione elementi node nella variabile "nodes"
        for (var i = 0; i <= nodes.length - 1; i++) {
          if (nodes.item(i).nodeType != Node.ELEMENT_NODE) continue;
//Firefox conteggia spazi vuoti tra i tag come "nodi di testo", ci assicuriamo che sia un "nodo elemento"
          var stringa = nodes.item(i).getAttribute('chiave');
          var arrayStringa = stringa.split(",");
//metodo split() per ottenere valori "chiave"(10 ma si possono aumentare) e trasformarli in un vettore
          for(var j=0; j<=10; j++){
            if(arrayStringa[j]){
              if (trova == arrayStringa[j].toUpperCase()) {
                var output = '<a href="' + nodes.item(i).getAttribute('target') + '">' +
                  nodes.item(i).getAttribute('label') + '</a><br />';
//Si utilizza qui il metodo getAttribute per ottenere i valori "label" e "target" desiderati
                risultati.innerHTML += output;  //pubblica così le voci trovate
              }
            }
          }
        }
        if ((output == "") || (output == "undefined")) {
          risultati.innerHTML = "Nessun risultato per la ricerca"; //se non si trovano voci corrispondenti
        }
      }
    </script>    
  </head>

  <body>
      
      <div>
        <form class="cerca" name="modulo" id="modulo" action="self">
          cerca: <input type="search" id="casella" name="casella" value="parolaUnica" autofocus>
          <input type="button" onclick=">loadXMLDoc('mappa.xml');" value="controlla">
        </form>  
      </div>

     <div><em>Immettere parole uniche</em><br><br>
      <p style="text-align: center; color: #f00;">Risultati della Ricerca<hr style="width: 50%;"></p>
         <br><div id="risultati" style="text-align: center; color: #00f;"></div>
     </div>

  </body>
</html>

Ed ora il file "mappa.xml" su cui viene effettuata la ricerca:

  <?xml version="1.0"?>
  <mappa>
    <item chiave=">html,css,javaScript" target="percorso/pagina01.php" label="pagina01" />
    <item chiave=">jQuery" target="percorso/pagina02.php" label="pagina02" />
    <item chiave=">xml" target="percorso/pagina03.php" label="pagina03" />
    <item chiave=">http,protocollo," target="percorso/pagina04.php" label="pagina04" />
    <item chiave=">grafica" target="percorso/pagina05.php" label="pagina05" />
    <item chiave=">linguaggio,tag,titolo," target="percorso/pagina06.php" label="pagina06" />
    <item chiave=">tavola_elementi" target="percorso/pagina07.php" label="pagina07" />
    <item chiave=">caratteri_speciali" target="percorso/pagina08.php" label="pagina08" />
    <item chiave=">altre_cose,ecc," target="percorso/pagina09.php" label="pagina09" />
  </mappa

I termini scritti in >rosso separati da virgole sono le parole che permettono la ricerca attraverso la "chiave";
I percorsi scriti in marrone sono indirizzi dove si trovano i risultati della ricrca individuati dal "target";
(ovviamente devono portare a pagine reali dove si trovano i risultati della ricerca)
I collegamenti scritti in viola sono i link di collegamento individuati attraverso il "label".
La mappa può essere lunga quanto si vuole e i termini di ricerca pure;
basta aumentare il for(var j=0; j<=10; j++) al numero che si vuole.