[AJAX] Obtener Datos Asíncronamente
![[AJAX] Obtener Datos Asíncronamente](/content/images/size/w2000/2013/08/captura02.png)
Buenos días a todos, en este tutorial vamos a ver cómo obtener datos asincronamente en una web. En primer lugar, vamos a explicar que es esto de obtener datos asincronamente, para ello pongamos un ejemplo. Imaginemos que en una web necesitamos obtener cada X tiempo el número total de registros que tenemos en una tabla de nuestra base de datos. Con ayuda de AJAX vamos a obtener el número de registros en tiempo real sin tener que recargar la página manualmente. Pero... Qué es ajax? AJAX (Asynchronous JavaScript And XML), es una tecnología asíncrona, donde los datos se obtienen del servidor y se cargan en segundo plano sin interferir con la visualización ni el comportamiento de la página. Para ejecutar AJAX hacemos uso de JavaScript el cual, se encargará de gestionar los datos asíncronos obtenidos. AJAX hace uso de los objetos XMLHttpRequest, objeto disponible en los navegadores actuales. En cualquier caso, no es necesario que el contenido asíncrono esté formateado en XML. Una vez que hemos visto qué es y para que se usa AJAX vamos a ver un sencillo ejemplo de uso. Vamos a crear un archivo en php [time.php] que muestre en texto plano los datos de la fecha actual de nuestro servidor. <?php echo date("d-m-Y H:i:s"); ?>// <![CDATA[ google_ad_client = "ca-pub-6739991881181660"; /* Bloque entradas */ google_ad_slot = "5503460243"; google_ad_width = 468; google_ad_height = 60; // ]]>// <![CDATA[ // ]]> Seguidamente en nuestro archivo principal [ajax.php] vamos a crear una función en javascript que se ejecute cada X tiempo, el cual se encargará de obtener la fecha actual del archivo que hemos creado con anterioridad y actualizar el contenido de un div con el valor de la fecha actual. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript"> function getTimeAJAX() { //GUARDAMOS EN UNA VARIABLE EL RESULTADO DE LA CONSULTA AJAX var time = $.ajax({ url: 'time.php', //indicamos la ruta donde se genera la hora dataType: 'text',//indicamos que es de tipo texto plano async: false //ponemos el parámetro asyn a falso }).responseText; //actualizamos el div que nos mostrará la hora actual document.getElementById("myWatch").innerHTML = "La fecha que hemos obtenido de time.php vía AJAX es: "+time; } //con esta funcion llamamos a la función getTimeAJAX cada segundo para actualizar el div que mostrará la hora setInterval(getTimeAJAX,1000); </script> <html> <body> <div id='myWatch'></div> </body> </html> El código se encuentra completamente comentado, Este ejemplo es un poco “tonto” ya que si lo que queremos es obtener la fecha actual, hay vEl código se encuentra completamente comentado, Este ejemplo es un poco "tonto" ya que si lo que queremos es obtener la fecha actual, hay varios métodos mucho más sencillos que el implementado en este tutorial, pero la idea es que partiendo de este código podáis obtener todos los datos que necesitéis de manera síncrona. Para terminar, sólo decir que si tenéis alguna duda podéis escribir vuestras inquietudes en el mismo post, en nuestro foro o en nuestras redes sociales. Un saludo y no olvidéis de compartir este tutorial en vuestras redes sociales!!!