6

Estou tentando recuperar um dado vindo do Ajax para usar em outra função, mas não estou obtendo sucesso. Em jQuery faço isso usando um parâmetro chamado async: false.

Mas no JS puro não estou conseguindo fazer. O parâmetro está false na função .open.

JS

function initMap() {
    var idDealer = document.getElementById('id-concessionaria').value;
    urlBase      = document.getElementsByTagName('body')[0].getAttribute('data-base');

    // Ajax Procura na Base de Dados Latitude e Longitude da Concessionária

    var request  = new XMLHttpRequest();
    request.open('POST', urlBase + '/avaliar-concessionaria/lat-lng', false);
    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    request.send("id="+idDealer);

    request.onload = function() {
        if (request.status >= 200 && request.status < 400) {
            var data = JSON.parse(request.responseText);
            var lat  = data[0];
            var lng  = data[1];
        }
    };

    // Quero usar as variáveis aqui

    var myLatLng = { lat: lat, lng: lng }
    map = new google.maps.Map(document.getElementById('mapa'), {
        center: myLatLng,
        zoom: 10
    });

    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        title: 'Aqui!'
    });
}
2
  • 4
    8Hs da manhã, o cara já chega metendo pergunta no Stack. Nem chegou direito... ligou o PC mandou a pergunta. Commented 10/03/2016 às 11:20
  • Editei a resposta @Zoom espero que entenda que o meu outro comentário era tentando lhe orientar, eu nunca passo um orientação só por mimimi ou porque choro muito, era com a única intenção de te ajudar ;) Por favor sempre presuma boa intenção, espero que consiga entender o exemplo assíncrono, pois como eu disse sync vai ser "descontinuado".
    – Syzoth
    Commented 10/03/2016 às 19:45

2 Respostas 2

4

você deve usar o evento readystatechange e não o load.

Em todo caso, acho desnecessario utilizar o header application/x-www-form-urlencoded, o default multipart/form-data é até melhor.

os possiveis valores para o readyState são:

  • 0 - Não Enviado
  • 1 - método Open foi executado.
  • 2 - método Send foi chamado e os Headers já estão disponiveis.
  • 3 - Carregando, a propriedade [responseText] já possui dados parciais.
  • 4 - Operação Concluida.

Então devemos esperar pelo readyState == 4 para que possamos trabalhar sobre o retorno da requisição.

var idDealer = document.getElementById('id-concessionaria').value;
urlBase      = document.body.dataset.base;

var request  = new XMLHttpRequest();
//terceiro parametro [async] é por default true.
request.open('POST', urlBase + '/avaliar-concessionaria/lat-lng'); 

//não acho necessario, prefiro o "multipart/form-data";
//request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 

request.responseType = "json"; //formato esperado para o retorno.
request.addEventListener("readystatechange", function() {
    if (request.readyState == 4) {
        //normalmente uso apenas o status 200 para verificar se é sucesso.
        if (request.status >= 200 && request.status < 400) { 
            //devido ao request.responseType = "json" não é preciso deserializar o responseText.
            //var data = JSON.parse(request.responseText); 
            var lat  = request.response[0];
            var lng  = request.response[1];

            var myLatLng = { lat: lat, lng: lng }
            map = new google.maps.Map(document.getElementById('mapa'), {
                center: myLatLng,
                zoom: 10
            });

            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                title: 'Aqui!'
            });
        }       
    }   
});

//montando os dados a serem enviados.
//opcionalmente o FormData pode receber como parametro um form, 
//desta forma ele já será preenchido com os dados do form automaticamente.
//caso contrario, use o append para incluir os valores a serem enviados.
var formData = new FormData();
formData.append("id", idDealer);
request.send(formData);

para fazer de forma sincrona, não precisa de nenhum evento, basta executar o codigo de forma linear, porém ao fazer desta forma, você estará bloqueando a thread, então não é aconselhavel.

var idDealer = document.getElementById('id-concessionaria').value;
urlBase      = document.body.dataset.base;

var request  = new XMLHttpRequest();
request.open('POST', urlBase + '/avaliar-concessionaria/lat-lng', false); 

//não acho necessario, prefiro o "multipart/form-data";
//request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 

request.responseType = "json"; //formato esperado para o retorno.

//montando os dados a serem enviados.
//opcionalmente o FormData pode receber como parametro um form, 
//desta forma ele já será preenchido com os dados do form automaticamente.
//caso contrario, use o append para incluir os valores a serem enviados.
var formData = new FormData();
formData.append("id", idDealer);
request.send(formData);

//normalmente uso apenas o status 200 para verificar se é sucesso.
if (request.status >= 200 && request.status < 400) { 
    //devido ao request.responseType = "json" não é preciso deserializar o responseText.
    //var data = JSON.parse(request.responseText); 
    var lat  = request.response[0];
    var lng  = request.response[1];

    var myLatLng = { lat: lat, lng: lng }
    map = new google.maps.Map(document.getElementById('mapa'), {
        center: myLatLng,
        zoom: 10
    });

    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        title: 'Aqui!'
    });
}
10
  • A resposta ficaria mais interessante com uma explicação do que é o readyState e o que significa ele ter o valor 4. Commented 10/03/2016 às 11:33
  • Estava modificando a função para readystatechange antes de você mandar a resposta. Agora que vou ver sua solução... quanto aos status da requisição, por mim não precisa explicar nada... Commented 10/03/2016 às 11:35
  • @Pablo, vou adicionar o esta informação. Commented 10/03/2016 às 11:40
  • @Zoom, agora notei que você queria fazer de forma asincrona, apesar de eu desacoselhar que seja feito desta forma, vou adicionar a resposta. Commented 10/03/2016 às 11:41
  • 1
    @Zoom, errata: me desculpe pela confusão, no comentario acima queria me referir a forma sincrona, porém escrevi forma asincrona... a forma sincrona que é desaconselhavel, fazer da forma asincrona é encorajado. Commented 10/03/2016 às 11:55
3

Sei que já obteve a resposta, mas gostaria de explicar como usar o XmlHttpRequest API.

Quando você define false no terceiro parâmetro de .open você esta definindo como síncrono:

open('POST', url, false);

Mesmo que use .onload ou .onreadystatechange eles não irão funcionar, entenda que Ajax não é a tecnologia e sim a maneira que usamos o XmlHttpRequest API, ou seja só será ajax se for assíncrono, caso contrário é SJAX (XmlHttpRequest sincrono).

Veja as diferenças:

Síncrono (isto não é Ajax):

var oReq = new XMLHttpRequest();

//Defina como false
oReq.open("GET", "/url", false);

//Espera completar a requisição, geralmente congela o browser
oReq.send(null);

alert(oReq.responseText);

Note que o síncrono "congela" o webbrowser enquanto a requisição não terminar

Assíncrono (isto é Ajax):

var oReq = new XMLHttpRequest();

//Defina como true
oReq.open("GET", "/url", true);

//Função assíncrona que aguarda a resposta
oReq.onreadystatechange = function()
{
    if (oReq.readyState === 4) {
        alert(oReq.responseText);
    }
};

//Envia a requisição, mas a resposta fica sendo aguardada em Background
oReq.send(null);

Note que o assíncrono não congela o browser, pois na verdade o processo esta em Background e o sinal é enviado via callback pro .onreadystatechange pra cada estágio do .readyState

É como expliquei nesta pergunta: Ajax não é uma linguagem de programação. Então o que é?

application/x-www-form-urlencoded vs multipart/form-data

Eu entendo o que o TobyMosque disse e não discordo, só que precisamos entender as diferenças, veja bem o setRequestHeader('Content-Type', ...); não é algo só do XmlHttpRequest como já devem saber, é uma instrução que diz como os dados devem ser interpretados pelo back-end.

Usar new FormData funciona perfeitamente da maneira explicada, mas se não tivermos suporte no navegador pra esta classe então temos sim que usar application/x-www-form-urlencoded.

O setRequestHeader('Content-Type', ...); equivale ao atributo enctype no <form>, com eles definimos como os dados do formulário serão codificados ao envia-los para o servidor, existem 3 tipos de valores para este atributo:

  • application/x-www-form-urlencoded este é o valor padrão em <form>, mas não no XmlHttpRequest. Nele todos caracteres são codificados antes de serem enviados, por exemplo espaços são trocados por + e caracteres especiais são convertidos em valores ASCII HEX.

  • multipart/form-data Ele não codificado os dados, você deve usar este valor quando for fazer uploads.

  • text/plain espaços são convertidos em sinais de + mas outros caracteres não serão codificados.

Supondo que o browser seja um pouco mais antigo e não suporte FormData então terá que usar application/x-www-form-urlencoded e codificar o passado no .send(...);, assim:

var oReq = new XMLHttpRequest();

//Defina como true
oReq.open("POST", "/url", true);
oReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

//Função assíncrona que aguarda a resposta
oReq.onreadystatechange = function()
{
    if (oReq.readyState === 4) {
        alert(oReq.responseText);
    }
};

oReq.send('nome=' + escape('João de Nobrega'));

Ou:

oReq.send('nome=' + encodeURIComponent('João de Nobrega'));

Se enviar sem o application/x-www-form-urlencoded eles irão com o formato RAW e se não usar encodeURIComponent ou escape é provável que ele não reconheça o que vem depois de João

Alguns detalhes aqui: Upload não funciona $_FILES undefined index error

Conclusão

Não use síncrono pois ele está em desuso e os navegadores estão emitindo warnings e no futuro irão remover o síncrono, então não use o false, use true ou omita o terceiro parâmetro (por padrão .open usa true) assim:

request.open('POST', urlBase + '/avaliar-concessionaria/lat-lng');

Como o código deve ficar

Como eu disse sincrono em breve não irá mais funcionar em navegadores modernos, pra isto você precisa entender a diferença de callback e return, leia isto:

O seu código deve ficar assim:

function initMap() {
    var idDealer = document.getElementById('id-concessionaria').value;
    urlBase      = document.getElementsByTagName('body')[0].getAttribute('data-base');

    var myLatLng, marker, myLatLng; //Torna as variáveis acessíveis no escopo de `initMap`

    var exec = function(lat, lng) {
        myLatLng = { "lat": lat, "lng": lng }
        map = new google.maps.Map(document.getElementById('mapa'), {
            center: myLatLng,
            zoom: 10
        });

        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: 'Aqui!'
        });

        //Resto da função
    };

    var request  = new XMLHttpRequest();
    request.open('POST', urlBase + '/avaliar-concessionaria/lat-lng', true);
    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

    request.onreadystatechange = function() {
        if (oReq.readyState === 4 && request.status >= 200 && request.status < 400) {
            var data = JSON.parse(request.responseText);
            var lat  = data[0];
            var lng  = data[1];
            exec(lat, lng);
        }
    };
    request.send("id=" + idDealer);
}

Desta maneira irá funcionar assincronamente.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .