AJAX - JS puro

[BrunoBit 82]

Fala rapaziada, bom dia.
Eu to estudando JS ultimamente e praticando por aqui e me deparei com uma situação, o ajax ta respondendo depois que o script já executou e por consequência a minha variável IP (linha 92) está retornando indefinida, pq o ajax só responde depois, desconfio que seja algo relacionado à callback/async/sync.
Segue o código completo abaixo e pra fins de aprendizado, se quiserem me dar alguma orientação no que remover/otimizar/adicionar/encurtar no script em geral, ficarei bastante grato pela sua orientação.

obs1: Não desejo mexer com jquery por enquanto.
obs2: Os dados estão retornando corretamente no return da linha 85, que no caso é um IP.
obs3: Havia feito uma function pro ajax da linha 93 em diante e chamei dentro do ajax anterior na linha 85, funcionou perfeitamente e pegou o IP, porém achei meio esquisito e não sei se é uma boa prática colocar ajax dentro de ajax e retornei o código na forma como está logo abaixo.

 

erro: variável ( ip ) indefinida na linha 92

possível causa: ajax da linha 80-91 é executado só depois que o script já carregou por completo e me retorna indefinido na variável IP.

 

Desde já agradeço a ajuda rapaziada, abração, bom dia e fiquem com Deus.

 

segue o código específico:

function ajx(idx,dm){
	var xhr = new XMLHttpRequest();
	xhr.onreadystatechange = function() {
		if (this.readyState == 4 && this.status == 200) {
			rt = JSON.parse(this.responseText);
			return rt[idx]; // retorna o ip corretamente
		}
	}
	xhr.open("GET","https://"+ dm +"/data/getData.php",true);
	xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	xhr.send();
};
var ip = ajx("ip",h); // retorna indefinido

 

segue o código completo:

function pushRADS(){
	var p = window.location.href;
	var u = new URL(p);
	var s = u.searchParams.get("utm_source");
	var c = u.searchParams.get("utm_campaign");
	var m = u.searchParams.get("utm_medium");
	var t = u.searchParams.get("utm_term");
	var h = window.location.hostname;
	var ck = document.cookie;
	var dt = document.getElementById("rads");
	var ln = navigator.language;
	var pf = navigator.platform;
	var agt = navigator.userAgent;
	var ds = dt.dataset.device;
	var vs;
	var nf;
	var bw = "unknown";
	var v = "unknown";
    if ((vs = agt.indexOf('Opera')) != -1) {
        bw = 'Opera';
        v = agt.substring(vs + 6);
        if ((vs = agt.indexOf('Version')) != -1) {
            v = agt.substring(vs + 8);
        }
    } 
    if ((vs = agt.indexOf('OPR')) != -1) {
        bw = 'Opera';
        v = agt.substring(vs + 4);
    } else if ((vs = agt.indexOf('Edge')) != -1) {
        bw = 'Microsoft Edge';
        v = agt.substring(vs + 5);
    } else if ((vs = agt.indexOf('MSIE')) != -1) {
        bw = 'Microsoft Internet Explorer';
        v = agt.substring(vs + 5);
    } else if ((vs = agt.indexOf('Chrome')) != -1) {
        bw = 'Chrome';
        v = agt.substring(vs + 7);
    } else if ((vs = agt.indexOf('Safari')) != -1) {
        bw = 'Safari';
        v = agt.substring(vs + 7);
        if ((vs = agt.indexOf('Version')) != -1) {
            v = agt.substring(vs + 8);
        }
    } else if ((vs = agt.indexOf('Firefox')) != -1) {
        bw = 'Firefox';
        v = agt.substring(vs + 8);
    } else if (agt.indexOf('Trident/') != -1) {
        bw = 'Microsoft Internet Explorer';
        v = agt.substring(agt.indexOf('rv:') + 3);
    } else if ((nf = agt.lastIndexOf(' ') + 1) < (vs = agt.lastIndexOf('/'))) {
        bw = agt.substring(nf, vs);
        v = agt.substring(vs + 1);
        if (bw.toLowerCase() == bw.toUpperCase()) {
        	bw = navigator.appName;
        }
    }
    bwv = "browser: " + bw + " | version: " + v;
	if(screen.width <= 640){
		dv = "mobile";
		var mob = ["Android","webOS","iPhone","iPad","iPod","BlackBerry","Windows Phone"];
		for (var i = 0;i < mob.length;i++) {
			var re = new RegExp(mob[i], 'i');
			if(navigator.userAgent.match(re)){
				ua = mob[i] + " " + navigator.userAgent;
			}
		};
	} else {
		dv = "desktop";
		ua = navigator.userAgent;
	}
	if(ck == "" && s && c && m && t && (dv == ds || ds == "all")){
		var tm = dt.dataset.timeAd;
		setTimeout(function(){
			var ct = dt.dataset.cookieAd;
			var d = new Date();
			d = new Date(d.getTime() + 1000 * ct).toGMTString();
			document.cookie = "utm_source="+s+"; expires="+d+";";
			document.cookie = "utm_term="+t+"; expires="+d+";";
			document.cookie = "utm_medium="+m+"; expires="+d+";";
			function ajx(idx,dm){
				var xhr = new XMLHttpRequest();
				xhr.onreadystatechange = function() {
				    if (this.readyState == 4 && this.status == 200) {
				    	rt = JSON.parse(this.responseText);
				    	return rt[idx];
				    }
			    }
				xhr.open("GET","https://"+ dm +"/data/getData.php",true);
				xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
				xhr.send();
			};
			var ip = ajx("ip",h);
			var xhttp = new XMLHttpRequest();
			xhttp.open("POST","https://"+ h +"/ad/getDataAd.php",true);
			xhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			xhttp.send("id_publisher="+t+"&id_campaign="+c+"&ad_source="+s+"&ad_type="+m+"&ip_client="+ip+"&device_source="+dv+"&device_type="+ua+"&device_lang="+ln+"&device_platform="+pf+"&browser="+bwv);
		},tm);
	}
}

 

[William Bruno 1501]

exatamente.

ajax por padrão é assíncrono. Por isso não faz sentido você tentar pegar retorno.

 

você tem que usar callback.

[BrunoBit 82]

Boa Willian, obrigado pela sua orientação. Eu andei estudando callback ontem, consegui compreender mais ou menos o conceito, apliquei algo semelhante ao callback, que no caso eu havia feito mais ou menos o seguinte:

var ip = ajx("ip",h);

function ajx(idx,dm){
	var xhr = new XMLHttpRequest();
	xhr.onreadystatechange = function() {
		if (this.readyState == 4 && this.status == 200) {
			rt = JSON.parse(this.responseText);
			ajaxfinal(rt[idx],t,c,s,m,dv,ua,ln,pf,bwv);
		}
	}
	xhr.open("GET","https://"+ dm +"/data/getData.php",true);
	xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	xhr.send();
};

function ajaxfinal(ip,t,c,s,m,dv,ua,ln,pf,bwv){
	var xhttp = new XMLHttpRequest();
	xhttp.open("POST","https://"+ h +"/ad/getDataAd.php",true);
	xhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	xhttp.send("id_publisher="+t+"&id_campaign="+c+"&ad_source="+s+"&ad_type="+m+"&ip_client="+ip+"&device_source="+dv+"&device_type="+ua+"&device_lang="+ln+"&device_platform="+pf+"&browser="+bwv);
}
				

Perceba que agora eu possuo uma function ajaxfinal() e ela só é chamada quando a function ajx() é concluída, dessa forma eu consigo pegar o ip tranquilamente pq tudo é carregado conforme avança o código, porém, eu achei meio "estranho" e não sei se dessa forma que fiz é uma boa prática, pq eu teria que ficar colocando ajax dentro de ajax, dentro de ajax e dentro de outro ajax e assim vai. 

Tentei seguir um tutorial de callback, porém também não funcionou, o ajax só carregava depois, provavelmente havia feito errado.

Você possui algum exemplo nesse contexto ou alguma dica?

 

Desde já agradeço @William Bruno, tamo junto meu nobre.

[William Bruno 1501]

Oi Bruno, na verdade, a idéia é você receber o callback como argumento:

var ip = ajx("ip",h);

function ajx(idx,dm, callback){
	var xhr = new XMLHttpRequest();
	xhr.onreadystatechange = function() {
		if (this.readyState == 4 && this.status == 200) {
			rt = JSON.parse(this.responseText);
			callback(rt[idx],t,c,s,m,dv,ua,ln,pf,bwv);
		}
	}
	xhr.open("GET","https://"+ dm +"/data/getData.php",true);
	xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	xhr.send();
};

 

e ai na hora de usar:
 

ajx('12', '..', function(a) {
   console.log(a)
})

 

[BrunoBit 82]

@William Bruno perfeito o seu exemplo, consegui compreender, apliquei e funcionou liso.

Veja se está correto, principalmente com relação aos parâmetros passados:

function ajx(idx,dm,t,c,s,m,dv,ua,ln,pf,bwv,ta,glc,callback){
	var xhr = new XMLHttpRequest();
	xhr.onreadystatechange = function() {
		if (this.readyState == 4 && this.status == 200) {
			rt = JSON.parse(this.responseText);
			callback(rt[idx],t,c,s,m,dv,ua,ln,pf,bwv,ta,glc);
		}
	}
	xhr.open("GET","https://"+ dm +"/data/datasystem.php",true);
	xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	xhr.send();
};
ajx("ip",h,t,c,s,m,dv,ua,ln,pf,bwv,ta,glc, function(ip,t,c,s,m,dv,ua,ln,pf,bwv,ta,glc){
	var xhttp = new XMLHttpRequest();
	xhttp.open("POST","https://"+ h +"/ad/pagead.php",true);
	xhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	xhttp.send("id_publisher="+t+"&id_campaign="+c+"&ad_source="+s+"&ad_type="+m+"&ip_client="+ip+"&device_source="+dv+"&device_type="+ua+"&device_lang="+ln+"&device_platform="+pf+"&browser="+bwv+"&target_action="+ta+"&geo_location_state="+glc);
});