Introdução
Desenvolvedores web que utilizam múltiplas telas frequentemente enfrentam a necessidade de atualizar manualmente a página para visualizar as mudanças em tempo real. Embora simples, isso pode ser repetitivo e diminuir a produtividade. Neste post, vamos ensinar como criar uma página que atualiza automaticamente o conteúdo sempre que você salva ou altera o arquivo, usando AJAX puro. Ideal para quem deseja agilizar o desenvolvimento e visualização das alterações.
O Problema
Muitos desenvolvedores utilizam duas telas, uma com o editor de código (IDE) e outra com o navegador mostrando o resultado. No entanto, é necessário pressionar F5 para atualizar a página e ver as mudanças. Vamos criar uma solução que elimina essa necessidade!
A Solução
Usaremos AJAX para buscar e atualizar o conteúdo automaticamente. Com uma simples configuração de HTML e JavaScript, você poderá monitorar alterações em um arquivo e exibi-las em tempo real.
Passo a Passo
1. Crie o Arquivo HTML
Vamos criar um arquivo chamado ajax.html que será responsável por carregar e atualizar dinamicamente o conteúdo com base no parâmetro que você passa na URL.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Live Reload</title>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Função para pegar o parâmetro da URL
function getQueryParam(param) {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.get(param);
}
// Função para carregar e atualizar o conteúdo
function loadContent(url) {
fetch(url)
.then(response => response.text())
.then(data => {
document.getElementById('content').innerHTML = data;
})
.catch(error => console.error('Erro ao carregar o conteúdo:', error));
}
// Função para verificar mudanças no arquivo
function checkForUpdates(url) {
setInterval(() => {
loadContent(url);
}, 3000); // A cada 3 segundos
}
// Pegando o parâmetro "projeto" da URL
const projeto = getQueryParam('projeto');
if (projeto) {
loadContent(projeto);
checkForUpdates(projeto);
} else {
document.getElementById('content').innerHTML = '<p>Parâmetro "projeto" não encontrado na URL.</p>';
}
});
</script>
</head>
<body>
<div id="content" style="border: 1px solid #000; padding: 20px; margin: 20px;">
Carregando conteúdo...
</div>
</body>
</html>- Explicação:
- A função
getQueryParambusca o valor do parâmetroprojetoda URL. - A função
loadContentfaz uma requisição para carregar o conteúdo do arquivo especificado e o insere nadivcomid="content". - A função
checkForUpdatesverifica a cada 3 segundos se houve alteração no arquivo e, se sim, carrega o novo conteúdo.
- A função
2. Acesse a Página com o Parâmetro Correto
Para testar a funcionalidade, acesse o navegador com a URL: http://localhost/ajax.html?projeto=http://localhost/teste/index.html.
- O parâmetro
projetodeve conter o caminho para o arquivo que você deseja monitorar e exibir.
3. Corrigindo Problemas de CORS
Se você encontrar erros relacionados a CORS (Cross-Origin Resource Sharing), aqui estão algumas soluções:
- Use o mesmo protocolo (http ou https) para acessar tanto o arquivo
ajax.htmlquanto o arquivo que você está monitorando. - Permitir CORS no Servidor: Adicione o cabeçalho no seu servidor para permitir requisições de qualquer origem:
apache Header set Access-Control-Allow-Origin "*" - Desativar CORS para Testes Locais: No Chrome, você pode desativar o CORS para testes locais com o comando:
chrome.exe --disable-web-security --user-data-dir="C:\chrome-dev"
Conclusão
Com essa abordagem simples, você consegue automatizar a atualização de conteúdo, melhorando a eficiência do seu processo de desenvolvimento. A ideia é manter a tela com o código e a tela com a visualização sempre sincronizadas, sem a necessidade de recarregar a página manualmente. Experimente, ajuste os intervalos conforme necessário e veja como isso pode otimizar o seu fluxo de trabalho!