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.
Como exemplo usaremos as propriedades "onreadystatechange", "readyState", "status" e "responseText".
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....
Agora trabalharemos com os métodos "open" e "send". Usarei um raw criado no pastebin como exemplo (Apenas usuários registrados e ativados podem ver os links., Clique aqui para se cadastrar...)
Ao executar este código, devemos ter como resposta um alert com a mensagem "Teste de XMLHttpRequest", que é o conteúdo do raw no pastebin.
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!
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!
Comment