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.
sync
vai ser "descontinuado".