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:
Fino ad oggi ho sviluppato la pagina in PHP e richiamavo se stessa ogni tot secondi tramite il refresh dell'html.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
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!"); } }Tutto funziona bene, i dati si aggiornano. Quello che vorrei sapere da voi è: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
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
Rispondi quotando
