Requisições AJAX em JavaScript

Prévia do material em texto

Requisições AJAX e 
Comunicação com 
Servidor em JavaScript
Hoje abordaremos conceitos fundamentais, desde o que é AJAX até as 
práticas atuais com Fetch API.
Nosso objetivo é compreender o funcionamento dessa tecnologia, sua 
aplicação prática e as melhores formas de garantir comunicação 
eficiente e segura entre cliente e servidor.
por Fabrício Tonetto Londero
O Que é AJAX? 
(Asynchronous JavaScript 
and XML)
Definição e História
AJAX é uma técnica que 
permite a requisição 
assíncrona de dados, 
surgida nos anos 2000 para 
incrementar sites sem 
recarregá-los 
completamente.
Melhoria na 
Experiência do 
Usuário
Com AJAX, páginas web 
tornam-se mais dinâmicas, 
com respostas instantâneas, 
melhorando a fluidez e a
interatividade.
Comunicação Assíncrona
A requisição acontece em segundo plano, permitindo que o usuário 
continue interagindo sem esperas bloqueantes.
O Objeto XMLHttpRequest (XHR)
Criação e Configuração
Criamos um objeto XHR para 
comunicação HTTP, configurando 
métodos como GET para buscar e POST 
para enviar dados.
Métodos HTTP
• GET: Solicitar dados ao servidor
• POST: Enviar dados para criação
• PUT: Atualizar recursos
• DELETE: Remover recursos
Propriedades do XHR
• readyState: Estado da requisição
• status: Código HTTP da resposta
• responseText: Conteúdo retornado
Implementando Requisições 
AJAX
Abrir Conexão com open()
Define o método HTTP, a URL e a natureza assíncrona da requisição.
Enviar Requisição com send()
Dispara a requisição para o servidor, opcionalmente enviando dados 
no corpo da mensagem.
Gerenciar readyState
Monitora o progresso da requisição, reagindo adequadamente em cada 
etapa.
Tratamento de Erros
Verifica códigos HTTP para identificar sucesso (200) ou falhas (404, 500).
Formatos de Dados: XML e JSON
XML
Markup extensível, bastante 
estruturado, usado no passado, 
porém mais complexo para humanos.
JSON
Formato leve, fácil de ler, baseado 
em objetos JavaScript, utilizado 
amplamente atualmente.
Exemplo Prático
Converter JSON para objeto 
JavaScript simplifica manipulação 
no front-end, usando JSON.parse().
Fetch API: Uma Alternativa 
Moderna ao XHR
Sintaxe Simples
Fetch usa Promises, 
proporcionando código mais 
limpo e legível ao lidar com 
requisições assíncronas.
Uso de Promises
Permite encadear then() para 
lidar com respostas e 
catch() para captura de 
erros.
Tratamento de Erros
Combina try...catch com response.ok para garantir segurança e 
robustez nas requisições.
Segurança em Requisições AJAX
CORS
Política de compartilhamento de 
recursos entre origens, evita acesso 
externo não autorizado.
1
Same-Origin Policy
Restrições de segurança para proteger 
dados, requer configuração cuidadosa 
nos servidores para exceções.
2
Boas Práticas
• Validação de dados recebidos
• Proteção contra XSS (Cross-Site 
Scripting)
• Uso de HTTPS
3
Na prática
Testar Funções de Busca de CEP
Digite o CEP:
Buscar CEP v1 
(Fetch)
Buscar CEP v2 
(XMLHttpRequest)
Na prática
function buscarCEPv1() {
const cep = document.getElementById('cep').value;
const url = `https://viacep.com.br/ws/${cep}/json/`;
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error('Erro na requisição: ' + response.status);
}
return response.json();
})
.then(data => {
console.log(data);
document.getElementById('resultado').innerText = JSON.stringify(data, null, 2);
})
.catch(error => {
console.error('Erro:', error);
});
}
Na prática
function buscarCEPv2() {
const cep = document.getElementById('cep').value;
const url = `https://viacep.com.br/ws/${cep}/json/`;
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onload = function () {
if (xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
console.log(data);
document.getElementById('resultado').innerText = JSON.stringify(data, null, 2);
} else {
console.error('Erro na requisição:', xhr.status);
}
};
xhr.onerror = function () {
console.error('Erro de rede.');
};
xhr.send();
}
Lista de Exercícios
1. Crie uma requisição AJAX para buscar dados JSON de uma API pública. (https://jsonplaceholder.typicode.com/)
2. Implemente uma requisição POST para enviar informações a um servidor de teste. (https://jsonplaceholder.typicode.com/)