artigo
Criando uma requisição Ajax
Publicado em: 09/04/2023
By Wagner Silva
/wagstalos
Criando uma requisição Ajax
o que é Ajax?
AJAX é o acrônimo para JavaScript assíncrono + XML. Não é exatamente uma tecnologia nova, mas um termo empregado em 2005 por Jesse James Garrett para descrever uma nova forma de utilizar em conjunto algumas tecnologias, incluindo HTML ou XHTML, CSS, JavaScript, DOMl (en-US), XML (en-US), XSLT (en-US), e o mais importante: objeto XMLHttpRequest. Quando essas tecnologias são combinadas no modelo AJAX, as aplicações web que a utilizam são capazes de fazer rapidamente atualizações incrementais para a interface do usuário sem recarregar a página inteira do navegador. Isso torna a aplicação mais rápida e sensível às ações do usuário.
Embora a letra X em AJAX corresponda ao XML, atualmente o JSON é mais utilizado que o XML devido às suas vantagens, como ser mais leve e ser parte do JavaScript. Ambos (JSON e XML) são utilizados para obter informações do pacote no modelo AJAX.
fonte: mozila
HTML<div class='container'>
<h1>Consultando CEP via Ajax</h1>
<div class="d-flex cep">
<input type="text" name="cep" placeholder="CEP" maxlength="9" />
<button class='ajax-cep'><i class="fa-solid fa-magnifying-glass"></i></button>
</div>
<div class="d-flex">
<input type="text" name="logradouro" placeholder="Logradouro">
<input type="text" name="complemento" placeholder="complemento">
<input type="text" name="bairro" placeholder="Bairro">
<input type="text" name="localidade" placeholder="localidade">
<input type="text" name="uf" placeholder="localidade">
</div>
<p class="feedback"></p>
</div>
JS
$(function(){
$(".ajax-cep").click(function () {
let cep = $("[name='cep']").val().replace('-', '');
console.log(cep)
if (cep !== null && cep !== "") {
$.ajax({
type: "GET",
url: `https://viacep.com.br/ws/${cep}/json/`
})
.done(function (data) {
console.log(data);
$('.feedback').show();
setTimeout(() => {
$('.feedback').hide();
}, 3000);
if(data['erro'] !== null && data['erro'] === true){
$('.feedback').removeClass('success');
$('.feedback').text('CEP inválido 😔').addClass('danger');
}else{
$("[name='logradouro']").val(data["logradouro"]);
$("[name='logradouro']").val(data["logradouro"]);
$("[name='complemento']").val(data["complemento"]);
$("[name='bairro']").val(data["bairro"]);
$("[name='localidade']").val(data["localidade"]);
$("[name='uf']").val(data["uf"]);
$('.feedback').removeClass('danger');
$('.feedback').text('Endereço encontrado 😀').addClass('success');
}
})
.fail(function (error) {
console.info(error);
alert("Ocorreu um erro");
});
}
});
})
Exemplo: