Como pegar o valor atualizado de uma propriedade (requisição ajax)? - Javascript puro
09/04/2019
0
Boa tarde.
Consegui atribuir o valor de request.responseText para minha propriedade ajaxResponse, mas não consigo acessar o valor atualizado. Exemplo: o valor que deve ser retornado por this.responseText e que, consequentemente deve ser atribuído à ajaxResponse é 'requisição chegou', mas este valor só será retornado corretamente se o usuário clicar no botão "Enviar novamente".
Veja a resposta no console: enter image description here
O que eu espero é conseguir pegar o valor atualizado da propriedade ajaxResponse por meio do método getAjaxResponse(). Trata-se de uma função genérica. Às vezes eu imprimirei na tela o valor completo do retorno, outras retornarei um JSON.
Agradeço desde já.
Consegui atribuir o valor de request.responseText para minha propriedade ajaxResponse, mas não consigo acessar o valor atualizado. Exemplo: o valor que deve ser retornado por this.responseText e que, consequentemente deve ser atribuído à ajaxResponse é 'requisição chegou', mas este valor só será retornado corretamente se o usuário clicar no botão "Enviar novamente".
var ajaxObj = {
ajaxResponse: "",
/* Tentei o que segue, mas dá na mesma
ajaxResponse: {
value: "",
writable: true,
enumerable: true,
configurable: true
}
*/
setAjaxResponse: function (value) {
this.ajaxResponse = value;
},
getAjaxResponse: function(){
if (this.ajaxResponse.length > 0) {
return this.ajaxResponse;
} else {
return "vazio";
}
},
data: {},
request: new XMLHttpRequest(),
serialize: function (form) {
this.data = new FormData(document.querySelector(form));
},
mountAndSend: function (url, data, action) {
this.data.append('action', action);
this.request.onreadystatechange = function () {
if (this.readyState == 4) {
if (this.status == 200) {
ajaxObj.setAjaxResponse(this.responseText);
} else {
var str = "<p>Atenção<p>";
str += "<p>Uma instabilidade provocou um erro. Tente novamente em 5min.</p>";
str += "<p>As informações abaixo são importantes, tire um print. Se o problema persistir, contate o administrador.</p>";
str += "<p>ReadyState = " + this.readyStat + "</p>";
str += "<p>Status = " + this.status + "</p>";
ajaxObj.setAjaxResponse(str);
}
}
};
this.request.open('POST', url, true);
this.request.send(data);
}
};
button.addEventListener('click', function () {
var data = ajaxObj.serialize('form#login');
ajaxObj.mountAndSend('ajax.php', data, 'fazer');
console.log(ajaxObj); // Veja a imagem abaixo. O atribuído ajaxObj.ajaxResponse não é devolvido/mostrado atualizado
console.log(ajaxObj.getAjaxResponse()); // Mostrará a palavra 'vazio' e só a partir da segunda vez que clicar no botão "Enviar" atualizará e mostrará 'Requisição chegou'
});
Veja a resposta no console: enter image description here
O que eu espero é conseguir pegar o valor atualizado da propriedade ajaxResponse por meio do método getAjaxResponse(). Trata-se de uma função genérica. Às vezes eu imprimirei na tela o valor completo do retorno, outras retornarei um JSON.
Agradeço desde já.
Edcp_poa
Curtir tópico
+ 0
Responder
Posts
10/04/2019
Edcp_poa
Bom dia.
Resolvi modificar o código. Talvez fique mais compreensível:
Como faço para acessar result dentro de __proto__? Desde já, obrigado.
Resolvi modificar o código. Talvez fique mais compreensível:
function serialize(form) {
var data = new FormData(document.querySelector(form));
return data;
};
var MakeAjaxConn = function (url, data, action) {
// Ação para PHP ler
data.append(''action'', action);
// Variáveis auxiliares/acessórias
var request = new XMLHttpRequest(), result = "";
request.onreadystatechange = function () {
if (request.readyState == 4) {
if (request.status == 200) {
if (request.responseText.length > 0) {
result = request.responseText;
} else {
result = ''<p>Nenhum valor retornado.</p>'';
}
} else {
result += "<p>Atenção<p>";
result += "<p>Uma instabilidade provocou um erro. Tente novamente em 5min.</p>";
result += "<p>As informações abaixo são importantes, tire um print. Se o problema persistir, contate o administrador.</p>";
result += "<p>ReadyState = " + request.readyStat + "</p>";
result += "<p>Status = " + request.status + "</p>";
}
// propriedade/atributo que deverá ser acessado mais tarde
MakeAjaxConn.prototype.result = result;
}
};
request.open(''POST'', url, true);
request.send(data);
};
button.addEventListener(''click'', function () {
// Serialização dos dados do formulário
data = serialize(''form#q'');
// Instanciação do objeto e
var ajaxObj = new MakeAjaxConn(''../app/controller/admin/ajax/login.php'', data, ''login'');
console.log(ajaxObj);
// Mostra no console:
// MakeAjaxConn{} => Estado inicial (vazio)
// __proto__: => Estado após realizada requisição
// result: "requisição chegou" => É esse valor que quero acessar e não consigo
// constructors: f(url, data, action)
// __proto__: Object
});
Como faço para acessar result dentro de __proto__? Desde já, obrigado.
Responder
10/04/2019
Edcp_poa
Problema solucionado!
A reposta é simples: tenho que adicionar uma função dentro de request.onreadystatechange para tratar request.responseText. Isso é o que chamam de callback. Eu fiz uma confusão achando que eu poderia acessar o resultado, mas não tem como.
É como na função ajax do jQuery, para tratar os possíveis resultados (erro, success, etc) é necessário criar uma função que administrará o resultado.
Sendo assim, o código ficaria assim (funcionou):
Link no StackOverflow: https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call
A reposta é simples: tenho que adicionar uma função dentro de request.onreadystatechange para tratar request.responseText. Isso é o que chamam de callback. Eu fiz uma confusão achando que eu poderia acessar o resultado, mas não tem como.
É como na função ajax do jQuery, para tratar os possíveis resultados (erro, success, etc) é necessário criar uma função que administrará o resultado.
Sendo assim, o código ficaria assim (funcionou):
function serialize(form) {
var data = new FormData(document.querySelector(form));
return data;
}
function success(value) {
if (value.length > 0) {
alert(value);
} else {
alert('<p>Nenhum valor retornado.</p>');
}
}
function error(readyStat, status){
var result = "<p>Atenção<p>";
result += "<p>Uma instabilidade provocou um erro. Tente novamente em 5min.</p>";
result += "<p>As informações abaixo são importantes, tire um print. Se o problema persistir, contate o administrador.</p>";
result += "<p>ReadyState = " + readyStat + "</p>";
result += "<p>Status = " + status + "</p>";
}
var MakeAjaxConn = function (url, data, action) {
// Ação para PHP ler
data.append('action', action);
// Variáveis auxiliares/acessórias
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
if (request.readyState == 4) {
if (request.status == 200) {
success(request.responseText);
} else {
error(request.readyStat, request.status);
}
}
};
request.open('POST', url, true);
request.send(data);
};
button.addEventListener('click', function () {
msg.innerHTML = '<div><img src="' + document.location.origin + '/public/g_imgs/load.svg"></div><div>Por favor, aguarde...</div>';
data = serialize('form#login');
var ajaxObj = new MakeAjaxConn('./somepage.php', data, 'something');
});
Link no StackOverflow: https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call
Responder
Clique aqui para fazer login e interagir na Comunidade :)
