PRINCIPIO Y DISEÑO DE APLICACIONES A REDES

Ejemplo de Ajax

Tenemos un botón (o cualquier otro elemento) cuya función es, al ser presionado, crear un objeto que será el encargado de recoger ciertos datos de nuestra base de datos y con ellos refrescar un determinado sector de nuestra página

Al presionar el botón correspondiente, ir al soporte de datos en búsqueda de los registros que contiene y luego mostrarlos en pantalla. Se le añadirá al sistema un campo input el cual tendrá como función insertar los datos que coloquemos en él en la base de datos

Comenzamos definiendo la estructura de las tablas en base de datos con un juego de registros iniciales:

CREATE TABLE `cache` ( `id` int(11) NOT NULL auto_increment, `valor` varchar(255) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

INSERT INTO `cache` (`id`, `valor`) VALUES (1, 'Dato 1'), (2, 'Dato 2');

Tendremos también dos scripts. El primero será nuestro .html que contendrá los campos de formulario y las funciones en JavaScript encargadas de la comunicación asincrónica. El segundo será el código que actúa como servidor y su función será realizar las operaciones de INSERT y SELECT en la base de datos.

Ejemplo: ajax_cache.html

function nuevoAjax() { var xmlhttp=false; try { // Creacion del objeto AJAX para navegadores no IE xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { try { // Creacion del objet AJAX para IE xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch(E) { if (!xmlhttp && typeof XMLHttpRequest!="undefined") xmlhttp=new XMLHttpRequest(); } } return xmlhttp; }

function mostrarDatos() { ajax=nuevoAjax(); ajax.open("GET", "ajax_cache_2.php?accion=mostrar", true); ajax.onreadystatechange=function() { if (ajax.readyState==4) { document.getElementById("texto").innerHTML=ajax.responseText; } } ajax.send(null); }

function guardarDato() { var dato=document.getElementById("iIngreso").value; ajax=nuevoAjax(); ajax.open("GET", "ajax_cache_2.php?accion=guardar&dato="+dato, true); ajax.onreadystatechange=function() { if (ajax.readyState==4) { alert("Dato guardado"); } } ajax.send(null); }

Si nuestra aplicación AJAX se conecta con un archivo PHP, ASP u otro que tengamos acceso y se nos permita modificar, la solución se reduce a una simple línea de código que colocaremos en dicho archivo antes de cualquier línea que genere salida

ajax_cache_2.php

<?php header("Cache-Control: no-store, no-cache, must-revalidate");

function conectar() { mysql_connect("localhost", "root", ""); mysql_select_db("ajax"); } function desconectar() conectar(); $registros=mysql_query("SELECT valor FROM cache"); while($fila=mysql_fetch_row($registros)) { echo $fila[0]."<br>"; } desconectar(); } elseif($_GET["accion"]=="guardar") {

conectar(); $dato=mysql_real_escape_string($_GET["dato"]); mysql_query("INSERT INTO cache (valor) VALUES ('$dato')"); desconectar(); } ?>

{ mysql_close(); }

if($_GET["accion"]=="mostrar") {

El IE cuando realiza el envío de variables vía GET a una determinada página (que llamaremos receptor.php), revisa primero que anteriormente no haya enviado una petición que contenga exactamente los mismos valores; si hubo una petición igual, cargará de su “memoria” los datos que recibió en aquella ocasión como respuesta desde el servidor. Por el contrario, si no hubo peticiones iguales, recibirá los datos actuales enviados por el servidor y los cargará en su cache para futuros usos.

Por ejemplo, si hacemos una petición a receptor.php?var1=prueba&var2=ajax y el servidor nos devuelve “Hola”, cuando intentemos enviar nuevamente a receptor.php las variables ?var1=prueba&var2=ajax el IE en lugar de realizar una nueva petición al servidor, nos volverá a mostrar “Hola”, valor que ha cargado de su cache.

Al conjunto de variables que enviamos en el método open del objeto, le añadiremos una variable más que se generará aleatoriamente. Para lograr esto debemos modificar el método open de esta forma:

var aleatorio=Math.random(); ajax.open("GET", "ajax_cache_2.php?accion=mostrar&nocache="+aleatorio, true);

Nuestra función mostrarDatos() quedará de la siguiente manera:

function mostrarDatos() { var aleatorio=Math.random(); ajax=nuevoAjax(); ajax.open("GET", "ajax_cache_2.php?accion=mostrar&aleatorio="+aleatorio, true); ajax.onreadystatechange=function() { if (ajax.readyState==4) { document.getElementById("texto").innerHTML=ajax.responseText; } } ajax.send(null); }

Y para finalizar se puede utilizar el método POST en lugar de GET para enviar datos asincrónicamente. Al utilizar POST debemos añadir el envío de un header y utilizar el método send para enviar las variables. La función mostrarDatos() quedaría:

function mostrarDatos() { ajax=nuevoAjax(); ajax.open("POST", "ajax_cache_2.php", true); ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); ajax.send("accion=mostrar"); ajax.onreadystatechange=function() { if (ajax.readyState==4) { document.getElementById("texto").innerHTML=ajax.responseText; } } }

Y por supuesto, al recibir en ajax_cache_2.php los datos mediante POST en lugar de GET, debemos cambiar POST por GET donde corresponda, por lo que el código quedará:

<?php function conectar() { mysql_connect("localhost", "root", ""); mysql_select_db("ajax"); }

function desconectar() { mysql_close(); }

if($_POST["accion"]=="mostrar") { conectar(); $registros=mysql_query("SELECT valor FROM cache"); while($fila=mysql_fetch_row($registros)) { echo $fila[0]."<br>"; } desconectar(); } elseif($_GET["accion"]=="guardar") { conectar(); $dato=mysql_real_escape_string($_GET["dato"]); mysql_query("INSERT INTO cache (valor) VALUES ('$dato')"); desconectar(); } ?>}