Usar AJAX con WordPress es una combinación que los desarrolladores web suelen utilizar para crear contenido dinámico e interactivo en las páginas web. Con AJAX, puedes actualizar partes específicas de la página web sin refrescar toda la página. Esto se traduce en una experiencia de usuario fluida para los visitantes de tu sitio web.
En esencia, AJAX combina varias tecnologías, como JavaScript, XML y el objeto XMLHttpRequest. Estas tecnologías trabajan juntas para enviar y recibir datos entre el navegador web y el servidor de forma asíncrona.
En esta entrada del blog, exploraremos AJAX con más detalle, incluyendo cómo funciona y por qué es tan útil en WordPress. También proporcionaremos instrucciones paso a paso sobre cómo implementar AJAX en tu sitio web WordPress para mejorar la funcionalidad de tu sitio.
Experimenta un alojamiento WordPress superior y sin complicaciones con Autonomous
Gestiona tu sitio WordPress con facilidad en Cloudways Autonomous. Consigue un alojamiento rápido y seguro que se adapta a tu tráfico, todo ello sin quebraderos de cabeza.
Breve descripción de AJAX
AJAX son las siglas de Asynchronous JavaScript And XML (JavaScript y XML asíncronos), una tecnología que te permite solicitar al servidor de forma asíncrona y realizar cambios en tus páginas sin recargarlas. El script AJAX solicita al servidor que devuelva algunos datos y luego modifica las páginas web con los datos obtenidos.
Por ejemplo, imagina un menú desplegable donde seleccionas la fecha de tu cita y otra lista desplegable que te muestra dinámicamente las horas disponibles para reservar. Mediante un script AJAX, se ha solicitado al servidor las horas disponibles para seleccionar el desplegable de tratamiento.
AJAX vs API REST
AJAX y la API REST se comparan a menudo porque se utilizan en el desarrollo web para mejorar la experiencia del usuario. Veamos sus principales diferencias
| AJAX | API REST |
| Un conjunto de tecnologías para una experiencia web más rica | Un estilo de arquitectura para gestionar las peticiones HTTP |
| Actualiza la pantalla de forma asíncrona | Gira en torno al uso de recursos |
| Puede enviar peticiones RESTful | Puede acceder un cliente AJAX |
¿Cómo funciona AJAX?
AJAX es un conjunto de técnicas de desarrollo web que permite el intercambio asíncrono de datos entre un navegador web y un servidor web. Permite que las páginas web se actualicen dinámicamente sin necesidad de recargar toda la página.
Técnicamente, AJAX funciona aprovechando una combinación de JavaScript, XML (aunque hoy en día también se utilizan otros formatos como JSON ) y el objeto XMLHttpRequest. Así es como suele funcionar
- Activador de eventos: Un evento, como el clic de un botón o el envío de un formulario, desencadena una petición AJAX.
- Objeto XMLHttpRequest: JavaScript crea una instancia del objeto XMLHttpRequest, que es el intermediario entre el navegador y el servidor.
- Petición asíncrona: El objeto XMLHttpRequest (paso 2) envía una petición asíncrona al servidor sin interrumpir ni bloquear la interacción del usuario con la página web.
- Comunicación con el servidor: La solicitud se envía al servidor, que la procesa y genera una respuesta.
- Recuperación de datos: Una vez que el servidor completa su procesamiento, envía la respuesta al navegador.
- Actualización dinámica: Mediante JavaScript, el navegador manipula el Modelo de Objetos del Documento (DOM) para actualizar el contenido de la página web basándose en la respuesta recibida sin recargar toda la página.
Empleando AJAX, los desarrolladores web pueden crear aplicaciones web más interactivas y receptivas. AJAX permite actualizaciones en tiempo real, carga dinámica de contenidos, validación de formularios, etc., mejorando la experiencia general del usuario.
Facilita interacciones web más fluidas, rápidas y eficientes, reduciendo la necesidad de recargar toda la página y permitiendo un intercambio de datos sin fisuras entre el navegador y el servidor.
Alojamiento WordPress Gestionado Desde $11/Mes
Experimenta un alojamiento en la nube fiable en el que confían los desarrolladores para obtener un aumento del rendimiento y la velocidad.
¿Por qué es útil AJAX?
AJAX es útil en varias situaciones. Exploremos algunas de ellas a continuación:
Caso práctico nº 1
AJAX permite a los usuarios de WordPress cargar contenido dinámicamente sin actualizar toda la página, lo que también se denomina Carga dinámica de contenidos.
Ejemplo: imagina que tienes un blog con un botón “Cargar más” al final de la página. Utilizando AJAX, puedes obtener entradas adicionales del blog desde el servidor y añadirlas al contenido existente cuando el usuario pulse el botón.
Caso práctico nº 2
AJAX permite actualizaciones en tiempo real en los sitios web de WordPress. Un ejemplo es la opción de chat en directo que se ve a menudo en los sitios web de WordPress.
Ejemplo: Considera una función de chat en directo en la que los usuarios pueden enviar y recibir mensajes al instante. Con AJAX, los mensajes pueden enviarse al servidor y mostrarse en la interfaz del chat en tiempo real sin recargar toda la página.
Caso práctico nº 3
AJAX mejora el envío y la validación de formularios en WordPress. Esto permite informar instantáneamente a los usuarios si han cometido errores sin recargar la página. Proporciona una experiencia de envío de formularios más fluida y eficiente.
Ejemplo: Supón que tienes un formulario de contacto o de generación de contactos en tu sitio web. Utilizando AJAX, puedes validar las entradas del formulario en el lado del cliente antes de enviar los datos al servidor.
Caso práctico nº 4
AJAX guarda automáticamente los borradores en WordPress. Esto ayuda a evitar la pérdida de datos y proporciona una experiencia de escritura fluida a los usuarios de WordPress.
Ejemplo: Al escribir una entrada de blog o crear una página, AJAX puede enviar periódicamente el contenido al servidor en segundo plano, guardándolo como borrador sin necesidad de guardarlo manualmente ni de recargar la página.
Los usuarios pueden crear sitios web más dinámicos, interactivos y receptivos aprovechando las técnicas AJAX en el desarrollo de WordPress.
Usar AJAX en WordPress
WordPress soporta AJAX de forma nativa. Puedes ver “admin-ajax.php” dentro de la carpeta wp-admin. Se creó inicialmente para todas las funciones que realizan peticiones AJAX desde el admin de WordPress. También se utiliza para la parte pública de la web.
Todas las peticiones AJAX de WordPress deben pasar por un script PHP. En otras palabras, admin-ajax.php debe ser el archivo PHP a través del cual se llame a una acción que devuelva contenido.
Ya en 2013, WordPress introdujo la API WordPress Heartbeat, que proporcionaba varias funcionalidades importantes, como la función de autoguardado, la caducidad del inicio de sesión y el aviso de bloqueo de la entrada mientras otro usuario está escribiendo o editando una entrada de WordPress.
Esclusa de correos
Cuando intentes editar una entrada en la que ya trabaja otro usuario, aparecerá un aviso emergente sobre la situación. Hay tres acciones visibles para ti. Todas las Entradas, Vista Previa y Tomar el Control.
Las funciones mencionadas son posibles gracias a la API Heartbeat de WordPress, que conecta el servidor y el navegador para una comunicación y respuestas adecuadas.
La API Heartbeat de WordPress genera peticiones para comunicarse con el servidor y activa eventos al recibir datos/respuesta. Esto suele aumentar la carga del servidor y, a la larga, ralentiza la administración de WordPress.
Ejemplo
Me conecto a mi panel de WordPress y empiezo a redactar una entrada. A continuación, abro la pestaña durante varios minutos y navego por otras pestañas. El salpicadero sigue conectado, y puedes ver que admin-ajax está enviando peticiones continuamente.
Según el ticket mencionado anteriormente, admin-ajax.php en WordPress genera peticiones cada 15 segundos. La solicitud puede ser cualquier comunicación con el servidor.
Las peticiones AJAX en WordPress se gestionan mediante el archivo admin-ajax.php situado en la carpeta wp-admin. Es el archivo designado para las funcionalidades AJAX tanto de back-end como de cara al usuario.
Para iniciar una petición AJAX, es necesario incluir un parámetro de acción con los datos de la petición utilizando el método GET o POST.
Este parámetro de acción determina el gancho específico que se activará en el archivo admin-ajax.php.
Los ganchos se denominan wp_ajax_mi_acción y wp_ajax_nopriv_mi_acción, donde mi_acción corresponde al valor del parámetro de acción en la petición GET o POST.
Veamos cómo podemos utilizarlo en WordPress. Si eres nuevo en WordPress o no tienes conocimientos técnicos, esto puede resultarte difícil de entender. Es importante tener un buen conocimiento de JavaScript (jQuery es suficiente) y conocimientos de HTML, CSS y PHP.
- Utiliza la función wp_enqueue_script() para poner en cola el archivo JavaScript responsable de gestionar las peticiones AJAX. Asegúrate de ponerlo en cola adecuadamente, por ejemplo, en el archivo functions.php de tu tema o en un archivo de plugin personalizado.
- Utiliza la función wp_localize_script() para localizar el script AJAX. Esto te permite pasar datos de tu código PHP al script, haciéndolo accesible en JavaScript.
- Utiliza las funciones de WordPress wp_send_json() o wp_send_json_success() y wp_send_json_error() para enviar los datos de respuesta al JavaScript del lado del cliente. Puedes incluir los datos deseados o un mensaje de error en la respuesta.
- Puedes utilizar el método jQuery.ajax() o los métodos abreviados jQuery.post() o jQuery.get() para enviar la solicitud AJAX al servidor.
Estos ejemplos demuestran cómo se puede utilizar AJAX en diferentes escenarios dentro de WordPress para mejorar las interacciones de los usuarios, mejorar el rendimiento y proporcionar una experiencia de usuario fluida.
Analizar solicitudes en admin-ajax.php
Las peticiones de los plugins causan muchos problemas con admin-ajax.php en WordPress. Estos plugins pueden ralentizar el admin de WordPress al solicitar funcionalidades específicas como ventanas emergentes o actualizaciones del contador de compartición social. Sin embargo, no todas las peticiones sobrecargarán el archivo admin-ajax.php.
Si las peticiones se gestionan correctamente, y los desarrolladores de plugins siguen las mejores prácticas para utilizar llamadas AJAX en sus plugins, el archivo admin-ajax.php funcionará bien.
Ahora, vamos a explorar algunas de las mejores formas de comprobar las peticiones en admin-ajax.php que están ralentizando el sitio.
1. Activar depuración
Activa el modo de depuración de WordPress añadiendo la siguiente línea al archivo wp-config.php de tu sitio:
define('WP_DEBUG', true);
2. Supervisar las peticiones de la red
Carga tu sitio en el navegador y ve a inspeccionar > Red. Pulsa Ctrl + R y localiza el archivo admin-ajax.php. Selecciona la solicitud admin-ajax.php en la lista de red para ver sus detalles.
Presta atención al método de solicitud (GET o POST), a los parámetros de la solicitud y al tiempo de respuesta. Compara los tiempos de respuesta de distintas solicitudes para detectar diferencias importantes.
3. Desactivar Plugins
Empieza a desactivar los plugins uno a uno, empezando por los que tienen más probabilidades de interactuar con admin-ajax.php, como los plugins de caché o de optimización.
Después de desactivar cada plugin, vuelve a cargar la página y controla las peticiones de red. Observa cualquier cambio en el tiempo o tamaño de respuesta.
4. Identifica al culpable
Cuando notes una mejora significativa del tiempo de respuesta o una reducción del tamaño de las peticiones admin-ajax.php tras desactivar un determinado plugin, puede que hayas identificado al culpable.
Vuelve a activar los demás plugins y comprueba si el problema se repite al activar el plugin sospechoso.
Acelerar el panel de WordPress
Para acelerar el backend de WordPress, la mejor práctica es desactivar la API Heartbeat o, al menos, establecer un intervalo de tiempo más largo para que no llegue al servidor cada pocos segundos.
Para ello, necesitas instalar el plugin Breeze. Si eres cliente de Cloudways, no necesitas instalar el plugin, ya que Cloudways Breeze viene preinstalado con las aplicaciones de WordPress. También puedes utilizarlo con Autonomous.
Accede a tu panel de administración de WordPress. Ve a Plugins → Añadir nuevo → busca Breeze → Instálalo y actívalo.
Navega hasta Configuración → Breeze → API del latido. Allí encontrarás 4 opciones diferentes para configurar el Heartbeat.
- Controlar Heartbeat: Puedes activar o desactivar Heartbeat API para tu Backend, Post Editor y Frontend.
- Frontend Heartbeat: te permitirá cambiar el comportamiento de tu Front-end o desactivarlo por completo.
- Heartbeat Post Editor: te permitirá cambiar el comportamiento de tu WP Post Editor o desactivarlo por completo.
- Heartbeat Backend: te permitirá cambiar el comportamiento de tu Backend o desactivarlo por completo.
Aquí tienes que crear varias reglas:
Por defecto, obtienes la frecuencia predeterminada de la API Heartbeat de WordPress, pero puedes crear varias reglas en función de tus necesidades.
Por ejemplo, puedes querer que el Backend de WordPress (Dashboard) se active en 2 minutos (120 segundos), pero que el Post Editor se active en 3 minutos (180 segundos).
Para ello, debes crear dos reglas: una para el Panel de Control de WordPress y otra para el Editor de Entradas. Establece sus frecuencias en 2 y 3 minutos, respectivamente.
Consideraciones sobre la seguridad de AJAX
Hay ciertas consideraciones de seguridad que debes tener en cuenta cuando utilices AJAX. Aquí tienes algunas:
- Las aplicaciones AJAX son vulnerables al Cross-site Scripting (XSS). Esto significa que es fácil manipular los códigos AJAX sin las validaciones y la codificación adecuadas. Como resultado, resulta fácil robar información, jugar con el contenido y realizar acciones maliciosas.
- Las llamadas a funciones AJAX van al servidor en texto plano. Sin un protocolo adecuado, cualquiera puede extraer información sensible. Esto básicamente deja tu base de datos a merced de actores maliciosos.
- AJAX puede ser incompatible con algunos navegadores de Internet.
Resumen
Llegados a este punto, has aprendido qué es AJAX y cómo puede mejorar la experiencia de usuario de las aplicaciones web actualizando y refrescando la pantalla de forma asíncrona. También hemos visto cómo utilizar AJAX en WordPress, tanto en el front-end como en el back-end.
Con WordPress AJAX, puedes crear sitios web más dinámicos y receptivos que pueden interactuar con el servidor sin recargar la página. Espero que esta entrada del blog te haya resultado útil e informativa, y te animo a que pruebes AJAX en tus sitios web WordPress.
Q. ¿Podemos utilizar AJAX en WordPress?
A. Sí, AJAX puede utilizarse en WordPress para crear funciones dinámicas e interactivas sin recargar la página. WordPress proporciona soporte integrado para AJAX a través de admin-ajax.php, que facilita la comunicación entre el front-end y el back-end. Se suele utilizar para tareas como el envío de formularios, las actualizaciones en tiempo real y la carga dinámica de contenidos.
Q. ¿Por qué no se ha definido ajaxurl en WordPress?
A. La variable ajaxurl no se define automáticamente en el front-end de WordPress porque se utiliza principalmente en el panel de administración. Para definirla en el front-end, necesitas localizar tu archivo JavaScript utilizando la función wp_localize_script(), pasando la URL AJAX dinámicamente.
He aquí un ejemplo:
wp_localize_script('my-script', 'ajax_object', array('ajax_url' => admin_url('admin-ajax.php')));
Q. ¿Los sitios web siguen utilizando AJAX?
A. Sí, los sitios web siguen utilizando AJAX, aunque las nuevas tecnologías como Fetch API y WebSockets se han convertido en alternativas populares. AJAX se utiliza habitualmente para tareas como la actualización de datos en tiempo real, el desplazamiento infinito y el envío dinámico de formularios.
Danish Naseer
Danish Naseer es Community Manager de WordPress en Cloudways. Le apasiona diseñar, desarrollar e interactuar con las personas para ayudarlas. También participa activamente en la comunidad para compartir sus conocimientos. Además, le encanta ver documentales, viajar y pasar tiempo con su familia. Puedes contactarlo en [email protected]
