Videotutorial: Ajax en jQuery

  • Por
Vídeo sobre cómo realizar un script Ajax utilizando el framework Javascript jQuery. En este videotutorial mostraremos el proceso paso a paso al alcance para cualquier programador.
Este videotutorial está indicado para las personas que quieren dar sus primeros pasos con jQuery y desean ver cómo se hace una de las tareas más solicitadas dentro de la programación con este popular framework Javascript. Se trata de una conexión Ajax, realizada paso a paso, para que todas las personas puedan entenderla.

En el vídeo mostraremos cómo realizar la página web que hará la conexión Ajax, desde el principio, incluyendo el script del framework jQuery y luego programando el script de la llamada a Ajax. Además, por complicar un poco más el ejemplo, hemos implementado directamente un mensaje de carga, que se mostrará cuando se inicie la conexión y se ocultará una vez que haya terminado con éxito.

Este vídeo ilustra de manera entendible todo el proceso que ya habíamos explicado en anteriores artículos de DesarrolloWeb.com, concretamente dentro del Manual de jQuery que ponemos a disposición de los lectores del sitio. Los artículos que deberían leerse como complemento a este vídeo son Uso de Ajax muy sencillo con jQuery y el siguiente capítulo del manual llamado Ajax jQuery con mensaje de carga.

El proceso de realización de una solicitud Ajax en jQuery es extremadamente simple, puesto que con una única línea de código se implementa toda la llamada por Ajax e incluso el volcado de la respuesta en un elemento de la página. Sin embargo, se requieren diversas líneas de código adicionales para realizar cosas como la ejecución de código sólo cuando el navegador está listo para recibir acciones que modifiquen el DOM, la codificación de un evento para que se solicite la página por Ajax como respuesta a un clic del usuario que visita la página, etc. Además, el script, como decíamos, también realiza la tarea de mostrar un mensaje de carga mientras que la solicitud está pendiente, con lo que hay que agregar alguna línea de código adicional también por este motivo. Luego haremos un pequeño script PHP que tenga un retardo, para que la solicitud Ajax tarde un poco más en obtener respuesta y podamos llegar a ver el mensaje de carga.

Como se podrá ver en el videotutorial, esta tarea no tiene mucha dificultad, pero serán necesarios conocimientos de varios ámbitos para poder entenderla toda.

Por cierto, durante el vídeo trabajamos con un editor de texto para programadores llamado Komodo Edit, lo que puede resultar de interés para las personas que no conozcan este editor de código fuente gratuito. Komodo Edit tiene un previsualizador que nos permite ver en ejecución, durante las primeras pruebas, la página que vamos realizando. Aunque la parte en la que trabajamos con PHP la tenemos que ejecutar a través de un servidor web y luego ver en un navegador. Nosotros como servidor web utilizamos Wamp, que instala en un solo paso todo lo necesario para ejecutar páginas PHP.

El vídeo lo hemos publicado en YouTube y producido en menos de 10 minutos, por requerimientos de dicho sitio web. No obstante, creemos que ha quedado un videotutorial suficientemente claro y con las necesarias explicaciones para que todas las personas puedan entenderlo prestando suficiente atención.

Sin más, os dejamos con este vídeo que esperamos pueda servir de utilidad a todas las personas que quieren desarrollar sus páginas con Ajax y utilizar una de las herramientas más populares para facilitarnos la vida al programar páginas con scripts del lado del cliente.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Francisco Retamal Reinoso

18/1/2010
No funciona en explorer
Hola,
No sé programar ajax. Sé html,css y javascript. Me resultó muy interesante eso de que aparece un texto sin borrar lo que ya estaba en el documento y por eso leí un poco el manual de jquery...el hecho es que probé este ejemplo del videotutorial hasta la parte "$("#cargando").css("display","inline");", y la cuestión es que funciona correctamente en Firefox pero en Explorer no sucede nada.
¿se puede hacer en explorer?

fernando

15/1/2011
PROBLEMA
hola que tal, probe tu parte del codigo en una pagina que estoy desarrollando y funciona bien esa parte pero tengo un problema muestro una seccion del codigo y te explico:
....
<div id="menu_center">
<?php include "menu.php";?>
</div>
....
<div id='comprobar'>
<?php echo $_SESSION['seccion']; ?>
<div id="contenido">
</div>

y en menu.php tengo:


<ul id="nav">
<li><a href='' id='enlace'>Estatutos</a></li>
</ul>

la logica es la siguiente:
tengo un archivo x.php en el cual traigo el archivo menu.php mediante un include (que lo probe tambien con un require) al momento de hacer click en el menu que me muestra si me despliega el contenido como se requiere, pero tambien devuelvo un valor (digamos "a") mediante el POST como tu lo explicas, el problemas es que unicamente puedo hacer uso de ese valor en el archivo menu.php pero no en el principal (x.php) ya intente guardando el valor en sesion, en global etc, pero no me funciona no se si tengas una idea de como solucionarlo, es necesario que realice esto, te agradeceria tu ayuda.

canorioss

01/4/2014
Sencillo y bien explicado
Gracias!, este vídeo me a gustado, muy bueno para los que apenas queremos iniciar a utilizar ajax, en tan solo unos minutos ya se como puedo hacerle para poder extraer datos desde otro archivo.