Ajax
Descargar como PPT, PDF0 recomendaciones683 vistas
El documento describe cómo crear una aplicación Ajax simple que muestre datos almacenados en una base de datos. Incluye el código para crear la tabla de la base de datos, las funciones JavaScript para realizar peticiones asíncronas y el script PHP para recuperar y guardar datos. Explica cómo evitar que el navegador almacene en caché las respuestas mediante la adición de un parámetro aleatorio o el uso de peticiones POST.
![<?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") {](https://image.slidesharecdn.com/ajax-1213914255045613-9/85/Ajax-11-320.jpg)
![conectar(); $dato=mysql_real_escape_string($_GET["dato"]); mysql_query("INSERT INTO cache (valor) VALUES ('$dato')"); desconectar(); } ?> { mysql_close(); } if($_GET["accion"]=="mostrar") {](https://image.slidesharecdn.com/ajax-1213914255045613-9/85/Ajax-12-320.jpg)
![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(); } ?>}](https://image.slidesharecdn.com/ajax-1213914255045613-9/85/Ajax-20-320.jpg)
Ajax
- 1. PRINCIPIO Y DISEÑO DE APLICACIONES A REDES
- 3. 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
- 4. 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
- 5. 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');
- 6. 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
- 7. 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; }
- 8. 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); }
- 9. 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); }
- 10. 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
- 11. <?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") {
- 12. conectar(); $dato=mysql_real_escape_string($_GET["dato"]); mysql_query("INSERT INTO cache (valor) VALUES ('$dato')"); desconectar(); } ?> { mysql_close(); } if($_GET["accion"]=="mostrar") {
- 13. 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.
- 14. 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.
- 15. 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:
- 16. 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); }
- 17. 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:
- 18. 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; } } }
- 19. 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(); }
- 20. 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(); } ?>}