Un saluto a tutti.
Mi sto avvicinando al linguaggio Javascript e AJAX e vorrei chiedervi un parere sia sul modo di programmare che sull'approccio ad un problema.
Devo visualizzare in una pagina web dei valori prelevati da database. La struttura record è la seguente:
codice:
ID  Tag           Ora                  Valore    
 1  PRESSIONE     2010-02-01 12:00:00      50    
 2  PORTATA       2010-02-01 12:00:00      50    
 3  TEMPERATURA   2010-02-01 12:00:00      50
Fino ad oggi ho sviluppato la pagina in PHP e richiamavo se stessa ogni tot secondi tramite il refresh dell'html.
La cosa antipatica e che mentre scorri la pagina per visualizzare i dati, parte il refresh che mi riporta all'inizio. Allora ho deciso di implementare Javascript ed AJAX.
Ho buttato giù un po' di codice e sono arrivato al punto di avere 3 file:
hmi.php -> Viene lanciato all'inizio e si occupa di accedere al database per prelevare i campi ID e Tag e costruire la tabella html e creare i tag ID della cella dei valori e dell'ora
hmi_ajax.js -> E' presente la classe Tag e le funzioni AJAX
hmiupdate_ajax.php -> Viene richiamata da hmi_ajax.js ogni tot secondi per accedere di nuovo al database e prelevare nuovamente l'ID con i valori e l'ora aggiornati
Questo il codice:
codice:
// hmi.php ------------------------------------------------------------------------------------

$arrTags=array();

$content="";

  // Recupero dati
  $conn = @mysql_connect("localhost", "utente", "password");
	mysql_select_db(DB_HMI_CP,$conn);
	
	$result="";
	$queryTag="SELECT ID, Ora, Tag, Valore, Descrizione FROM CPGHI_K2 ORDER BY ID";
	$result=mysql_query($queryTag,$conn);
	while($rs = mysql_fetch_array($result,MYSQL_ASSOC)) {
		$arrTags[$rs['ID']]['ID']=$rs['ID'];
		$arrTags[$rs['ID']]['Nome']=$rs['Tag'];
		$arrTags[$rs['ID']]['Ora']=$rs['Ora'];
		$arrTags[$rs['ID']]['Valore']=$rs['Valore'];
		$arrTags[$rs['ID']]['Descrizione']=$rs['Descrizione'];  
	}

// Costruzione della pagina
$content.="
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'>
<html>
<head>
  <meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'>
  <title>Javascript & AJAX</title>
  <script language='javascript' src='hmi_ajax.js' type='text/javascript'></script>
</head>
<body onLoad=\"window.setInterval('Richiesta(2)', ".REFRESH_SECONDS." * 1000);\">";

$content.="
  <table width='100%' border='1' align='center' cellspacing='0' cellpadding='1'>
    <tr>
      <td colspan='3'class='campo'>DATI CARROPONTE K1</td>
    </tr>
    <tr>
      <td width='70%'>Descrizione</td>
      <td width='10%'>Valore</td>
      <td width='20%'>Ora</td>
    </tr>";
  foreach($arrTags as $tag){
    $content.="
    <tr>
      <td>".$tag['Descrizione']."</td>
      <td id='v".$tag['ID']."'>#</td>  <- v=Valore + ID (v1,v2,v3,ecc)
      <td id='h".$tag['ID']."'>#</td>  <- h=Ora + ID (h1,h2,h3,ecc)
    </tr>";
  }
  $content.="
  </table>";

$content.="
  </body>
</html>";

echo $content;
codice:
hmi_ajax.js -----------------------------------------------------------

var XMLHTTP;

function Tag (id,valore,ora){
  this.nome = "";
  this.descrizione = "-";
  this.valore = valore;
  this.ora = ora;
  this.id = id;
}

function Richiesta(Stringa) {

  if(Stringa > 0){
    var url = "hmiupdate_ajax.php?cpk=" + Stringa;
    XMLHTTP = RicavaBrowser(CambioStato);
    XMLHTTP.open("GET", url, true);
    XMLHTTP.send(null);
  }else{
    //document.getElementById("out").innerHTML = "";
  }
}

function CambioStato() {
  if (XMLHTTP.readyState == 4){
   
    eval(XMLHTTP.responseText);
    
    // Scrivo nelle celle i valori e l'ora aggiornati
    for(item = 0; item < tagList.length; item++){
      document.getElementById("v" + tagList[item].id).innerHTML = tagList[item].valore;
      document.getElementById("h" + tagList[item].id).innerHTML = tagList[item].ora;
    }
//    tag = null;
  }
}

function RicavaBrowser(QualeBrowser){

  if(navigator.userAgent.indexOf("MSIE") != (-1)){
    var Classe = "Msxml2.XMLHTTP";
    if(navigator.appVersion.indexOf("MSIE 5.5") != (-1)){
      Classe = "Microsoft.XMLHTTP";
    }
    try {
      OggettoXMLHTTP = new ActiveXObject(Classe);
      OggettoXMLHTTP.onreadystatechange = QualeBrowser;
      return OggettoXMLHTTP;
    } catch (e) {
      alert("Errore: l'activeX non verrà eseguito!");
    }
  }else if(navigator.userAgent.indexOf("Mozilla") != (-1)) {
    OggettoXMLHTTP = new XMLHttpRequest();
    OggettoXMLHTTP.onload = QualeBrowser;
    OggettoXMLHTTP.onerror = QualeBrowser;
    return OggettoXMLHTTP;
  }else {
    alert("L'esempio non funziona con altri browser!");
  }
  
}
codice:
// hmiupdate_ajax.php --------------------------------------------------------

$res="";   // Codice Javascript creato da PHP

  // Recupero dati
  $conn = @mysql_connect(HOST, "utente", "password");
  mysql_select_db(DB_HMI_CP,$conn);

  // Creo un nuovo array in Javascript
  $res .= "var tagList = new Array(); ";
  $result="";
  $queryTag="SELECT ID, Ora, Tag, Valore, Descrizione FROM CPGHI_K2 ORDER BY ID";
  $result=mysql_query($queryTag,$conn);
  $i=-1;
  while($rs = mysql_fetch_array($result,MYSQL_ASSOC)) {
    $i++;

    // Aggiungo all'array un nuovo oggetto Tag
    $res .= "tagList[".$i."] = new Tag(\"".$rs['ID']."\",
                                       \"".$rs['Valore']."\",
                                      \"".$rs['Ora']."\"); ";
    }

  mysql_free_result($result);
  unset($result);
  unset($rs);

  echo $res;   // Ritorno il codice in Javascript
Tutto funziona bene, i dati si aggiornano. Quello che vorrei sapere da voi è:
1) E' corretto creare codice Javascript da php?
2) E' corretto creare ogni volta dei nuovi oggetti Tag? Non influisce sulla memoria del client?
3) Non è più corretto creare tutti gli oggetti Tag la prima volta e successivamente aggiornare le sue proprietà Valore e Ora?
4) A parte che il tutto funziona ma a me interessa che sia codice pulito. Avete altre soluzioni da suggerirmi?
5) Si può ridurre il numero di file da 3 a 2 accorpando la logica?

Mi scuso per essere stato lungo e spero di essermi spiegato bene.
Grazie