A utilização de AJAX com o WordPress é uma combinação que os programadores Web utilizam frequentemente para criar conteúdo dinâmico e interativo nas páginas Web. Com o AJAX, podes atualizar partes específicas da página Web sem atualizar a página inteira. Isto resulta numa experiência de utilizador perfeita para os visitantes do teu site.
Na sua essência, o AJAX combina várias tecnologias, incluindo JavaScript, XML e o objeto XMLHttpRequest. Estas tecnologias trabalham em conjunto para enviar e receber dados entre o navegador Web e o servidor de forma assíncrona.
Nesta postagem do blog, exploraremos o AJAX em mais detalhes, incluindo como ele funciona e por que é tão útil no WordPress. Também forneceremos instruções passo a passo sobre como implementar o AJAX no teu site WordPress para melhorar a funcionalidade do teu site.
Experimenta o Alojamento WordPress de qualidade superior e prático com a Autonomous
Gerencie seu site WordPress com facilidade no Cloudways Autonomous. Obtenha uma hospedagem rápida e segura que se adapta ao seu tráfego – tudo sem nenhuma dor de cabeça de configuração.
Breve descrição geral do AJAX
AJAX significa Asynchronous JavaScript And XML – uma tecnologia que te permite solicitar o servidor de forma assíncrona e fazer alterações nas tuas páginas sem as recarregar. O script AJAX pede ao servidor que devolva alguns dados e depois modifica as páginas Web com os dados obtidos.
Por exemplo, imagina um menu pendente onde seleccionas a data da tua marcação e outra lista pendente que te mostra dinamicamente as horas disponíveis para reservar. Através de um script AJAX, foi pedido ao servidor as horas disponíveis para selecionar o menu pendente de tratamento.
API AJAX vs REST
O AJAX e a API REST são frequentemente comparados porque são utilizados no desenvolvimento Web para melhorar a experiência do utilizador. Vamos ver as suas principais diferenças!
| AJAX | API REST |
| Um conjunto de tecnologias para uma experiência web mais rica | Um estilo de arquitetura para tratar pedidos HTTP |
| Actualiza o ecrã de forma assíncrona | Gira em torno da utilização de recursos |
| Pode enviar pedidos RESTful | Pode ser acedido por um cliente AJAX |
Como funciona o AJAX?
AJAX é um conjunto de técnicas de desenvolvimento Web que permite a troca assíncrona de dados entre um navegador Web e um servidor Web. Permite que as páginas Web sejam actualizadas dinamicamente sem que seja necessário recarregar toda a página.
Tecnicamente, o AJAX funciona utilizando uma combinação de JavaScript, XML (embora hoje em dia também sejam utilizados outros formatos como JSON ) e o objeto XMLHttpRequest. Eis como funciona normalmente:
- Acionador de evento: Um evento, como um clique num botão ou o envio de um formulário, desencadeia um pedido AJAX.
- Objeto XMLHttpRequest: O JavaScript cria uma instância do objeto XMLHttpRequest, que é o intermediário entre o browser e o servidor.
- Pedido assíncrono: O objeto XMLHttpRequest (passo 2) envia um pedido assíncrono ao servidor sem interromper ou bloquear a interação do utilizador com a página Web.
- Comunicação com o servidor: O pedido é enviado para o servidor, que o processa e gera uma resposta.
- Recuperação de dados: Depois de o servidor concluir o processamento, envia a resposta de volta para o navegador.
- Atualização dinâmica: Utilizando JavaScript, o browser manipula o Modelo de Objeto de Documento (DOM) para atualizar o conteúdo da página Web com base na resposta recebida sem recarregar a página inteira.
Ao utilizar o AJAX, os programadores Web podem criar aplicações Web mais interactivas e com maior capacidade de resposta. O AJAX permite actualizações em tempo real, carregamento dinâmico de conteúdos, validação de formulários, etc., melhorando a experiência geral do utilizador.
Facilita interações Web mais suaves, mais rápidas e mais eficientes, reduzindo a necessidade de recarregamento de páginas completas e permitindo uma troca de dados sem descontinuidades entre o browser e o servidor.
Alojamento gerido para WordPress a partir de 11$/mês
Experimenta o alojamento em nuvem fiável em que os programadores confiam para obter aumentos de desempenho e velocidade.
Porque é que o AJAX é útil?
O AJAX é útil em várias situações. Explora algumas delas abaixo:
Caso de utilização #1
O AJAX permite que os utilizadores do WordPress carreguem conteúdo dinamicamente sem atualizar a página inteira, o que também se chama Carregamento de conteúdo dinâmico.
Exemplo: imagina que tens um blogue com um botão “Carregar mais” no fim da página. Utilizando AJAX, podes ir buscar publicações adicionais do blogue ao servidor e juntá-las ao conteúdo existente quando o utilizador clica no botão.
Caso de utilização #2
O AJAX permite actualizações em tempo real em sítios Web WordPress. Um exemplo é uma opção de chat ao vivo que vês frequentemente em sítios Web WordPress.
Exemplo: Considera uma funcionalidade de chat em direto em que os utilizadores podem enviar e receber mensagens instantaneamente. Com AJAX, as mensagens podem ser enviadas para o servidor e apresentadas na interface de chat em tempo real, sem recarregar a página inteira.
Caso de utilização #3
O AJAX melhora o envio e a validação de formulários no WordPress. Isto permite um feedback instantâneo aos utilizadores se cometeram erros sem recarregar a página. Proporciona uma experiência de envio de formulários mais suave e eficiente.
Exemplo: Suponha que tem um formulário de contacto ou de geração de leads no seu sítio Web. Utilizando AJAX, podes validar as entradas do formulário no lado do cliente antes de enviar os dados para o servidor.
Caso de utilização #4
O AJAX guarda automaticamente os rascunhos no WordPress. Isto ajuda a evitar a perda de dados e proporciona uma experiência de escrita perfeita para os utilizadores do WordPress.
Exemplo: Quando escreves um post de blogue ou crias uma página, o AJAX pode enviar periodicamente o conteúdo para o servidor em segundo plano, guardando-o como um rascunho sem necessidade de guardar manualmente ou de recarregar a página.
Os utilizadores podem criar sítios Web mais dinâmicos, interactivos e receptivos, tirando partido das técnicas AJAX no desenvolvimento do WordPress.
Utilizar AJAX no WordPress
O WordPress suporta AJAX nativamente. Podes ver “admin-ajax.php” dentro da pasta wp-admin. Foi inicialmente criado para todas as funções que fazem pedidos AJAX a partir da administração do WordPress. Também é utilizado para a parte pública da Web.
Todos os pedidos AJAX do WordPress devem passar por um script PHP. Por outras palavras, admin-ajax.php deve ser o ficheiro PHP através do qual é chamada uma ação que devolve conteúdo.
Em 2013, o WordPress introduziu a API WordPress Heartbeat, que forneceu várias funcionalidades importantes, como a funcionalidade de guardar automaticamente, a expiração do início de sessão e o aviso de bloqueio de publicação enquanto outro utilizador está a escrever ou a editar uma publicação do WordPress.
Bloqueio de postagem
Quando tentas editar uma publicação em que outro utilizador já trabalhou, aparece um aviso pop-up sobre a situação. Existem três acções visíveis para ti. Todas as publicações, Pré-visualizar e Assumir o controlo.
As funcionalidades acima mencionadas são possíveis graças à API WordPress Heartbeat, que liga o servidor e o browser para uma comunicação e respostas adequadas.
A API do WordPress Heartbeat gera pedidos de comunicação com o servidor e desencadeia eventos quando recebe dados/respostas. Normalmente, isto aumenta a carga no servidor e acaba por tornar a administração do WordPress mais lenta .
Exemplo
Acedo ao meu painel de controlo do WordPress e começo a redigir uma publicação. A seguir, abro o separador durante vários minutos e navego noutros separadores. O painel de controlo ainda está ligado e podes ver que o admin-ajax está continuamente a enviar pedidos.
De acordo com o ticket mencionado acima, o admin-ajax.php no WordPress gera pedidos a cada 15 segundos. O pedido pode ser qualquer comunicação com o servidor.
Os pedidos AJAX no WordPress são tratados pelo ficheiro admin-ajax.php localizado na pasta wp-admin. É o ficheiro designado para as funcionalidades AJAX do back-end e do utilizador.
Para iniciar um pedido AJAX, é necessário incluir um parâmetro de ação com os dados do pedido utilizando o método GET ou POST.
Este parâmetro de ação determina o gancho específico a ser acionado no ficheiro admin-ajax.php.
Os hooks são designados wp_ajax_my_action e wp_ajax_nopriv_my_action, em que my_action corresponde ao valor do parâmetro de ação no pedido GET ou POST.
Vamos ver como o podemos utilizar no WordPress. Se és novo no WordPress ou não tens conhecimentos técnicos, isto pode ser difícil de compreender. É importante que tenhas uma boa compreensão de JavaScript (jQuery é suficiente) e conhecimentos de HTML, CSS e PHP.
- Utiliza a função wp_enqueue_script() para colocar na fila o ficheiro JavaScript responsável pelo tratamento dos pedidos AJAX. Certifica-te de que o colocas na fila de forma adequada, como no functions.php do teu tema ou num ficheiro de plug-in personalizado.
- Utiliza a função wp_localize_script() para localizar o script AJAX. Isto permite-te passar dados do teu código PHP para o script, tornando-os acessíveis em JavaScript.
- Usa as funções wp_send_json() ou wp_send_json_success() e wp_send_json_error() do WordPress para enviar os dados de resposta de volta ao JavaScript do lado do cliente. Podes incluir os dados pretendidos ou uma mensagem de erro na resposta.
- Podes utilizar o método jQuery.ajax() ou os métodos abreviados jQuery.post() ou jQuery.get() para enviar o pedido AJAX para o servidor.
Estes exemplos demonstram como o AJAX pode ser utilizado em diferentes cenários no WordPress para melhorar as interações do utilizador, melhorar o desempenho e proporcionar uma experiência de utilizador perfeita.
Analisando solicitações em admin-ajax.php
Os pedidos de plugins causam muitos problemas com o admin-ajax.php no WordPress. Esses plug-ins podem tornar o administrador do WordPress mais lento, solicitando funcionalidades específicas, como pop-ups ou atualizações do contador de compartilhamento social. No entanto, nem todos os pedidos sobrecarregam o ficheiro admin-ajax.php.
Se os pedidos forem tratados corretamente e os programadores de plugins seguirem as melhores práticas para utilizar chamadas AJAX nos seus plugins, o ficheiro admin-ajax.php funcionará bem.
Agora, vamos explorar algumas das melhores formas de verificar os pedidos no admin-ajax.php que estão a tornar o site mais lento.
1. Ativar a depuração
Ativa o modo de depuração do WordPress adicionando a seguinte linha ao ficheiro wp-config.php do teu site:
define('WP_DEBUG', true);
2. Monitoriza os pedidos de rede
Carrega o teu site no browser e vai a inspecionar > Rede. Pressiona Ctrl + R e localiza o arquivo admin-ajax.php. Seleciona a solicitação admin-ajax.php na lista de rede para exibir seus detalhes.
Presta atenção ao método de pedido (GET ou POST), aos parâmetros do pedido e ao tempo de resposta. Compara os tempos de resposta de diferentes pedidos para identificar quaisquer diferenças importantes.
3. Desactiva os plug-ins
Começa a desativar os plug-ins um a um, começando pelos que têm maior probabilidade de interagir com o admin-ajax.php, como os plug-ins de cache ou de otimização.
Depois de desativar cada plug-in, volta a carregar a página e monitoriza os pedidos de rede. Observa quaisquer alterações no tempo de resposta ou no tamanho.
4. Identifica o culpado
Quando notares uma melhoria significativa no tempo de resposta ou uma redução no tamanho dos pedidos admin-ajax.php depois de desactivares um determinado plugin, podes ter identificado o culpado.
Reactiva os outros plugins e confirma se o problema se repete quando o plugin suspeito é ativado.
Acelera o painel de controlo do WordPress
Para acelerar o backend do WordPress, a melhor prática é desativar a API Heartbeat ou, pelo menos, definir um intervalo de tempo mais longo para que não atinja o servidor a cada poucos segundos.
Para isso, precisas de instalar o plugin Breeze. Se fores cliente da Cloudways, não precisas de instalar o plugin, uma vez que o Cloudways Breeze vem pré-instalado com as aplicações WordPress. Também o podes utilizar com o Autonomous.
Faz login no teu Painel de Administração do WordPress. Navega até Plugins → Adicionar novo → procura o Breeze → Instala e ativa-o.
Navega para Settings → Breeze → Heartbeat API. Aí encontrarás 4 opções diferentes para configurar o Heartbeat.
- Controlar o Heartbeat: Podes alternar o botão para ativar ou desativar a API Heartbeat para o teu Backend, Post Editor e Frontend.
- Heartbeat Frontend: permite-te alterar o comportamento do teu Front-end ou desactivá-lo completamente.
- Heartbeat Post Editor: isto permite-te alterar o comportamento do teu WP Post Editor ou desactivá-lo completamente.
- Heartbeat Backend: permite-te alterar o comportamento do teu Backend ou desactivá-lo completamente.
Aqui tens de criar várias regras:
Por predefinição, obténs a frequência predefinida da API do WordPress Heartbeat, mas podes criar várias regras com base nos teus requisitos.
Por exemplo, podes querer que o WordPress Backend (Dashboard) seja acionado em 2 minutos (120 segundos), mas que o Post Editor seja acionado em 3 minutos (180 segundos).
Para isso, tens de criar duas regras: uma para o Painel de Controlo do WordPress e outra para o Post Editor. Define as suas frequências para 2 e 3 minutos, respetivamente.
Considerações sobre segurança AJAX
Há certas considerações de segurança a ter em conta quando lidas com AJAX. Aqui estão algumas delas:
- As aplicações AJAX são vulneráveis ao Cross-site Scripting (XSS). Isto significa que é fácil manipular códigos AJAX sem as validações e a codificação adequadas. Como resultado, torna-se fácil roubar informações, brincar com o conteúdo e executar acções maliciosas.
- As chamadas de função AJAX vão para o servidor em texto simples. Sem um protocolo adequado, qualquer pessoa pode extrair informações sensíveis. Basicamente, isto deixa a tua base de dados à mercê de agentes maliciosos.
- AJAX pode ser incompatível com alguns navegadores de Internet.
Resumo
Depois de chegares a este ponto, aprendeste o que é AJAX e como pode melhorar a experiência do utilizador de aplicações Web, actualizando e refrescando o ecrã de forma assíncrona. Também vimos como usar o AJAX no WordPress, tanto no front-end quanto no back-end.
Com o WordPress AJAX, podes criar sites mais dinâmicos e responsivos que podem interagir com o servidor sem recarregar a página. Espero que esta publicação do blogue tenha sido útil e informativa, e encorajo-te a experimentar o AJAX nos teus Web sites WordPress.
Q. Podemos usar AJAX no WordPress?
A. Sim, o AJAX pode ser utilizado no WordPress para criar funcionalidades dinâmicas e interactivas sem recarregar a página. O WordPress fornece suporte embutido para AJAX através do admin-ajax.php, que facilita a comunicação entre o front-end e o back-end. É normalmente utilizado para tarefas como submissões de formulários, actualizações em tempo real e carregamento dinâmico de conteúdos.
Q. Porque é que o ajaxurl não foi definido no WordPress?
A. A variável ajaxurl não é definida automaticamente no front-end do WordPress porque é usada principalmente no painel de administração. Para a definir no front end, tens de localizar o teu ficheiro JavaScript utilizando a função wp_localize_script(), passando o URL AJAX dinamicamente.
Eis um exemplo:
wp_localize_script('my-script', 'ajax_object', array('ajax_url' => admin_url('admin-ajax.php')));
Q. Os sítios Web ainda utilizam AJAX?
A. Sim, os Web sites ainda utilizam AJAX, embora as tecnologias mais recentes, como a API Fetch e os WebSockets, se tenham tornado alternativas populares. O AJAX é normalmente utilizado para tarefas como actualizações de dados em tempo real, scrolling infinito e submissões de formulários dinâmicos.
Danish Naseer
Danish Naseer é um gestor da comunidade WordPress na Cloudways. É apaixonado por design, desenvolvimento e envolvimento com as pessoas para as ajudar. Também participa ativamente na comunidade para partilhar os seus conhecimentos. Além disso, adora ver documentários, viajar e passar tempo com a família. Podes contactá-lo em [email protected]
