Como pegar o valor atualizado de uma propriedade (requisição ajax)? - Javascript puro

09/04/2019

4

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".

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á.
Responder

Posts

10/04/2019

Edcp_poa

Bom dia.

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):

    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