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
 
  • Filter
  • Tempo
  • Show
Clear All
new posts

  • Font Size
    #1

    Dica 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();
    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....

    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);
     }
    }
    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...)

    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)
    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!

    Engenharia Social - Web Design - Programmer
    __________________________________________________ __________

    sigpic

  • Font Size
    #2
    pqp fiquei quase 1 hora digitando pra o servidor cagar na formatação do texto kkkkkkkkkk

    Engenharia Social - Web Design - Programmer
    __________________________________________________ __________

    sigpic

    Comment

    X
    Working...
    X