Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. PHP
Code

Cómo usar AJAX en PHP y jQuery

by
Difficulty:BeginnerLength:MediumLanguages:

Spanish (Español) translation by Rene Soto (you can also view the original English article)

Hoy vamos a explorar el concepto de AJAX con PHP. La técnica AJAX lo ayuda a mejorar la interfaz de usuario de su aplicación y mejorar la experiencia general del usuario final.

¿Qué es AJAX?

AJAX significa JavaScript asíncrono y XML, y le permite recuperar contenido del servidor de fondo de forma asíncrona, sin una actualización de página. Por lo tanto, le permite actualizar el contenido de una página web sin volver a cargarla.

Veamos un ejemplo para comprender cómo podría usar AJAX en el desarrollo diario de su aplicación. Supongamos que desea crear una página que muestre la información de perfil de un usuario, con diferentes secciones como información personal, información social, notificaciones, mensajes, etc.

El enfoque habitual sería construir diferentes páginas web para cada sección. Así, por ejemplo, los usuarios harían clic en el enlace de información social para volver a cargar el navegador y mostrar una página con la información social. Sin embargo, esto hace que sea más lento navegar entre secciones, ya que el usuario tiene que esperar a que el navegador se vuelva a cargar y la página se vuelva a mostrar cada vez.

Por otro lado, también puede usar AJAX para crear una interfaz que cargue toda la información sin actualizar la página. En este caso, puede mostrar diferentes pestañas para todas las secciones, y al hacer clic en la pestaña, obtiene el contenido correspondiente del servidor de servicios de fondo y actualiza la página sin actualizar el navegador. Esto le ayuda a mejorar la experiencia general del usuario final.

La llamada general AJAX funciona de esta manera:

diagram of an AJAX call between client and server side

Vayamos rápidamente a través del flujo habitual de AJAX:

  1. Primero, el usuario abre una página web como de costumbre con una solicitud síncrona.
  2. A continuación, el usuario hace clic en un elemento DOM, generalmente un botón o enlace, que inicia una solicitud asíncrona al servidor de servicios de fondo. El usuario final no notará esto ya que la llamada se realiza de forma asíncrona y no actualiza el navegador. Sin embargo, puede detectar estas llamadas AJAX utilizando una herramienta como Firebug.
  3. En respuesta a la solicitud de AJAX, el servidor puede devolver datos de cadena XML, JSON o HTML.
  4. Los datos de respuesta se analizan utilizando JavaScript.
  5. Finalmente, los datos analizados se actualizan en el DOM de la página web.

Como puede ver, la página web se actualiza con datos en tiempo real del servidor sin necesidad de recargar el navegador.

En la siguiente sección, veremos cómo implementar AJAX usando JavaScript de vainilla.

Cómo funciona AJAX usando JavaScript Vainilla

En esta sección, veremos cómo funciona AJAX en JavaScript vainilla. Por supuesto, hay bibliotecas de JavaScript disponibles que facilitan la realización de llamadas AJAX, pero siempre es interesante saber qué está pasando debajo del capó.

Veamos el siguiente código de JavaScript de vainilla que realiza la llamada AJAX y obtiene una respuesta del servidor de forma asíncrona.

Revisemos el código anterior para entender lo que sucede detrás de la escena.

  1. Primero, inicializamos el objeto XMLHttpRequest, que es responsable de hacer llamadas AJAX.
  2. El objeto XMLHttpRequest tiene una propiedad readyState, y el valor de esa propiedad cambia durante el ciclo de vida de la solicitud. Puede contener uno de cuatro valores: OPENED, HEADERS_RECEIVED, LOADING y DONE.
  3. Podemos configurar una función de escucha para cambios de estado usando la propiedad onreadystatechange. Y eso es lo que hemos hecho en el ejemplo anterior: hemos utilizado una función que se llamará cada vez que se cambie la propiedad del estado.
  4. En esa función, hemos comprobado si el valor de readyState es 4, lo que significa que la solicitud se ha completado y hemos recibido una respuesta del servidor. A continuación, hemos comprobado si el código de estado es igual a 200, lo que significa que la solicitud fue exitosa. Finalmente, recuperamos la respuesta que está almacenada en la propiedad responseText del objeto XMLHttpRequest.
  5. Después de configurar la escucha, iniciamos la solicitud llamando al método abierto del objeto XMLHttpRequest. El valor de la propiedad readyState se establecerá en 1 después de esta llamada.
  6. Finalmente, hemos llamado al método de envío del objeto XMLHttpRequest, que en realidad envía la solicitud al servidor. El valor de la propiedad readyState se establecerá en 2 después de esta llamada.
  7. Cuando el servidor responda, eventualmente establecerá el valor readyState en 4, y debería ver un cuadro de alerta que muestra la respuesta del servidor.

Así es como AJAX funciona con JavaScript de vainilla. Por supuesto, fue un ejemplo muy simple para demostrar el concepto AJAX, y las cosas pueden complicarse mucho en una aplicación del mundo real, ya que es necesario manejar diferentes escenarios de éxito y fracaso. Por lo tanto, es una buena idea seleccionar una biblioteca de JavaScript que oculta las complejidades específicas del navegador bajo el capó.

En la siguiente sección, veremos cómo usar la biblioteca jQuery para realizar llamadas AJAX.

Cómo Funciona AJAX Usando la Biblioteca jQuery

En la sección anterior, analizamos cómo podría realizar llamadas AJAX utilizando JavaScript de vainilla. En esta sección, usaremos la biblioteca jQuery para demostrar esto. Asumiré que está al tanto de los conceptos básicos de la biblioteca jQuery.

La biblioteca jQuery proporciona algunos métodos diferentes para realizar llamadas AJAX, aunque aquí veremos el método ajax estándar, que es el más utilizado.

Echa un vistazo al siguiente ejemplo.

Como ya sabe, el signo $ se usa para referirse a un objeto jQuery.

El primer parámetro del método ajax es la URL que se llamará en segundo plano para recuperar el contenido del lado del servidor. El segundo parámetro está en formato JSON y le permite especificar valores para algunas opciones diferentes compatibles con el método ajax.

En la mayoría de los casos, deberá especificar las devoluciones de llamada de éxito y error. La devolución de llamada exitosa se realizará después de la finalización exitosa de la llamada AJAX. La respuesta devuelta por el servidor se transferirá a la devolución de llamada correcta. Por otro lado, la devolución de llamada de error se llamará si algo sale mal y hubo un problema al realizar la llamada AJAX.

Como puede ver, es fácil realizar operaciones AJAX utilizando la biblioteca jQuery. De hecho, el proceso es más o menos el mismo, independientemente de la biblioteca de JavaScript con la que elija realizar llamadas AJAX.

En la siguiente sección, veremos un ejemplo del mundo real para comprender cómo funciona todo esto con PHP.

Un ejemplo práctico de AJAX con PHP

En esta sección, crearemos un ejemplo que recupera el contenido JSON de un archivo PHP en el lado del servidor utilizando AJAX.

Para fines de demostración, crearemos un ejemplo que realice el inicio de sesión del usuario utilizando AJAX y jQuery. Para empezar, hagamos el archivo index.php, como se muestra en el siguiente fragmento de código que representa un formulario de inicio de sesión básico.

El archivo index.php es una forma bastante estándar de HTML que contiene los campos nombre de usuario y contraseña. También contiene un fragmento de JavaScript de jQuery, que sigue el esquema que vimos arriba.

Hemos utilizado el evento submit del elemento de formulario, que se desencadena cuando un usuario hace clic en el botón Enviar. En ese evento handler, hemos iniciado la llamada AJAX, que envía los datos del formulario en el archivo login.php usando el método POST asincrónicamente. Una vez que recibimos una respuesta desde el servidor, analiza con el método parse del objeto JSON. Y finalmente, basado en el éxito o fracaso, tomar la acción apropiada.

Vamos a ver qué login.php parece.

El archivo login.php contiene la lógica de autenticar a los usuarios y devuelve una respuesta JSON basada en el éxito o fracaso del inicio de sesión.

Conclusión

En este tutorial, discutimos los conceptos básicos de AJAX y cómo funciona en PHP. En la primera mitad del artículo, vimos cómo funciona AJAX en vanilla JS y en la biblioteca jQuery. En la segunda mitad, creamos un ejemplo del mundo real que demostró cómo se puede usar AJAX para obtener contenido PHP del lado del servidor.

Si tiene alguna duda o consulta, ¡no dude en expresar sus ideas utilizando el siguiente canal de información!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.