Demos Fetch, les utilisations possibles

Lire un fichier sur demande

Lit le fichier de texte sur le serveur et en affiche le contenu sur la page, dans la balise "zone", ci-dessous...
Ce code très simple peut fonctionner localement. Il est similaire on code de la page Fetch, mais associé cette fois à un formulaire.

Code :

<div id="texthere"></div>

<script>
function submitLoad() { 
	var disptext = document.getElementById('texthere');
	async function loadText(fname) {
		var str = await fetch(fname)
		disptext.innerHTML = await str.text()
	}
	loadText("fetch.txt")
} 
</script>

<FORM name="readtxt" method="POST" action="">
  <input type="BUTTON" value="Soumettre"  onClick="submitLoad()">
</FORM>

Vérifier l'existence d'un fichier

Démo simple pour vérifier qu'un fichier existe.
Le script tente de lire l'en-tête d'un fichier, envoie un message d'erreur si le fichier n'est pas trouvé...

Code :

function submitExists(url) { 
	var dispresult = document.getElementById('dispresult');
	
	async function fileExist() {
	  try {
    	const response = await fetch(url);
		if (!response.ok) {
		     throw new Error(response.status);
    	}
	    dispresult.innerHTML = await response.text();
	  } 
	  catch (error) {
    		dispresult.innerHTML = url + " non trouvé erreur " + error.message;
	  }
	  
	 } 
	 fileExist(url);	
}

<FORM name="" method="POST" action="">
	<INPUT type="BUTTON" CLICK="submitExists('fetch.txt')">
	<INPUT type="BUTTON "ONCLICK="submitExists('nonreel.txt')">
</FORM>

<div id="dispresult"></div>

Connaître la date d'un fichier

Date de dernière modification de fetch.txt

test1

Code :

async function fetchLastModified(url) {
  const response =  await fetch(url, { method: "HEAD" });
  const lastModified = new Date(response.headers.get('Last-Modified'));
  return lastModified;
}
async function storeDate(url) {
  document.getElementById("date1").innerHTML = await fetchLastModified(url) ;
}

window.onload = (event) => {
  storeDate("fetch.txt");
};

Formulaire et XML

Remplir un formulaire avec des valeurs prises dans un document XML.

Charge le fichier fetchform.xml, convertit le texte en balises, et accède au contenu des balises pour les recopier dans les champs du formulaire.

Code :

function processData(doc)
{
  var element = doc.getElementsByTagName('one').item(0);
  document.form1.one.value= element.firstChild.data;
  document.form1.two.value= doc.getElementsByTagName('two').item(0).firstChild.data;
  document.form1.three.value= doc.getElementsByTagName('three').item(0).firstChild.data;
}
async function loadXML() { 
	try {
		await fetch("fetchform.xml")
	    .then(response => {
			if (!response.ok) { throw new Error(response.status); }
        	return response.text();
	    })
    	.then(xmlText => {
        	const parser = new DOMParser();
	        const xmlDoc = parser.parseFromString(xmlText, 'text/xml');
    	    processData(xmlDoc);
    	})
	}	
    catch(error) { document.form1.one.value = error.message;}
}
	
function submitXML() { 
	loadXML();	
}

<FORM name="form1" method="POST" action="">
<INPUT type="BUTTON" value="Remplir"  ONCLICK="submitXML()">
<INPUT type="text" name="one" size="32" value="">
<INPUT type="text" name="two">
<INPUT type="text" name="three">
</FORM>

Lire une autre page HTML

Cette démo se compose d'une fonction JavaScript et d'une balise. Pour disposer de la nouvelle fonction il suffit de copier les trois lignes de code marquées dans le source, et les coller dans la page qui doit charger une autre page HTML.
Fonctionne localement ou sur le Web, et avec tout navigateur.

Code HTML:

<FORM name="" method="POST" action="">
<INPUT type="BUTTON" value="Charger page HTML et insérer contenu"
     ONCLICK="loadHTMLPage('autrepage.html')">
</FORM>

<div id="storage"></div>

Code JavaScript :

function getBody(content) {
   var x = content.indexOf("</body>", x);
   if(x == -1) return "";
   x = content.indexOf(">", x);
   if(x == -1) return "";
   var y = content.lastIndexOf("</body>");
   if(y == -1) y = content.lastIndexOf("</html>");
   if(y == -1) y = content.length;    // If no HTML then just grab everything till end
   return content.slice(x + 1, y);   
} 

async function loadPage(url) { 
  var storage = document.getElementById('inserthere');
  async function loadHTML(fname) {
    await fetch(fname).then(response => {
       return response.text();
    )
    .then(pageContent => {
       storage.innerHTML = getBody(pageContent);	
     })	
  }
  loadHTML(url);
} 

async function loadHTMLPage(url) {
  await loadPage(url);
}