Javascript Como configurar acesso ao servidor para utilizar AJAX?

[Reberth Siqueira]

Boa madruga!! Eu to tentando aprender sobre AJAX e até agora todos os exemplos que eu vi, eu não consegui identificar um bloco de configuração com o servidor.

 

Só vi os caras partindo direto para a criação da instancia de XMLHttpRequest.

 

To entrando agora nessa área de dados dinamicos e estou ficando meio perdido haaha

[DiF]

@Reberth Siqueira Olá,

Não precisa de configuração  no servidor.

Basicamente, usa direto a instância do objeto XMLHttpRequest.

 

https://developer.mozilla.org/pt-BR/docs/Web/API/XMLHttpRequest/Usando_XMLHttpRequest

 

document.querySelector('#btn-login').addEventListener("submit", login);

function login(){
  //Valores dos campos input
var usrLogin = document.querySelector('#login').value
var usrSenha = document.querySelector('#senha').value

 //instância do objeto XMLHttpRequest 
 var http = new XMLHttpRequest();

 //arquivo que vai receber os dados
 var url = "recebeDados.php";

 //dados a serem enviados
 var dados = 'login=' +usrLogin+'&senha='+usrSenha

 //inicializa uma nova requisição, ou reinicializa uma requisição já existente.
 http.open("POST", url, true);

 //Testa o estado. se concluído insere a resposta no elemento indicado
 http.onreadystatechange = function() {
    if(http.readyState == 4 && http.status == 200) {
        document.querySelector("#msg").innerHTML = http.responseText; 
    }
 }

//Envia os dados.
 http.send(dados);
}

 

 

Na verdade, é bastante simples vendo assim.  A partir disso, você pode criar funções a seu gosto. 

Ademais, em relação aos dados enviados, você pode usar o formdata se quiser ou a serialização.

 

Eu prefiro fazer as requisições assíncronas (ajax) com o jQuery.. Ele nada mais é do que um conjunto de funções capazes de fazer o que se faria no javascript puro e um pouco mais.

 

O mesmo exemplo acima em Jquery fica assim:

$(document).ready(function(){
    $("#btn-login").on("click", function(){
        $.ajax({
             url: "recebeDados.php",
             method: "POST",
             dataType: "HTML",
             data: {login: $("#login").val(), senha: $("#senha").val }       
        }).done(function(responseText){
              $("msg").html(responseText);
           }).fail(function(){
                $("#msg").html(responseText);
           });
    });
});

 

[Reberth Siqueira]

Então @DiF, to com dificuldade ao identificar o status da transferencia. Depois que eu executo o método .send(), meu ReadyState muda de 0 para 1 e fixa neste valor. E eu consigo obter os dados do arquivo mencionado na URL...  ajuda eu

 

//                  ARQUIVO JAVASCRIPT
class conAjax {
    // padrão postDataType = x-www-form-urlencoded
    sendData = (type, url, handler, dados,postDataType)=>{
        let httpRequest = new XMLHttpRequest();

        console.log(httpRequest); // 1 CONSOLE.LOG - READYSTATE = 0

        httpRequest.onreadystatechange = handler;
        console.log(httpRequest); // 2 CONSOLE.LOG - READYSTATE = 0
         
        httpRequest.open(type,url,true);
        console.log(httpRequest); // 3 CONSOLE.LOG - READYSTATE = 0
       
        httpRequest.send();
        console.log(httpRequest); // 4 CONSOLE.LOG - READYSTATE = 1
        
        }
    }

    window.onload = ()=>{
    let ajax = new conAjax();
    
    ajax.sendData("get","teste.xml");
    
}

// teste.xml

<*****> kkkk </*****>

 

As saídas do meu console:

 

Consegui resolver aqui!!!!

 

O meu erro era não especificar a propriedade: onreadystatechange

 

 

Mas não entendi o porque kkk