Blog sobre WordPress
No Result
View All Result
  • Web Stories
  • Desenvolvimento
  • Infra
  • Mobile
  • Performance
  • Segurança
  • SEO
  • E-commerce
Cadastrar e-mail
  • Web Stories
  • Desenvolvimento
  • Infra
  • Mobile
  • Performance
  • Segurança
  • SEO
  • E-commerce
No Result
View All Result
Blog sobre WordPress
No Result
View All Result

Início » Desenvolvimento WordPress » Para que serve o AJAX e como usá-lo. Faça do jeito certo

Para que serve o AJAX e como usá-lo. Faça do jeito certo

redacao by redacao
6 anos ago
Reading Time: 4 min
2
Para que serve o AJAX e como usá-lo. Faça do jeito certo
Compartilhe no FacebookCompartilhe no LinkedIn
Audio

Requisição AJAX e seu conceito

Vamos deixar claro que AJAX não é uma homenagem ao herói da liga da justiça da DC Comics e sim uma tecnologia para tornar páginas WEB mais interativas. AJAX vem de Asynchronous JavaScript And XML, com essa tecnologia podemos criar requisições assíncronas aos servidores seguindo basicamente o mesmo fluxo de uma requisição normal HTTP.

Conteúdo relacionado

Como criar Web Stories no WordPress

Como criar blocos reutilizáveis no Gutenberg

Como habilitar recursos ocultos do Gutenberg no tema WordPress

Como normalmente utilizamos

Vamos imaginar um caso onde quero trazer todas as cidades de um determinado estado que foi selecionado pelo usuário. Basicamente teremos em nosso servidor uma rotina que espera o parâmetro com o id do estado e realizará uma busca no banco de dados trazendo todas as cidades relacionadas. Confira o exemplo a seguir:

 //arquivo - busca_cidades_por_estado.php
<?php
    $id_estado = intval( $_GET['id_estado'] );
    header( 'Content-type: application/json' );
    echo json_encode( busca_cidade( $id_estado ) );
 ?>

Acima temos um exemplo em php para fazer a tarefa do servidor, a função busca_cidade retornará todas as cidades do estado passado como parâmetro. Lembrando que é uma boa pratica sempre validar os valores recebidos do cliente para evitar ataques, como é apenas um exemplo não entraremos em detalhes de segurança aqui mas se você quer dicas segurança acompanhe a iniciativa #WordPressSeguro e todos os nossos posts sobre segurança com WordPress.

E como seria o nosso exemplo em JavaScript? Confira abaixo:

 //vamos assumir que estamos usando jQuery.
$.ajax({
    url: 'busca_cidades_por_estado.php',
    type: 'GET',
    dataType: 'json',
    data: { id_estado :  $('#select_estado').val() },
    success: function(response) {
        incluir_options_select_cidades( response );
    }
 });

Boas práticas de utilização

Creio que até aqui tudo normal, mas quando trabalhos com WordPress será que o exemplo acima é uma boa prática? A resposta é não, por alguns motivos:

  • Dependência de rotas de urls sempre particulares e não genéricas, exemplo: busca_cidades_por_estados.php.
  • O código não fica modular, o mesmo arquivo da rota processa os dados recebidos.
  • Implementar rotinas de validações genéricas torna-se quase impossível.
  • O código não fica manutenível quando se tem muitos arquivos para processar requisições.
  • Difícil de testar.

O próprio WordPress disponibiliza uma rota padrão para todas as requisições AJAX é o arquivo admin-ajax.php. Com a função admin_url( ‘admin-ajax.php’ ) você receberá a url do arquivo ficando dessa forma: http://meusitewordpress.com/wp-admin/admin-ajax.php. Essa rota espera um parâmetro chamado action seja ele passado via $_GET ou $_POST, o valor desse parâmetro será a chave para os nossos hooks que serão utilizados para o processamento e resposta da requisição.

Confira o mesmo exemplo acima agora utilizando o admin-ajax.php:

//arquivo - functions.php
<?php
    add_action(  'wp_ajax_busca_cidade_por_estado', 'ajax_busca_cidade_post_estado' );
    add_action(  'wp_ajax_nopriv_busca_cidade_por_estado', 'ajax_busca_cidade_post_estado' );
    function ajax_busca_cidade_post_estado() {
        //seu código para realizar a busca.
    }
 ?>

Com esse novo exemplo estamos processando as requisições através de hooks, para que isso funcione precisamos utilizar os prefixos wp_ajax_ e wp_ajax_nopriv_ concatenados com o nome da sua action que nesse exemplo é busca_cidade_por_estado. Existe uma pequena diferença entre os dois prefixos, confira:

  • wp_ajax_ – Para requisições onde o usuário deve estar logado.
  • wp_ajax_nopriv – Para requisições onde o usuário não precisa estar logado.

Em nosso JavaScript teremos uma pequena alteração:

//vamos assumir que estamos usando jQuery.
$.ajax({
    url: 'http://meusitewordpress.com/wp-admin/admin-ajax.php',
    type: 'GET',
    dataType: 'json',
    data: { action: 'busca_cidade_por_estado', id_estado :      $('#select_estado').val() },
    success: function(response) {
        incluir_options_select_cidades( response );
    }
 });

Pronto! Agora temos nossas requisições de forma centralizadas e organizadas em hooks.

Indo além

Da mesma forma que utilizamos o admin-ajax.php para tratar uma interação no site em sua parte frontal você também pode utilizar-lo para criar interações na administração do WordPress, nesse caso não é preciso utilizar o prefixo wp_ajax_nopriv_ já que só terão acesso ao painel usuários logados.

Você também pode criar validações genéricas de wp_nonces aumentando a segurança da sua aplicação e evitando ataques. Analise o seu cenário e necessidades e faça um bom aproveito do recurso.

Apresentação do Apiki WP Cursos. Cursos de WordPress para Devs e Gestores.

Tags: AJAXDeveloperJavaScript
Share8Share1SendShare
Previous Post

As estatísticas do Facebook Insights para o seu domínio.

Next Post

Vilões da performance de sites em WordPress

redacao

redacao

Related Posts

Anatomia do Gutenberg, o editor do WordPress
Desenvolvimento WordPress

Anatomia do Gutenberg, o editor do WordPress

13 de janeiro de 2021
As vantagens do editor Gutenberg para WordPress
Desenvolvimento WordPress

As vantagens do editor Gutenberg para WordPress

19 de agosto de 2020
Metodologia BPM para melhoria de processos dentro da empresa
Desenvolvimento WordPress

Metodologia BPM para melhoria de processos dentro da empresa

15 de janeiro de 2021
Scrum e PMBOK - aliados na gestão de projetos
Desenvolvimento WordPress

PMBOK e Scrum: grandes aliados na gestão de projetos

15 de janeiro de 2021
Next Post
Problemas de performance em sites mobile e desktop

Vilões da performance de sites em WordPress

Palestra “Repita 7 vezes: o WordPress é seguro”

Palestra "Repita 7 vezes: o WordPress é seguro"

Comments 2

  1. Rafael says:
    6 anos ago

    Uma dúvida, caso você esteja chamando posts com ajax, como ficaria URL da paginação? Por exemplo, se eu usar admin-ajax.php vai me retornar assim a URL (meudominio.com.br/ajax.php/page/2)

    Como agir nesse caso?

    Responder
    • Accácio Franklin says:
      6 anos ago

      Olá Rafael,

      No caso de paginação você pode usar o parâmetro “paged” do WP_Query informando o numero da pagina a ser requisitada. Se você quiser um exemplo me mande um e-mail accacio@apiki.com.

      Grande abraço.

      Responder

Deixe uma resposta Cancelar resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Fique por dentro

Como receber pagamento QR Code no WooCommerce

Quando e como fazer redirecionamento 301 ou 302 no WordPress

Segurança e LGPD: comece a implementação pelo básico

Os elementos que determinam a performance de site WordPress

O conceito e aplicabilidade do Mobile First

Os 3 principais motivos para atualizar o PHP, além do WordPress

O vídeo mais recente do canal

https://youtu.be/Ql-9cJgEd0Y

Os posts mais recentes

  • Como receber pagamento QR Code no WooCommerce
  • Quando e como fazer redirecionamento 301 ou 302 no WordPress
  • Segurança e LGPD: comece a implementação pelo básico
  • Os elementos que determinam a performance de site WordPress
  • O conceito e aplicabilidade do Mobile First
Facebook LinkedIn Instagram Twitter Youtube Github RSS

Sobre a Apiki

Empresa especializada em WordPress com três unidades de negócios.

  1. Design e Desenvolvimento;
  2. Infra e Hospedagem;
  3. Suporte e manutenção.

Em resumo, só fazemos uma coisa em WordPress: tudo.

Páginas do Apiki.com

  • Apiki.com
  • Sobre a Apiki
  • Desenvolvimento em WordPress
  • Sustentação WordPress
  • Hospedagem WordPress
  • Atendimento

Páginas do Blog

  • Sobre
  • Newsletter
  • Desenvolvimento WordPress
  • Segurança para WordPress
  • WordPress Mobile
  • Infra para WordPress
  • WordPress SEO
  • WordPress Performance
  • E-commerce

© 2020 Apiki - Empresa especializada em WordPress.

No Result
View All Result
  • Web Stories
  • Desenvolvimento
  • Infra
  • Mobile
  • Performance
  • Segurança
  • SEO
  • E-commerce

© 2020 Apiki - Empresa especializada em WordPress.