J'ai un fichier texte à la racine de mon application web http: //localhost/foo.txt et j'aimerais le charger dans une variable en javascript .. dans groovy je ferais ceci:

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

Comment obtenir un résultat similaire en javascript?

XMLHttpRequest, c'est-à-dire AJAX, sans le XML.

La manière précise dont vous faites cela dépend du framework JavaScript que vous utilisez, mais si nous ignorons les problèmes d'interopérabilité, votre code ressemblera à ceci:

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

Normalement, cependant, XMLHttpRequest n'est pas disponible sur toutes les plates-formes, donc un peu de fudgery est fait. Encore une fois, votre meilleur pari est d'utiliser un framework AJAX comme jQuery.

Une considération supplémentaire: cela ne fonctionnera que tant que foo.txt est sur le même domaine. S'il s'agit d'un domaine différent, les politiques de sécurité de même origine vous empêcheront de lire le résultat.

voici comment je l'ai fait dans jquery:

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

Mise à jour 2019: Utilisation 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 vous ne voulez qu'une chaîne constante du fichier texte, vous pouvez l'inclure en 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 chaîne chargée à partir du fichier devient accessible à JavaScript après avoir été chargée. Le caractère `(backtick) commence et termine un littéral de modèle , permettant à la fois les caractères" et 'dans votre bloc de texte.

Cette approche fonctionne bien lorsque vous essayez de charger un fichier localement, car Chrome n'autorisera pas AJAX sur les URL avec le file://schéma.

Une chose à garder à l'esprit est que Javascript s'exécute sur le client et non sur le serveur. Vous ne pouvez pas vraiment "charger un fichier" depuis le serveur en Javascript. Ce qui se passe, c'est que Javascript envoie une requête au serveur, et le serveur renvoie le contenu du fichier demandé. Comment Javascript reçoit-il le contenu? C'est à cela que sert la fonction de rappel. Dans le cas d'Edward, c'est

    client.onreadystatechange = function() {

et dans le cas de danb, c'est

 function(data) {

Cette fonction est appelée chaque fois que les données arrivent. La version jQuery utilise implicitement Ajax, elle facilite simplement le codage en encapsulant ce code dans la bibliothèque.

Mise à jour 2020: Utilisation de Fetch avec async / await

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

Notez que awaitne peut être utilisé que dans une asyncfonction. Un exemple plus long pourrait être

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');

Cela devrait fonctionner dans presque tous les navigateurs:

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

De plus, il y a la nouvelle FetchAPI:

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

Lorsque vous travaillez avec jQuery, au lieu d'utiliser jQuery.get, par exemple

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

vous pouvez utiliser .loadce qui vous donne une forme beaucoup plus condensée:

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

.loadvous donne également la possibilité de charger des pages partielles qui peuvent être utiles, voir api.jquery.com/load/ .

Si votre entrée était structurée en XML, vous pouvez utiliser la importXMLfonction. (Plus d'informations ici à quirksmode ).

S'il ne s'agit pas de XML et qu'il n'y a pas de fonction équivalente pour importer du texte brut, vous pouvez l'ouvrir dans une iframe cachée, puis lire le contenu à partir de là.