Ir al contenido principal

AJAX para novatos.

AJAX, acrónimo de Asynchronous JavaScript And XML nos permite comunicarnos desde el cliente con el servidor de manera asincrónica,  es decir, podemos ejecutar código, por ejemplo PHP, en segundo plano, sin tener que recargar la página.
Necesitamos el objeto 
XMLHttpRequest para poder hacer peticiones HTTP a nuestro servidor web.


Este es nuestro archivo index.html 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script>
  5. function loadXMLDoc()
  6. {
  7. var xmlhttp;
  8. if (window.XMLHttpRequest)
  9.   {// code for IE7+, Firefox, Chrome, Opera, Safari
  10.   xmlhttp=new XMLHttpRequest();
  11.   }
  12. else
  13.   {// code for IE6, IE5
  14.   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  15.   }
  16. xmlhttp.onreadystatechange=function()
  17.   {
  18.   if (xmlhttp.readyState==4 && xmlhttp.status==200)
  19.     {
  20.     document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  21.     }
  22.   }
  23. xmlhttp.open("GET","respuesta.php?data=HolaMundo",true);
  24. xmlhttp.send();
  25. }
  26. </script>
  27. </head>
  28. <body>

  30. <div id="myDiv"><h2>Let AJAX change this text</h2></div>
  31. <button type="button" onclick="loadXMLDoc()">Change Content</button>
  32. </body>
  33. </html>
De la linea 8 a la 15 se ocupa de iniciar el objeto HttpRequest y almacenarlo en la variable xmlhttp, dependiendo del navegador se hace de una manera o de otra.
En la linea 16 el evento onreadystatechange se pone a la escucha del estado del HttpRequest.
En la linea 18 verificamos el readyState y  status si los dos son correctos pasamos a  cambiar el innerHTML de myDiv con el contenido de la respuesta del servido como se ve en la linea 19.
En la linea 23 con el método open llamamos al servidor este caso mi página respuesta.php y le mandamos un parámetro GET llamado data con el texto 'HolaMundo'.
El método send de la linea 24 sirve para mandar la peticion, en este caso no tiene parametros porque usamos el metodo GET.
Solo nos queda crear el archivo respuesta.php.
  1. <?php
  2. echo $_GET['data'];
  3. ?>
Aquí simplemente escribimos el texto pasado por get ('HolaMundo'), que es el que se mostrara en miDIv al pulsar el boton.
Las posibilidades son muchas si quereis saber mas podeis entrar a http://www.w3schools.com/ajax/.


Entradas populares de este blog

Umask - qué es y para qué sirve (Linux)

Umask - Entendiendo la umask La umask o mascara de usuario es un comando que determina los permisos predeterminados para nuevos archivos. La umask es el valor que se sustrae de los permisos 666 en archivo, o 777 en directorios al crearlos. Por ejemplo si la umask es 022 los nuevos archivos tendran permisos 644 y los nuevos directorios 755. Al ser una operación a nivel de bite, bitwise , un valor 7 en la umask eliminará los permisos rwx en los directorios. pero en el caso de los archivos, cuyos permisos de partida serán rw- , es decir, 6, el resultado será ---, o sea, 0 y no -1.
Publicar un comentario
Leer Más »

Documentación jQuery ESP

Buenas!! ya sabéis que javascript es el lenguaje mas importante, por eso me he tomado la molestia de traducir la documentación de jQuery, también hay que decir que en practicas me han mandado hacer eso XD. Bueno pues si te interesa puedes descargarlo aquí o si quieres puedes entrar en librojquery  que es de donde e sacado los ejercicios. Un saludo.
Publicar un comentario
Leer Más »

Responsive Design con Media Querys

El Diseño Web Adaptable nos permite crear una web que se adapte a la resolución del dispositivo que la visita, es decir, que el diseño para movil, laptop y escritorio sea diferente. Las Media Querys  nos permiten cambiar el diseño de la web dependiendo del ancho de la pantalla, lo mejor es que solo hace falta saber algo de CSS. La idea es partiendo de un diseño base, ir cambiando solo lo necesario para adaptarlo al dispositivo. Tenemos CSS: #articulo, #panel{display:inline-block;widht:70%;} #panel{widht:30%;} Esto nos mostrara el #panel a la derecha de #articulo, ocupando todo el ancho de su elemento contenedor.  En los móviles el ancho es menor y puede que queramos que el artículo ocupe el 100% de la pantalla. Aquí es donde usamos la media query, seleccionamos el ancho en el que queremos cambiar el diseño, voy a usar 960px (Iphone). @media screen and (max-width:960px) {  #articulo   { widht:100%;   } } Le digo al navegador que cuando la
Leer Más »