Como carrego o conteúdo de um arquivo de texto em uma variável javascript?

155

Eu tenho um arquivo de texto na raiz do meu aplicativo da web http: //localhost/foo.txt e gostaria de carregá-lo em uma variável em javascript .. no groovy, faria o seguinte:

def fileContents = 'http://localhost/foo.txt'.toURL().text;
println fileContents;

Como posso obter um resultado semelhante em javascript?

danb
fonte

Respostas:

142

XMLHttpRequest, ou seja, AJAX, sem o XML.

A maneira precisa de fazer isso depende da estrutura JavaScript que você está usando, mas se desconsiderarmos os problemas de interoperabilidade, seu código será semelhante a:

var cliente = novo XMLHttpRequest ();
client.open ('GET', '/foo.txt');
client.onreadystatechange = function () {
  alerta (client.responseText);
}
client.send ();

Normalmente, no entanto, o XMLHttpRequest não está disponível em todas as plataformas, portanto, alguns truques são feitos. Mais uma vez, sua melhor aposta é usar uma estrutura AJAX como o jQuery.

Uma consideração extra: isso funcionará apenas enquanto foo.txt estiver no mesmo domínio. Se estiver em um domínio diferente, as políticas de segurança da mesma origem impedirão que você leia o resultado.

Edward Z. Yang
fonte
1
Uma solução alternativa para a política de mesma origem está usando JSONP que também é suportado pelo jQuery (para a parte do lado do cliente)
OneWorld
3
pode ser útil adicionar que, dentro de onreadystatechange, você pode acessar a propriedade readystate do XMLHttpRequest Object (no exemplo: client.readystate) para saber qual é o status, pois o evento onreadystatechange é gerado para carregamento, carregamento, .. .. portanto, você deve aguardar client.readystate == 4 dentro de onreadystatechange antes de poder usar client.responseText.
GameAlchemist 19/10/12
2
@ GameAlchemist: deparou com sua grande resposta. Eu só queria notar que na maioria dos navegadores readyState é camelo encaixotado, de modo que o código deve ser algo como isto:if (client.readyState === 4){ }
snorpey
6
Além disso, você pode fazer client.onloadende obter os dados completos #
Athena
2
A resposta deve ser redigida para incluir a verificação do client.readyStatevalor da propriedade. Estou com voto negativo até que seja, as pessoas não vão ler os comentários para descobrir que a resposta é apenas parcialmente correta.
amn
84

aqui está como eu fiz isso no jquery:

jQuery.get('http://localhost/foo.txt', function(data) {
    alert(data);
});
danb
fonte
que parece não funcionar com dados de texto em tabela sem formatação ( docs.jquery.com/Specifying_the_Data_Type_for_AJAX_Requests )
pufferfish
7
Observe que isso não funciona se você está testando-lo localmente usando file://ou seja: file:///example.com/foo.html. O Firefox reclama de um erro de sintaxe e o Chrome bloqueia porque o considera uma solicitação de origem cruzada.
Akronix 28/08/2015
@pufferfish funcionará com dados simples, se você especificar o dataTypeparâmetro, consulte api.jquery.com/jQuery.get/
yvesonline
1
@ Akronix, se você deixar de fora a http://...parte, porque ela vive no mesmo domínio, funcionará, por exemplo jQuery.get("foo.txt", ...).
Yvesonline 27/12/15
@Akronix Existe uma maneira fácil de testá-lo localmente? Eu continuo recebendo erros de solicitação de origem
cruzada
50

Atualização 2019: Usando a busca:

fetch('http://localhost/foo.txt')
  .then(response => response.text())
  .then((data) => {
    console.log(data)
  })

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Vic
fonte
4
Sim A busca é um padrão (recente), não uma extensão proprietária.
Laurent Caillette
1
É 2019, e buscar é uma coisa de beleza. Este é o caminho para todos os navegadores modernos, incluindo Samsung Internet, o que só pego ...
Dave Everitt
Um código compacto e funcional, Vic, obrigado. Para conseguir o tratamento de erros, seria possível colocar algum response.ok(ou equivalente) em algum lugar do seu código? Como não tenho muita experiência fetch, não sei o local exato para defini-lo.
Sopalajo de Arrierez 02/12/19
Ótima solução. Isso foi super fácil, mesmo para um iniciante completo. Armazenado na variável em vez de console.log na última etapa, agora pode ser usado em qualquer lugar.
AveryFreeman
27

Se você quiser apenas uma sequência constante do arquivo de texto, inclua-a como JavaScript:

// This becomes the content of your foo.txt file
let text = `
My test text goes here!
`;
<script src="foo.txt"></script>
<script>
  console.log(text);
</script>

A sequência carregada do arquivo se torna acessível ao JavaScript depois de carregada. O caractere `(backtick) inicia e termina um literal de modelo , permitindo caracteres" e "no seu bloco de texto.

Essa abordagem funciona bem quando você está tentando carregar um arquivo localmente, pois o Chrome não permite o AJAX em URLs com o file://esquema.

Erik Uggeldahl
fonte
1
Essa seria uma solução realmente eficiente. Porém, o literal de modelo não é suportado no IE11 e a variável "let" fica fora do escopo quando dentro de um bloco de função, portanto, essa implementação é repleta de perigos - cuidado.
Neville
7

Uma coisa a ter em mente é que o Javascript é executado no cliente, e não no servidor. Você realmente não pode "carregar um arquivo" do servidor em Javascript. O que acontece é que o Javascript envia uma solicitação ao servidor, e o servidor envia de volta o conteúdo do arquivo solicitado. Como o Javascript recebe o conteúdo? É para isso que serve a função de retorno de chamada. No caso de Edward, isso é

    client.onreadystatechange = function() {

e no caso de danb, é

 function(data) {

Essa função é chamada sempre que os dados chegam. A versão do jQuery usa implicitamente o Ajax, apenas facilita a codificação, encapsulando esse código na biblioteca.

atmelino
fonte
7

Atualização 2020: Usando a busca com async / waitit

const response = await fetch('http://localhost/foo.txt');
const data = await response.text();
console.log(data);

Observe que awaitsó pode ser usado em uma asyncfunção. Um exemplo mais longo pode ser

async function loadFileAndPrintToConsole(url) {
  try {
    const response = await fetch(url);
    const data = await response.text();
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}

loadFileAndPrintToConsole('https://threejsfundamentals.org/LICENSE');

gman
fonte
5

Isso deve funcionar em quase todos os navegadores:

var xhr=new XMLHttpRequest();
xhr.open("GET","https://12Me21.github.io/test.txt");
xhr.onload=function(){
    console.log(xhr.responseText);
}
xhr.send();

Além disso, há a nova FetchAPI:

fetch("https://12Me21.github.io/test.txt")
.then( response => response.text() )
.then( text => console.log(text) )
12Me21
fonte
1

Ao trabalhar com jQuery, em vez de usar jQuery.get, por exemplo

jQuery.get("foo.txt", undefined, function(data) {
    alert(data);
}, "html").done(function() {
    alert("second success");
}).fail(function(jqXHR, textStatus) {
    alert(textStatus);
}).always(function() {
    alert("finished");
});

você pode usar o .loadque lhe dá uma forma muito mais condensada:

$("#myelement").load("foo.txt");

.loadtambém oferece a opção de carregar páginas parciais que podem ser úteis, consulte api.jquery.com/load/ .

yvesonline
fonte
-3

Se sua entrada foi estruturada como XML, você poderia usar a importXMLfunção (Mais informações aqui em quirksmode ).

Se não for XML e não houver uma função equivalente para importar texto sem formatação, você poderá abri-lo em um iframe oculto e ler o conteúdo a partir daí.

nickf
fonte