Tengo un archivo de texto en la raíz de mi aplicación web http: //localhost/foo.txt y me gustaría cargarlo en una variable en javascript ... en groovy, haría esto:

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

¿Cómo puedo obtener un resultado similar en JavaScript?

XMLHttpRequest, es decir, AJAX, sin el XML.

La manera precisa de hacerlo depende del marco de JavaScript que esté utilizando, pero si no tenemos en cuenta los problemas de interoperabilidad, su código se verá así:

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

Sin embargo, normalmente hablando, XMLHttpRequest no está disponible en todas las plataformas, por lo que se realiza un poco de falsificación. Una vez más, su mejor opción es usar un marco AJAX como jQuery.

Una consideración adicional: esto solo funcionará mientras foo.txt esté en el mismo dominio. Si está en un dominio diferente, las políticas de seguridad del mismo origen le impedirán leer el resultado.

así es como lo hice en jquery:

jQuery.get('http://localhost/foo.txt', function(data) {
    alert(data);
});

Actualización 2019: Uso de Fetch:

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

Si solo desea una cadena constante del archivo de texto, puede incluirla 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>

La cadena cargada desde el archivo se vuelve accesible para JavaScript después de ser cargada. El carácter `(retroceso) comienza y finaliza una plantilla literal , permitiendo tanto los caracteres" como "en su bloque de texto.

Este enfoque funciona bien cuando intenta cargar un archivo localmente, ya que Chrome no permitirá AJAX en las URL con el file://esquema.

Una cosa a tener en cuenta es que Javascript se ejecuta en el cliente y no en el servidor. Realmente no se puede "cargar un archivo" desde el servidor en Javascript. Lo que sucede es que Javascript envía una solicitud al servidor, y el servidor devuelve el contenido del archivo solicitado. ¿Cómo recibe Javascript los contenidos? Para eso es la función de devolución de llamada. En el caso de Edward, eso es

    client.onreadystatechange = function() {

y en el caso de danb, es

 function(data) {

Esta función se llama cada vez que llegan los datos. La versión de jQuery usa Ajax implícitamente, simplemente facilita la codificación encapsulando ese código en la biblioteca.

Actualización 2020: Uso de Fetch con async / await

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

Tenga en cuenta que awaitsolo se puede usar en una asyncfunción. Un ejemplo más largo podría 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');

Esto debería funcionar en casi todos los navegadores:

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

Además, está la nueva FetchAPI:

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

Cuando se trabaja con jQuery, en lugar de usar jQuery.get, p. Ej.

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");
});

podría usar lo .loadque le da una forma mucho más condensada:

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

.loadtambién le ofrece la opción de cargar páginas parciales que pueden ser útiles, consulte api.jquery.com/load/ .

Si su entrada fue estructurada como XML, puede usar la importXMLfunción. (Más información aquí en quirksmode ).

Si no es XML, y no hay una función equivalente para importar texto plano, entonces puede abrirlo en un iframe oculto y luego leer el contenido desde allí.