fetch basics in AJAX

Let's now see how to load part of a page using AJAX. Let's have a div and a button on our index.html page (the content of body is shown here):

<div></div>
<button>click me</button>

Let's also have the ajax.html page that has three paragraphs (no page tags, just paragraphs):

<p>1</p>
<p>2</p>
<p>3</p>

Let's make it so that when the button on the index.html page is clicked, the content of the ajax.html page is loaded into the div.

To do this, first we get references to our elements into variables:

let div    = document.querySelector('div');
let button = document.querySelector('button');

Let's add a click handler to the button:

button.addEventListener('click', function() {
	// here we will perform an AJAX request
});

Let's make an AJAX request now. For this, the fetch function is used, which receives as a parameter the address of a page whose contents we want to get. We specify the ajax.html page address on our server:

button.addEventListener('click', function() {
	let result = fetch('/ajax.html'); 
});

fetch will return promise as its result. The fact is that requesting a page via AJAX is an asynchronous operation, because it will take some time for the page to respond to us.

Let's get a result of the promise:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html'); 
	
	promise.then(function(response) {
		// a server's response is in the response variable
	});
});

We simplify by getting rid of an extra variable:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(function(response) {
		
	});
});

Let's simplify with an arrow function:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(response => {
		
	});
});

And put it in a more readable way:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			
		}
	);
});

The response variable contains a fairly complex object of the Response class:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(response => {
		console.log(response); // an object of the Response class
	});
});

We will study this object in depth in the next lessons, but for now we need the simplest thing - to obtain a text of the requested page. To do this, this object has the text method. This method, however, doesn't return the text of the page, but a promise with its text:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			console.log(response.text()); // shows a Promise
		}
	);
});

To get to the text of the page, the promise obtained from response.text needs to be handled again:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			return response.text();
		}
	).then(
		text => {
			console.log(text); // a page text
		}
	);
});

So, we finally got the text of the requested page and we can, for example, write it to our div:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			return response.text();
		}
	).then(
		text => {
			div.innerHTML = text;
		}
	);
});

Given three buttons and a div. There are three pages on a server. Make each of the buttons load the corresponding page into the div.

Suppose there are five pages on a server. Let the first click on the button load the first page, the second click - the second, and so on, until the pages run out.