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

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.

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.