Unconfigured Ad Widget
Collapse
Anúncio
Collapse
No announcement yet.
Requisições em Javascript puro (Chat, uploads e outros formulários sem refresh)
Collapse
X
-
pqp fiquei quase 1 hora digitando pra o servidor cagar na formatação do texto kkkkkkkkkk
- Top
-
Requisições em Javascript puro (Chat, uploads e outros formulários sem refresh)
Você conhece o XMLHttpRequest ou pros mais ÃÂntimos o XHR?
O XHR é um objeto que permite transferir dados entre o cliente e o servidor através de requisições HTTP.
O exemplo mais comum do uso de XHR é a implementação de chats/bate-papos sem que as páginas se atualizem.
Lembrando que nesse tópico só entraremos no lado do cliente (front-end).
Começaremos criando uma variável pra trabalharmos como a instancia dessa requisição.
Código HTML:var xhr = new XMLHttpRequest();
Para entender os métodos e propriedades do XHR recomendo que dê uma olhada no site do Apenas usuários registrados e ativados podem ver os links., Clique aqui para se cadastrar....
Código HTML:/** onreadystatechange -> é ativado sempre que acontece uma alteração no estado da requisição readyState -> lê o atual estado da requisição(4 significa que a requisição já foi concluÃÂda, ou seja, o servidor recebeu a requisição e ja enviou a resposta) status -> é o status de resposta HTTP (Por exemplo 404, pra um recurso ou arquivo não encontrado) responseText -> é a resposta da requisição em texto plano, ou seja, o que seria mostrado na janela no lado do servidor. **/ xhr.onreadystatechange = function(){  if(xhr.readyState == 4 && xhr.status == 200){  var resposta = xhr.responseText;  alert(resposta);  } }
Código HTML:xhr.open("GET", "https://pastebin.com/raw/F2fCtjaz", true); // Criou-se a requisição para a url https://pastebin.com/raw/F2fCtjaz no método GET, o "true" define a requisição como ASSÃÂNCRONA xhr.send(); // Enviamos a requisição (Aqui não foi inserido nenhum valor, mas pode-se enviar dados de formulário criando o formulário, ou simplesmente definindo os parametros e valores)
Que tal um exercÃÂcio?
Crie uma função para executar este código ao se clicar em um botão e mostre como ficaria o seu código!Tags: Nenhum(a)
- Top
X
Leave a comment: