Abro este hilo con la intención de crear o transformar nuestras páginas webs con datos estáticos que tienen que recargarse y subirse al FTP enteramente a hacerlo dinámicamente con Ajax iniciales de
Asynchronous JavaScript And XML (JavaScript asíncrono y XML).
Ajax no hace falta instalarse de ningún sitio ya que viene implementado en cualquier navegador con JavaScript. Consiste básicamente en solicitar los datos al servidor por parte del navegador (cliente) en un segundo plano y eso es lo que le hace especialmente atractivo... el que actualice datos en la página sin necesidad de tener que recargar toda la página de nuevo. Actualmente todos los navegadores modernos lo soportan ya que está desde hace bastante tiempo.
Para entender mejor el funcionamiento hacen falta unas nociones básicas de HTML y JavaScript mayormente.
Los sitios web basados en los scripts de Saratoga usan esta técnica pero veamos cómo trabaja con un ejemplo...
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Archena, Murcia Tiempo</title>
<link rel="stylesheet" type="text/css" href="weewx.css"/>
<link rel="icon" type="image/png" href="favicon.ico" />
</head>
<body>
<div id="container">
<div id="masthead">
<h1>Archena, Murcia</h1>
<h2>Condiciones actuales</h2>
<h2>
<span class="ajax" id="ajaxfecha"></span> </h2>
<h3>Temp CPU:
<span class="ajax" id="ajaxtempcpu"></span> </h3>
</div>
<div id="stats_group">
<div class="stats">
<div class="stats_header">
Condiciones actuales
</div>
<table>
<tbody>
<tr>
<td class="stats_label">Temperatura</td>
<td class="stats_data">
<span class="ajax" id="ajaxtemp"></span> </td>
</tr>
</tbody>
</table>
</div>
<p> </p>
<div class="stats">
<div class="stats_header">
Máx/Mín
</div>
<table>
<tbody>
<tr>
<td class="stats_label">
Temp máxima
Temp mínima
</td>
<td class="stats_data">
<span class="ajax" id="ajaxmaxtemp"></span> a las <span class="ajax" id="ajaxmaxtemptime"></span> <span class="ajax" id="ajaxmintemp"></span> a las <span class="ajax" id="ajaxmintemptime"></span>
</td>
</tr>
</tbody>
</table>
</div> <!--End class "stats" -->
</div> <!--End class "stats_group" -->
<div id="content">
<div id="plots">
<img src="daypond.png" alt="Pond Temperatures" />
</div> <!-- End id "plots" -->
</div> <!-- End id "content" -->
</div>
<script>
var clientrawFile = 'realtime.php'; //
Ubicación de la plantilla con los datosvar flashtime = 2000; //
Tiempo en milisegundos que dura el flasheovar flashcolor = "green"; //
Color con el que se flasheavar reloadTime = 10000; //
Tiempo en milisegundos en que actualiza los datos (se ejecuta la función ajaxLoader)
var uomTemp = "°C"; //
Unidad de temperatura
function get_ajax_tags ( ) {
// search all the span tags and return the list with class="ajax" in it
//
var elem = document.getElementsByTagName('span');
var lookfor = 'class';
var arr = new Array();
var iarr = 0;
for(var e = 0; e < elem.length; e++) {
var att = elem[e].getAttribute(lookfor);
if(att == 'ajax') {
arr[iarr] = elem[e];
iarr++;
}
}
return arr;
}
function reset_ajax_color( usecolor ) {
// reset all the <span class="ajax"...> styles to have no color override
var elements = get_ajax_tags();
var numelements = elements.length;
for (var index=0;index!=numelements;index++) {
var element = elements[index];
element.style.color = usecolor;
}
}
function set_ajax_obs( name, value, title ) {
// store away the current value in both the doc and the span as lastobs="value"
// change color if value != lastobs
var element = document.getElementById(name);
if (! element ) { return; } // V1.04 -- don't set if missing the <span id=name> tag
var lastobs = element.getAttribute("lastobs");
element.setAttribute("lastobs",value);
if (value != unescape(lastobs)) {
element.style.color=flashcolor;}
if(!title) title = "";
element.innerHTML = value;
}
function ajaxLoader(url) {
if (document.getElementById) {
var x = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest(url);
}
if (x) {
x.onreadystatechange = function() {
if (x.readyState == 4 && x.status == 200) {
var wx30 = x.responseText.split('|'); //
Se guardan los datos en un array en una variable var temp = parseFloat(wx30[0]); //
Se accede a cada dato según su posición en el array y se trata con javascript
var fecha = wx30[1];
var maxtemp = parseFloat(wx30[2]);
var maxtemptime = wx30[3];
var mintemp = parseFloat(wx30[4]);
var mintemptime = wx30[5];
var tempcpu = wx30[6];
set_ajax_obs("ajaxtemp", temp.toFixed(1) + uomTemp); //
Se asigna cada valor al span con el id que queremos
set_ajax_obs("ajaxfecha", fecha);
set_ajax_obs("ajaxmaxtemp", maxtemp.toFixed(1) + uomTemp);
set_ajax_obs("ajaxmaxtemptime", maxtemptime);
set_ajax_obs("ajaxmintemp", mintemp.toFixed(1) + uomTemp);
set_ajax_obs("ajaxmintemptime", mintemptime);
set_ajax_obs("ajaxtempcpu", tempcpu.trim() + uomTemp);
document.title = "Temp: " + temp.toFixed(1) + "°C";
}
}
}
x.open("GET", url, true);
x.send(null);
setTimeout(function(){ajaxLoader(clientrawFile + '?' + new Date().getTime());}, reloadTime); //
Se inicia el temporizador de la funciónsetTimeout(function(){reset_ajax_color('');},flashtime); //
Se inicia también el temporizador del flasheo }
ajaxLoader(clientrawFile + '?' + new Date().getTime()); //
Se pone en marcha la función</script>
</body>
</html>
http://www.meteoarchena.es/weewx/Esta es una sencilla página web alojada en mi servidor con un sensor de temperatura DS18B20 con weewx en una Orange Pi PC para explicar el funcionamiento y ver las distintas partes. Seguro que a los que tengan página con weewx les resulta familiar el código HTML.
En el código HTML tenemos etiquetas
<span> con
class="ajax" e id="nombre" como atributos. Ahí es donde saldrán los datos actualizados con ajax.
Por ejemplo
<span class="ajax" id="ajaxtemp"> para la temperatura.
En las variables he puesto comentarios para saber qué cambiar y personalizar tiempos y color de flasheo a nuestras necesidades y/o gustos.
Después vienen una serie de funciones que son necesarias para el funcionamiento. Por ejemplo la función
get_ajax_tags coge todos los elementos con la etiqueta
<span> y
reset_ajax_color resetea todos esos valores al color por defecto que tenían al flashearse.
La función
set_ajax_obs es muy importante ya que almacena el dato en un atributo y si el nuevo dato leído no es iguala que guardó en el atributo lo flashea con el color que hayamos puesto en la variable
flashcolor.
Por último viene la función
ajaxLoader que es la más importante ya que recoge los datos y los actualiza en el intervalo de tiempo que esté puesto en la variable
reloadTime.
La creación de la plantilla la podemos hacer con una plantilla personalizada separados en este caso los valores a rellenar por el símbolo "|" (Alt Gr + 1) que ayuda a separar los valores mejor.
En este caso la plantilla es:
www.meteoarchena.es/weewx/realtime.php que es un archivo php que tiene la ventaja de poder "incluir" diferentes archivos de texto como plantillas u otros archivos de datos para hacerlos uno sólo. Por supuesto se puede poner una plantilla en formato txt o html como está en meteoclimatic.
En el caso que he puesto el script está al final de la página ya que se deben de cargar todos los elementos de la página implicados (los spans) para que funcione correctamente.
Si se quiere poner en la cabecera deberá o bien encerrarse en un evento onload (onload = function{...} Se puede crear un archivo js con el script y enlazarlo de esa manera en la cabecera de la página.
Se pueden crear plantillas personalizadas y crear tantas funciones ajaxLoader como se quieran (por ejemplo ajaxLoader2, ajaxLoader3 etc etc) con diferentes plantillas, archivos o por ejemplo actualizar las imágenes con diferentes tiempos de actualización.
P.D. La página puesta como ejemplo puede tener problemas de actualización ya que la Orange Pi PC casi no tiene cobertura del wifi
