Como pegar o valor atualizado de uma propriedade (requisição ajax)? - Javascript puro
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
Curtidas 0
Respostas
Edcp_poa
09/04/2019
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.
GOSTEI 0
Edcp_poa
09/04/2019
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
GOSTEI 0