# 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.

←→
↑
en ru