Hola a todos, vuelvo a ustedes después de mucho tiempo sin escribir, la verdad descuidé tanto estos post que no renové el dominio de mi blog y lo perdí. Bueno pero no es excusa para seguir con estos pequeños pero sustanciosos tutos, espero lo disfruten.
Hoy vamos a tratar algo que alguna vez en nuestra vida como programador web nos va a tocar, el famosísimo AJAX , pero tranquilo, no es nada del otro mundo, hace parte de una de las características que ofrece la librería de jQuery .
Usaremos PHP, jQuery (AJAX), y html 5 barato, para mostrarles lo sencillo que puede ser enviar una petición POST al servidor y trabajar con el resultado sin necesidad de hacer la recarga de la página, sino de una manera que sea más agradable y que no haga que nuestra página halla sido hecha por un retrasado mental.
Oh, lo olvidaba, al final daré el link para que puedas descargar el proyecto, sino ¡¿qué clase máquina sería yo?!.
Iniciamos con el archivo index.php:
Este contiene nuestro formulario con el que queremos capturar el nombre del usuario y su edad (Que ingenioso), para después imprimirlo, el contenido de este es el siguiente:
ADVERTENCIA: Mi nivel de paint es muy bajo, no se burlen plox.
Esto con un poco de CSS se verá así en nuestro navegador:
Como ven no es la gran cosa, sólo un formulario que pide el nombre y la edad.... pero lo interesante es lograr que no suceda el post back . Pero antes veamos el contenido del archivo controlador.php, que es que obtiene los datos enviados desde el fomulario y responde la petición:
Como notamos, una vez que obtenemos el nombre y la edad, lo concatenamos a una cadena y devolvemos la misma, veamos esto sin usar AJAX:
ASCO, pero calma, ya le daremos solución observa el contenido de el javascript que vamos a incluir a nuestra página;
La mágia ocurre aquí, donde configuramos nuestro objeto AJAX y básicamente hacemos lo que está comentado:
$.ajax({
url : formulario.attr( "action" ), // Dirección a la que enviamos la info.
data : datosEnviar,
method : "post", // El tipo de petición (get o post)
success : function (datosRecibidos)
{
// Si la petición se hizo de forma correcta mostramos la info.
formulario.find( ".mensaje" ).html(datosRecibidos);
},
error : function (err)
{
// En caso de error mostramos una alerta.
alert("Un error: " + err.responseText);
}
});
Este objeto se puede configurar de muchas formas, de acuerdo a tu necesidad, visita la documentación para más información, en este cortísimo tutorial es algo muy simple, pero te prometo que haremos otros ejercicios complejos, incluso si queires proponer hazlo desde los comentarios.
En nuestro archivo index.php añadimos estas dos líneas:
<script src="jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="mi_js.js" type="text/javascript"></script>
La primera contiene la librería jQuery que es necesaria para usar AJAX, de lo contrario nos veremos muy frustrados intentando hacer esto con peticiones XMLHttpRequest , estos amigos, nos ahorraron mucho tiempo.
Ahora veamos esto con la mágia de AJAX:
UFFF mejoró mucho ¿no?, bueno no es tan impactante, pero en otras ocasiones si sentirás una diferencia enorme, en cuanto a la experiencia del usuario.
Aquí el link para que lo descargues lince. ;D
Bueno eso es todo por hoy, espero les haya gustado, ¡saludos!.
Hoy vamos a tratar algo que alguna vez en nuestra vida como programador web nos va a tocar, el famosísimo AJAX , pero tranquilo, no es nada del otro mundo, hace parte de una de las características que ofrece la librería de jQuery .
Usaremos PHP, jQuery (AJAX), y html 5 barato, para mostrarles lo sencillo que puede ser enviar una petición POST al servidor y trabajar con el resultado sin necesidad de hacer la recarga de la página, sino de una manera que sea más agradable y que no haga que nuestra página halla sido hecha por un retrasado mental.
Oh, lo olvidaba, al final daré el link para que puedas descargar el proyecto, sino ¡¿qué clase máquina sería yo?!.
Iniciamos con el archivo index.php:
Este contiene nuestro formulario con el que queremos capturar el nombre del usuario y su edad (Que ingenioso), para después imprimirlo, el contenido de este es el siguiente:
ADVERTENCIA: Mi nivel de paint es muy bajo, no se burlen plox.
Esto con un poco de CSS se verá así en nuestro navegador:
Como ven no es la gran cosa, sólo un formulario que pide el nombre y la edad.... pero lo interesante es lograr que no suceda el post back . Pero antes veamos el contenido del archivo controlador.php, que es que obtiene los datos enviados desde el fomulario y responde la petición:
Como notamos, una vez que obtenemos el nombre y la edad, lo concatenamos a una cadena y devolvemos la misma, veamos esto sin usar AJAX:
ASCO, pero calma, ya le daremos solución observa el contenido de el javascript que vamos a incluir a nuestra página;
La mágia ocurre aquí, donde configuramos nuestro objeto AJAX y básicamente hacemos lo que está comentado:
$.ajax({
url : formulario.attr( "action" ), // Dirección a la que enviamos la info.
data : datosEnviar,
method : "post", // El tipo de petición (get o post)
success : function (datosRecibidos)
{
// Si la petición se hizo de forma correcta mostramos la info.
formulario.find( ".mensaje" ).html(datosRecibidos);
},
error : function (err)
{
// En caso de error mostramos una alerta.
alert("Un error: " + err.responseText);
}
});
Este objeto se puede configurar de muchas formas, de acuerdo a tu necesidad, visita la documentación para más información, en este cortísimo tutorial es algo muy simple, pero te prometo que haremos otros ejercicios complejos, incluso si queires proponer hazlo desde los comentarios.
En nuestro archivo index.php añadimos estas dos líneas:
<script src="jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="mi_js.js" type="text/javascript"></script>
La primera contiene la librería jQuery que es necesaria para usar AJAX, de lo contrario nos veremos muy frustrados intentando hacer esto con peticiones XMLHttpRequest , estos amigos, nos ahorraron mucho tiempo.
Ahora veamos esto con la mágia de AJAX:
UFFF mejoró mucho ¿no?, bueno no es tan impactante, pero en otras ocasiones si sentirás una diferencia enorme, en cuanto a la experiencia del usuario.
Aquí el link para que lo descargues lince. ;D
Bueno eso es todo por hoy, espero les haya gustado, ¡saludos!.