Comment charger le contenu d'un fichier texte dans une variable javascript ?

Question

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

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

Comment puis-je obtenir un résultat similaire en javascript ?

Answer 1

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

La manière précise de procéder dépend du framework JavaScript que vous utilisez, mais si nous ne tenons pas compte des problèmes d'interopérabilité, votre code ressemblera à quelque chose comme ça :

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, et il faut donc procéder à quelques manipulations. Une fois encore, votre meilleure chance est d'utiliser un framework AJAX comme jQuery.

Une considération supplémentaire : cela ne fonctionnera que si foo.txt se trouve sur le même domaine. S'il se trouve sur un domaine différent, les politiques de sécurité de type same-origin vous empêcheront de lire le résultat.

Answer 2

Voici comment je l'ai fait en jquery :

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

Answer 3

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

Answer 4

Si vous ne voulez qu'une chaîne constante du fichier texte, vous pouvez l'inclure en tant que 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 de caractères chargée à partir du fichier devient accessible à JavaScript après avoir été chargée. Le caractère `(backtick) commence et termine un fichier modèle littéral ce qui permet d'utiliser les caractères " et ' dans votre bloc de texte.

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

Answer 5

Mise à jour 2020 : Utilisation de Aller chercher avec async/await

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

Notez que await ne peut être utilisé que dans un async fonction. 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');