Demos of Fetch, some possible uses

Read a file on demand

Reads the text file from the server and displays its contents on the page, in the "zone" tag below...
This very simple code can work locally. It's similar to the code on the Fetch page, but this time associated with a form.

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>

Check for file existence

Simple demo to check if a file exists.
The script attempts to read a file's header, and throws an error message if the file is not found...

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 + " not found error + error.message;
	  }
	  
	 } 
	 fileExist(url);	
}

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

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

To lnow the date of a file

Date when fetch.txt was last modified

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

Form and XML

Fill out a form with values ​​taken from an XML document.

Loads the fetchform.xml file, converts the text into tags, and accesses the tag content to copy it into the form fields.

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>

Read and insert another HTML page

This demo consists of a JavaScript function and a tag. To use the new feature, simply copy the three lines of code marked in the source code and paste them into the page that will load another HTML page.
Works locally or on the web, and with any browser.

HTML Code :

<FORM name="" method="POST" action="">
<INPUT type="BUTTON" value="Load the HTML page and insert contents"
     ONCLICK="loadHTMLPage('anotherpage.html')">
</FORM>

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

JavaScript Code :

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