Polar Geek » ajax http://www.polargeek.net Desarrollo web, tips, diseño, php, javascript... Thu, 29 Jul 2010 09:33:47 +0000 en hourly 1 http://wordpress.org/?v=3.0 Recibir varios datos por Ajax con Javascript http://www.polargeek.net/javascript-recibir-varios-datos-por-ajax-post/ http://www.polargeek.net/javascript-recibir-varios-datos-por-ajax-post/#comments Thu, 17 Dec 2009 23:01:48 +0000 José http://www.polargeek.net/?p=989 Introducción

Golden Gate
Cuando se trata de recibir varios datos tras hacer una petición Ajax, surge un problema, solo se puede recibir una cadena de texto, y ya está, esto se debe a la naturaleza de Ajax, pero a eso dedicaré otro post más adelante.

Con el método GET, existe una función (jQuery.getJSON), pero este método no es el más elegante a mi entender en muchos proyectos. (El artículo POST vs. GET está en proceso de fabricación…).

Así que necesitamos alguna manera de pasar X datos desde un script a una función javascript que nos ha hecho la petición Ajax.

JSON

Bueno amigos, JSON es nuestro aliado en este caso. JSON es simplemente una manera de juntar datos en forma de string, con un estándar, claro.

¿Y cuál es el punto fuerte de esto? Pues que al ser estándar en muchos lenguajes existen funciones que nos facilitan la vida (PHP, Javascript, Python, Perl…).

Veremos un ejemplo con PHP, aunque en realidad no importa el lenguaje, la idea se puede extrapolar con scripts de otros lenguajes siempre y cuando implementen funciones de JSON.

Caso práctico

En un script de PHP (prueba.php) tenemos el siguiente código:

1
2
3
4
5
6
7

<?php
 $array_datos = array( "direccion" => "Calle Inventada",
                       "ciudad" => "Hong Kong"
                     );
 $array_datos_json = json_encode($array_datos); //Lo codificamos en JSON
 echo $array_datos_json;
?>

Bien, tenemos la siguiente petición por Ajax, con el método POST al script anterior.

1
2
3
4
5

$.post("prueba.php", { "func": "conseguirDireccionCiudad" },
  function(data){
    alert(data.direccion); // Dato 1
    alert(data.ciudad); // Dato 2
  }, "json");

Como se puede ver se decodifica directamente con la función $.post(), que permite especificar el tipo de dato que vamos a obtener en el 4º parámetro.

Documentación

Jquery + Ajax | Jquery.com
JSON | Documentación oficial
JSON | Documentación útil

]]> http://www.polargeek.net/javascript-recibir-varios-datos-por-ajax-post/feed/ 3 [Ajax] Refrescar div cada cierto tiempo http://www.polargeek.net/ajax-refrescar-div-cada-cierto-tiempo/ http://www.polargeek.net/ajax-refrescar-div-cada-cierto-tiempo/#comments Mon, 14 Dec 2009 13:20:23 +0000 José http://www.polargeek.net/?p=974 Introducción

Si tenemos un dato que queremos actualizar cada cierto tiempo, ya puede estar en un div o cualquier otro contenedor, lo que debemos hacer es una petición ajax establecida en un intervalo que se repetirá siempre. Aplicaciones como Twitter o Gmail ya lo hacen.

En realidad hay múltiples formas de realizar esto, pero una forma fácil de hacerlo es utilizar un plugin de jquery.

Timers

Timers es el plugin en cuestión, y comprimido se queda en 1.54 KB, algo más que razonable. Tiene varias funciones, pero vamos a centrarnos en el uso para lo que queremos.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<script language="javascript" src="jquery.min.js"></script> //Incluimos Jquery
<script language="javascript" src="jquery.timers-1.0.0.js"></script> //Incluimos el plugin
 
<script type="text/javascript">
 
$(document).ready(function(){
   var j = jQuery.noConflict();
	j(document).ready(function()
	{
		j(".refreshMe").everyTime(10000,function(i){
			j.ajax({
			//Aquí se hara la petición (sin nada)
			  url: "refresh-me.php", 
			  cache: false,
			  success: function(html){
				//Aquí refrescamos el div
				j(".refreshMe").html(html);
			  }
			})
		})
	});
   j('.refreshMe').css({color:"red"});
});
</script>
<body>
<div class="refreshMe">Esto se va a refrescar cada 10 seg</div>
</body>

Primero de todo incluimos Jquery y el plugin en cuestión (más abajo tienes los links para todo), y después establecemos el tiempo con j(“.refreshMe”).everyTime, que indica que los elementos con los selectores “.refreshMe” van a ser actualizados. También aquí establecemos el tiempo que queremos(10 segundos).

En la petición no se manda ningún parámetro, por simplicidad, pero se podría hacer de igual forma.

Demo

En este enlace, puedes ver como funciona, simplemente se llama a la función rand de php, que genera un número “aleatorio” y se actualiza el valor en el html.

Enlaces

Plugin | Repositorio Jquery
Vía | That Agency

]]> http://www.polargeek.net/ajax-refrescar-div-cada-cierto-tiempo/feed/ 1