Carrega um fragmento de HTML de outra página, direto por atributo — sem escrever fetch().
Busca um pedaço de HTML de outra URL (mesma origem) e injeta na página, no clique ou quando o elemento fica visível.
Faz um fetch simples e injeta o HTML retornado no alvo — sw-ajax-extract permite pegar só um pedaço específico da resposta (um seletor CSS dentro do HTML buscado), não a página inteira.
<button sw-btn="pri" sw-ajax="/fragmento.html" sw-target="#area">Carregar</button>
<div id="area"></div>
<!-- o HTML que voltar é injetado dentro de #area --><!-- no clique (padrão) -->
<button sw-ajax="/parte.html" sw-target="#area">Carregar</button>
<!-- assim que a página abre -->
<div sw-ajax="/parte.html" sw-target="#area" sw-ajax-trigger="load"></div>
<!-- quando o mouse passa (busca uma vez só) -->
<a sw-ajax="/preview.html" sw-target="#area" sw-ajax-trigger="hover">Prévia</a><!-- a resposta é uma página inteira, mas você só quer o miolo -->
<button sw-ajax="/pagina.html"
sw-target="#area"
sw-ajax-extract="#conteudo">Carregar</button>
<!-- sw-ajax-extract é um seletor CSS aplicado no HTML que voltou --><!-- não precisa criar o modal/painel: ele monta e abre na hora -->
<button sw-ajax="/detalhe.html" sw-ajax-target="modal">Ver detalhes</button>
<button sw-ajax="/filtros.html" sw-ajax-target="panel">Filtros</button>
<!-- com sw-ajax-target você NÃO usa sw-target -->Sem demonstração ao vivo — envolve enviar dados de verdade pro servidor. Veja o código ao lado.
<!-- pede confirmação antes (ação destrutiva) -->
<button sw-btn="err"
sw-ajax="/pedidos/12/excluir"
sw-ajax-method="POST"
sw-ajax-confirm="Excluir este pedido? Não dá pra desfazer."
sw-target="#lista">Excluir</button>
<!-- com transição na troca do conteúdo -->
<button sw-ajax="/parte.html" sw-target="#area"
sw-ajax-effect="fade-up">Carregar</button>
<!-- acompanhando -->
<script>
document.addEventListener('sw:ajax:done', (e) => console.log('chegou'));
document.addEventListener('sw:ajax:error', () => SW.Alert.err('Falhou'));
</script>Por padrão ele sanitiza o HTML recebido e bloqueia outra origem. Os dois só saem do caminho se você pedir explicitamente.
Use sw-ajax-trusted só quando o HTML for do seu próprio servidor, e sw-ajax-crossorigin só quando a origem externa for de confiança — os dois ampliam a superfície de ataque de XSS.
<!-- padrão seguro: sanitiza e só aceita mesma origem -->
<button sw-ajax="/parte.html" sw-target="#area">Carregar</button>
<!-- pula a sanitização (só pra HTML 100% seu) -->
<button sw-ajax="/parte.html" sw-target="#area" sw-ajax-trusted>…</button>
<!-- libera origem externa -->
<button sw-ajax="https://outro.site/x.html" sw-target="#area"
sw-ajax-crossorigin>…</button>sw-ajaxsw-ajax-src="#id" pra usar um <template> local, sem rede)sw-targetsw-ajax-targetsw-targetsw-ajax-triggersw-ajax-methodsw-ajax-extractsw-ajax-effectsw-ajax-confirmSW.Alert.confirmar)sw-ajax-trustedsw-ajax-crossoriginclickloadhoversw-ajax-target="modal"sw-ajax-target="panel"sw:ajax:startsw:ajax:donesw:ajax:errorSW.Ajax.load(el)SW.Ajax.post(el, dados)Nenhuma.
sw-ajax-crossorigin e só se confiar na fonte.sw-content), que monta o HTML a partir de um template.