Hace ya algunas semanas, publiqué un pequeño ejemplo de como realizar una Ventana de Diálogo con jQuery y jQuery UI esta ventana incluye 3 botones, dos de estos abren un sitio web y el tercero la cierra.

Ahora bien, para este nuevo post, vamos a establecer una ventana de diálogo que presente tres opciones:

  1. Fecha y hora del servidor
  2. Versión php del servidor
  3. Cerrar

El código completo se puede descargar desde github

Video Tutorial

Para poder obtener esta información desde el servidor vamos a tener que indicarle a nuestros botones que ejecuten un script php con las siguientes funciones: date() y phpversion() que llamaremos por medio de la función load() de jQuery.

Es importante mencionar que jQuery ofrece 6 formas de realizar llamadas asíncronas: jQuery.load(), jQuery.get(), jQuery.post(), jQuery.getJSON(), jQuery.getScript() y jQuery.ajax().

En condiciones normales iriamos a un link que ejecutara estas funciones y en ese script deberíamos crear un link para volver a cargar la ventana de diálogo, aquí es donde se pone interesante la situación, lo que vamos a hacer es llamar a este script de forma asíncrona o mejor conocida como AJAX , lo que nos permitirá mantener nuestra ventana visible sin necesidad de re cargar la página.

Aquí presento un ejemplo sencillo, pero realmente se puede cargar cualquier tipo de información, lo que debemos tomar en cuenta es que no siempre será necesario utilizar AJAX en nuestros sitios, más que nada si son o no presentan interacción con bases de datos.

Creación de la ventana de diálogo

Para hacer nuestro ejemplo más entendible y ver lo que realmente nos interesa, crearemos una ventana de diálogo que se abra automáticamente, primero que nada hay que descargar jquery y jquery ui o cual se explica en Ventana de Diálogo con jQuery y jQuery UI , posterior a esto escribiremos el siguiente código, he llamado al archivo principal dialogoAjax.html.

Creación de código PHP

Ahora crearemos un archivo php al cual dirigiremos las llamadas asíncronas, lo llamaremos ajaxPhp.php

Resultados

Una vez que tenemos los archivos creados abrimos el archivo indexAjax.html y se cargara la ventana de diálogo automáticamente, posterior a esto hagamos clic en cada uno de los botones y veamos el resultado.
Como podrán ver es un ejemplo sencillo pero muy ilustrativo, sería una buena práctica intentar desarrollarlo con las otras 5 posibilidades de hacer llamadas AJAX que ofrece jQuery.