¿Qué es AJAX y cómo utilizarlo en WordPress?

El uso de AJAX con WordPress es una combinación común que los desarrolladores web suelen utilizar para crear contenidos web dinámicos e interactivos. Con AJAX, partes específicas de una página web pueden ser actualizadas sin refrescar toda la página. Los visitantes del sitio web no son conscientes de ello en el front-end.

En esencia, AJAX combina una serie de tecnologías, entre ellas JavaScript, XML responder cantando Objeto XMLHttpRequest. Estas tecnologías trabajan en tándem para enviar y recibir datos de forma asíncrona entre el navegador web y el servidor.

En este artículo, exploramos AJAX con más detalle, incluyendo cómo funciona y por qué es tan útil en WordPress. También se proporciona una guía paso a paso para enseñarle a implementar AJAX en su sitio web de WordPress para mejorar su funcionalidad.

Breve descripción de AJAX

AJAX son las siglas de Asynchronous JavaScript and XML (JavaScript y XML asíncronos) y es una tecnología que permite realizar peticiones asíncronas al servidor y cambios en la página sin recargarla.Un script AJAX solicita al servidor que devuelva algunos datos y luego utiliza los datos obtenidos para modificar la página.

Por ejemplo, supongamos que hay un menú desplegable que selecciona la fecha de la cita y otra lista desplegable que muestra dinámicamente las horas que se pueden reservar. Mediante un script AJAX, se solicita al servidor que proporcione la hora opcional reservable para actualizar la lista desplegable de elementos.

API AJAX vs REST

A menudo se comparan las API AJAX y REST, ya que ambas se utilizan en el desarrollo web para mejorar la experiencia del usuario. Veamos sus principales diferencias.

AJAX	API REST
Un conjunto de técnicas para ofrecer una experiencia web más rica	Un estilo arquitectónico para gestionar las peticiones HTTP
Actualización asíncrona de páginas	Centrado en los recursos
Se pueden enviar solicitudes RESTful	Se puede acceder a través de un cliente AJAX

¿Cómo funciona AJAX?

AJAX es un grupo de tecnologías de desarrollo web que permiten el intercambio asíncrono de datos entre un navegador web y un servidor. Permite actualizar dinámicamente las páginas web sin recargarlas por completo.

Desde un punto de vista técnico, AJAX se implementa combinando JavaScript, XML (aunque ahora se utilizan ampliamente otros formatos como JSON) y el objeto XMLHttpRequest. He aquí un flujo de trabajo típico:

1. activación de eventosEl usuario desencadena un evento, como hacer clic en un botón o enviar un formulario, que inicia una solicitud AJAX.

2. Objeto XMLHttpRequestJavaScript crea una instancia del objeto XMLHttpRequest que actúa como intermediario entre el navegador y el servidor.

3. solicitud asíncronaEl objeto XMLHttpRequest (paso 2) envía una petición asíncrona al servidor sin interferir ni impedir que el usuario interactúe con la página web.

4. comunicación con el servidorLa solicitud se envía al servidor, que la procesa y genera una respuesta.

5. Adquisición de datosEl servidor completa el procesamiento y devuelve los datos de respuesta al navegador.

6. actualización dinámica (Internet): Los navegadores utilizan JavaScript para manipular el Modelo de Objetos del Documento (DOM) con el fin de actualizar el contenido de una página web en función de una respuesta recibida, sin recargar toda la página.

Diagrama de flujo de solicitudes AJAX

AJAX permite actualizaciones en tiempo real, carga dinámica de contenidos, validación de formularios, etc., lo que mejora enormemente la experiencia del usuario.

Facilita un intercambio de datos más fluido, rápido y eficaz entre el navegador y el servidor al reducir la necesidad de recargar completamente la página, lo que permite interacciones web más fluidas.

¿Por qué es útil AJAX?

AJAX es útil en una gran variedad de situaciones. Echemos un vistazo a las más utilizadas para la edición.Guardar borradores automáticamente en WordPressFunción.

AJAX Auto Save WordPress Borradores
AJAX permite guardar 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 típicoAJAX: Al escribir una entrada de blog o crear una página, AJAX puede enviar periódicamente el contenido al servidor y guardarlo como borrador en segundo plano, eliminando la necesidad de guardar o recargar manualmente la página.

AJAX guarda automáticamente los borradores

Al utilizar la tecnología AJAX en el desarrollo de WordPress, los usuarios pueden crear páginas web más dinámicas, interactivas y con mayor capacidad de respuesta.

Uso de AJAX en WordPress

El propio WordPress soporta AJAX de forma nativa y se puede utilizar en el carpeta wp-adminVer "Archivo "admin-ajax.phpFue creado originalmente para todas las funciones que inician peticiones AJAX desde el backend de WordPress. Fue creado originalmente para todas las funciones que inician peticiones AJAX desde el backend de WordPress, y desde entonces también se ha utilizado en la parte front-end del sitio.

Todas las peticiones AJAX de WordPress deben ser gestionadas por scripts PHP. En otras palabras.admin-ajax.php Debe ser el fichero PHP a través del cual se llama a la operación que devuelve el contenido.

Ya en 2013, WordPress introdujo la API WordPress Heartbeat, que proporciona varias funciones importantes comoFunción de autoguardado, recordatorio de caducidad de inicio de sesión,así comoOtro usuario está escribiendo o editando una entrada de WordPressCuando lo hace, se emite un aviso de bloqueo de artículo.

Artículo Bloqueo

Cuando intentas editar un mensaje que está editando otro usuario, aparece una advertencia alertándote de la situación actual. Se le presentarán tres opciones de acción:Todos los artículosyavancespaz Artículo de adquisición.

Artículo de adquisición

Estas funciones son posibles gracias a la API Heartbeat de WordPress, que conecta el servidor y el navegador para garantizar una comunicación y una respuesta adecuadas.

La API Heartbeat de WordPress genera peticiones para comunicarse con el servidor y activa eventos cuando se reciben datos/respuestas. Esto suele aumentar la carga del servidor y puede llegar a ralentizar el backend de WordPress.

ejemplo típico

Me conecté a mi backend de WordPress y empecé a escribir un post. Luego, abrí varias pestañas para navegar por otros contenidos. A pesar de esto, el backend sigue conectado y se puede ver el admin-ajax.php Enviar continuamente peticiones al servidor.

Basado en el problema anterior, admin-ajax.php en WordPress genera una petición cada 15 segundos. La solicitud puede ser para cualquier comunicación con el servidor.

Las peticiones AJAX en WordPress son gestionadas por un sistema ubicado en el directorioen la carpeta wp-admin.admin-ajax.phpManejo de archivos. Es el archivo designado para el back-end y la funcionalidad AJAX de cara al usuario.

Para iniciar una solicitud AJAX, debe utilizar la funciónGETtal vezPOSTcontiene los parámetros de la operación en los datos de la solicitud.

Este parámetro de acción determina la acción que se llevará a cabo en elEl archivo admin-ajax.php tiene que sertrigLos ganchos específicos del

Estos ganchos se denominanwp_ajax_mi_acciónresponder cantandowp_ajax_nopriv_my_actionquemi_acción corresponde aEl valor del parámetro de acción en una solicitud GET o POST.

Veamos cómo utilizarlo en WordPress. Si eres nuevo en WordPress o no tienes conocimientos técnicos, puede ser difícil de entender. Es importante tener una buena comprensión de JavaScript (jQuery será suficiente), así como conocimientos de HTML, CSS y PHP.

• hacer uso dewp_enqueue_script()añade a la cola el archivo JavaScript responsable de gestionar la petición AJAX. Asegúrese de que se añade a la cola correctamente, por ejemplo, en el tema de lafunciones.phpo en un archivo de plugin personalizado.
• utilicewp_localize_script()función (matem.)Secuencias de comandos AJAX nativasEsto le permite pasar datos desde el código PHP al script para que sean accesibles en JavaScript. Esto le permite pasar datos desde el código PHP al script para que sean accesibles en JavaScript.
• Uso de WordPresswp_send_json()tal vezwp_send_json_success()responder cantandowp_send_json_error()envía los datos de respuesta de vuelta al cliente JavaScript. puede incluir los datos requeridos o mensajes de error en la respuesta.
• Puede utilizar eljQuery.ajax()Método o abreviaturajQuery.post()tal vezjQuery.get()envía la petición AJAX al servidor.

Estos ejemplos muestran cómo se puede utilizar AJAX en diferentes escenarios en WordPress para mejorar la interacción con el usuario, mejorar el rendimiento y proporcionar una experiencia de usuario fluida.

Análisis de las solicitudes de admin-ajax.php

Las solicitudes de plugins tienen como resultado que WordPress admin-ajax.php Hay muchos problemas con los archivos. Estos plugins pueden hacer que el backend de WordPress se ralentice al solicitar funciones específicas como ventanas emergentes o actualizaciones del recuento de acciones sociales. Sin embargo, no todas las peticiones hacen que el admin-ajax.php Sobrecarga de documentos.

Si la solicitud se gestiona correctamente y el desarrollador del plugin sigue las mejores prácticas para el uso de llamadas AJAX, la funciónadmin-ajax.php El archivo debería funcionar correctamente.

A continuación, echemos un vistazo a algunas de las comprobaciones que provocan la ralentización de los sitios web admin-ajax.php La mejor forma de solicitarlo.

1. Activar el modo de depuración

Colocando un enlace en el sitio web de wp-config.php Añada el siguiente código al archivo para activar el modo de depuración de WordPress:

Código phpCopydefine('WP_DEBUG', true);

2. Seguimiento de las solicitudes de red

Cargue su sitio en un navegador y vaya a Inspeccionar > Red. Pulse Ctrl + R y encontrar admin-ajax.php Archivo. En la lista Solicitudes de red, seleccione admin-ajax.php para ver sus detalles.

Anote el método de solicitud (GET o POST), los parámetros de la solicitud y el tiempo de respuesta. Compara los tiempos de respuesta de las distintas solicitudes e identifica las diferencias significativas.

3. Desactivación de plug-ins

Desactive los plugins uno a uno, empezando por los que tengan más probabilidades de estar asociados con el admin-ajax.php Plugins interactivos para empezar, como plugins de caché o de optimización.

Después de desactivar cada plugin, vuelva a cargar la página y supervise las solicitudes de red. Registre cualquier cambio en el tiempo de respuesta o en el tamaño de las peticiones.

4. Identificación de plug-ins problemáticos

Cuando note una mejora significativa en el tiempo de respuesta o admin-ajax.php Cuando se reduce el tamaño de la petición, se puede encontrar el plugin o la petición que está causando el problema.

Aceleración del backend 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 envíe peticiones al servidor cada pocos segundos.

Por lo tanto, es necesario instalar el plugin Breeze.

Inicie sesión en el backend de WordPress de su sitio web. Vaya a "Plugin". → "Añadir nuevo plugin" → Buscar "Brisa" → Instale y active el plugin.

Navegue hasta establecer → Breeze → API de latidos. Aquí verá cuatro opciones diferentes para configurar la API Heartbeat.

1. Control de latidosBotones de activación y desactivación de la API Heartbeat en el backend, el editor de entradas y el frontend.
2. Front-end HeartbeatEsta opción permite cambiar el comportamiento del front-end o desactivarlo completamente.
3. Editor de artículos HeartbeatEsta opción le permite cambiar el comportamiento del editor de entradas de WordPress o desactivarlo completamente.
4. Latidos entre bastidoresEsta opción puede cambiar el comportamiento del fondo o desactivarlo por completo.

En este caso, es necesario crear varias reglas:

Por defecto, la API Heartbeat de WordPress utiliza una frecuencia predeterminada, pero pueden crearse múltiples reglas según sea necesario.

Por ejemplo, desea que el backend de WordPress (panel de control) se active cada 2 minutos (120 segundos) y que el editor de entradas se active cada 3 minutos (180 segundos).

Por lo tanto, se deben crear dos reglas: una para el backend de WordPress y otra para el editor de entradas. Establezca su frecuencia de activación en 2 minutos y 3 minutos respectivamente.

Consideraciones sobre la seguridad de AJAX

Hay algunos aspectos de seguridad que requieren especial atención cuando se trabaja con AJAX. He aquí algunas consideraciones de seguridad importantes:

1. Las aplicaciones AJAX son vulnerables a los ataques de secuencia de comandos en sitios cruzados (XSS).Esto significa que sin una validación y codificación adecuadas, el código AJAX puede manipularse fácilmente. Como resultado, los atacantes pueden robar información fácilmente, manipular contenidos y realizar acciones maliciosas.
2. Las llamadas a funciones AJAX se envían al servidor en texto claroSin los protocolos adecuados, cualquiera puede extraer información sensible. Esto pone esencialmente la base de datos bajo el control de un atacante malintencionado.
3. AJAX puede no ser compatible con algunos navegadores de Internet.Los distintos navegadores pueden tratar las solicitudes AJAX de forma diferente, lo que puede provocar problemas de compatibilidad.

resúmenes

Ahora, hemos aprendido qué es AJAX y cómo puede mejorar la experiencia de usuario de las aplicaciones web actualizando y refrescando las pantallas 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 es posible crear sitios más dinámicos y responsivos que interactúan con el servidor sin recargar las páginas. Espero que este artículo te haya sido útil y te haya proporcionado información de utilidad.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres