1

Estou fazendo um programa que necessita ler o código-fonte de um arquivo javascript. Eu estava tentando obter o arquivo javascript via XMLHttpRequest e retornar o this.responseText, no entanto, seu valor é undefined.
Como faço para retornar o conteúdo de um arquivo javascript na forma de string(sem jQuery ou, preferencialmente, sem o uso de bibliotecas de terceiros)?

Segue o código abaixo

function getScriptStr(filepath) {
    var http = new XMLHttpRequest();
    http.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
            return this.responseText.split('\n');
        }
    };
        http.open("GET", filepath, true);
        http.send();
};
15
  • Renomeie o arquivo que você quer importar de ".js" para ".txt" Commented 7/03/2017 às 22:42
  • 1
    Porque o XMLHttpRequest retorna texto plano, e não o arquivo em si. Se você conseguisse retornar o ".js", seria apenas o texto que está contido nele, sendo assim, tanto faz ser ".txt" ou ".js" Commented 7/03/2017 às 23:05
  • 1
    @inovapixel XHR aceita sim arquivos js Commented 7/03/2017 às 23:25
  • 1
    @DenisRudneideSouza Entendi. Como eu falei, não tinha certeza, foi apenas palpite por estar retornando o "undefined". Commented 7/03/2017 às 23:27
  • 1
    Também não tinha certeza, fiz uns testes aqui para confirmar, o único erro que tive foi de CORS, mas fora isso consegui pegar qualquer conteúdo por XHR Commented 7/03/2017 às 23:28

1 Resposta 1

4

Ao utilizar XMLHttpRequest assíncrono você deves utilizar uma função de callback para retornar a resposta (caso haja) pois return sempre retornara undefined pois ele não espera "a resposta" da requisição.

Exemplo:

´´´javascript

// instanciar a API
var XHR = ( new XMLHttpRequest() );

// função
var requestGet = function(url, callback){
    // catch response
    XHR.onreadystatechange = function(){
         if( XHR.readyState == 4 && XHR.status == 200 ){
             if( callback ){
                 callback(XHR.responseText);
             }
         }
    };
    // open
    XHR.open('GET', url, true);
    // check
    if( !url || typeof url !== 'string' || url.length < 2 ){
        return false;
    }else{
        // send
        XHR.send();
    }
};

// uso:
requestGet('https://code.jquery.com/jquery-3.1.1.min.js', function(res){
    if ( res !== false ) {
         console.log(res);
    }
});

Caso queira utilizar (importar) strings no formato json deves utilizar JSON.parse() para transformar estas strings em objetos javascript novamente.

Exemplo:

´´´json
{
     "a": "abacaxi",
     "b": "bola",
     "c": "carambola"
}

´´´javascript
// variavel pré-definida
var xmlhttpObj;

// no retorno do "callback"
if ( res !== false ) {
     xmlhttpObj = JSON.parse(res);
}

// posteriormente
console.log(xmlhttpObj.c); //output: carambola

Caso queira saber mais, dados técnicos da API, suporte e outros exemplos vale a pena dar uma olhada nas referencias da Mozila (sync|async) assim como Mozila XMLHttpRequest

1
  • Ótima resposta, isso explica porque o return não estava funcionando corretamente, dado que a variável necessitava de um retorno imediato da função, e como essa era assíncrona, não podia retornar imediatamente o valor necessário, isso esclareceu muito, obrigado. Desse modo substituo o return pela atribuição de valor e coloco os passos seguintes juntamente com a função callback.
    – Gabriel C.
    Commented 9/03/2017 às 22:59

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .