Ajax Componentes

O que é

Carrega um pedaço de HTML de outra rota (ou de um elemento escondido na própria página) e injeta em qualquer alvo — sem reload, sem escrever fetch manualmente toda vez. Suporta 3 gatilhos (clique/carregamento/hover), efeito de entrada declarativo, extração de trecho, painel/modal automáticos e API JS.

Como funciona

Ao disparar o trigger: (1) busca o conteúdo — via fetch (sw-ajax) ou copiando de um elemento da própria página (sw-ajax-src, sem rede); (2) sanitiza com SW.html.set(); (3) injeta no destino; (4) chama SW.reinit() nele — qualquer componente SWCore dentro já nasce funcionando; (5) aplica o efeito de entrada, se pedido; (6) dispara sw:ajax:done. Bloqueia origens diferentes por padrão (só libera com sw-ajax-crossorigin) e, em métodos que mudam estado (POST etc.), manda automaticamente o token CSRF de <meta name="csrf-token">.

Exemplos

<!-- click (padrão) -->
<button sw-ajax="/produtos" sw-target="#lista">Carregar produtos</button>

<!-- load — carrega ao entrar na página -->
<div sw-ajax="/dashboard/widgets" sw-ajax-trigger="load" sw-target="#widgets"></div>

<!-- hover — pré-carrega no mouseover -->
<a href="/perfil/42" sw-ajax="/perfil/42/preview" sw-ajax-trigger="hover" sw-target="#preview"></a>

<p class="demo-box-sub demo-mb">Enquanto a requisição está em andamento, o destino ganha a classe <code>.sw-ajax-loading</code> (escurece + spinner) — sem isso, o conteúdo antigo fica parado ali sem nenhum aviso. Local costuma responder rápido demais pra ver o spinner com calma — abra o DevTools → Network → throttling pra observar melhor.</p>
<div class="demo-grid">
  <div class="demo-box">
    <p class="demo-box-title">Com preload (padrão)</p>
    <button sw-ajax="../assets/demo-ajax-click.html" sw-target="#ajaxPreloadOn" class="sw-btn sw-btn-sm">Carregar</button>
    <div id="ajaxPreloadOn" class="demo-infinite-note"></div>
  </div>
  <div class="demo-box">
    <p class="demo-box-title">Sem preload — sw-ajax-loader="off"</p>
    <button sw-ajax="../assets/demo-ajax-click.html" sw-target="#ajaxPreloadOff" sw-ajax-loader="off" class="sw-btn sw-btn-sm">Carregar</button>
    <div id="ajaxPreloadOff" class="demo-infinite-note"></div>
  </div>
</div>

<!-- Triggers — sw-ajax-effect funciona igual com sw-ajax-src, sem HTTP nenhum -->
<button sw-ajax-src="#tab-1" sw-target="#conteudo" sw-ajax-effect="fade" sw-ajax-duration="250">Tab 1</button>
<button sw-ajax-src="#tab-2" sw-target="#conteudo" sw-ajax-effect="fade" sw-ajax-duration="250">Tab 2</button>

<!-- Destino -->
<div id="conteudo"></div>

<!-- Fontes ocultas — funciona com <template> ou <div hidden> -->
<template id="tab-1"><h4>Conteúdo da Tab 1</h4></template>
<template id="tab-2"><h4>Conteúdo da Tab 2</h4></template>

// GET e injeta
SW.Ajax.load('/api/lista', '#resultado');

// Com opções
SW.Ajax.load('/api/lista', '#resultado', {
  push: true,           // atualiza a URL via history.pushState
  extract: '#conteudo', // extrai só um trecho da resposta
});

// POST com dados (objeto vira JSON automaticamente)
SW.Ajax.post('/api/salvar', { nome: 'João', idade: 30 }, '#resposta');

// POST com FormData (upload de arquivo)
const fd = new FormData(document.querySelector('#meuForm'));
SW.Ajax.post('/api/upload', fd, '#resultado');

// Eventos no elemento trigger
el.addEventListener('sw:ajax:start', ({ detail }) => console.log('Buscando:', detail.url));
el.addEventListener('sw:ajax:done', () => console.log('Concluído.'));
el.addEventListener('sw:ajax:error', ({ detail }) => console.error('Erro:', detail.error));

Atributos

Variantes

Nenhum.

Eventos

API (JavaScript)

Requisitos

• Por segurança, só busca URLs da mesma origem por padrão — outra origem exige sw-ajax-crossorigin explícito no elemento.

Limitações — o que ele não faz

• Sem SW.Trans (transição de página via View Transition API) — o SWCore não tem esse módulo; sem ele, a injeção acontece direto, sem cross-fade automático. Não afeta sw-ajax-effect, que é CSS puro e já funciona independente disso.
• O efeito de entrada suporta .sw-ani-* (entrada única) e .sw-loop-* (contínua) — o SWCore não tem a família .sw-rev-* (reveal) do SW Framework original sob esse nome; para revelar ao rolar a tela, use o componente Anim (camada Reveal) diretamente no elemento, não via sw-ajax-effect.