Inrtoduction to AJAX
AJAX stand for: Asyncronous JavaScript And XML
A button that will call the action
The JavaScript code for AJAX action

function makeRequest() {
    var httpRequest = new XMLHttpRequest();                                 //assign variable to the request
    httpRequest.onreadystatechange = function() {                           //check if the system is idle
        if (httpRequest.readyState === XMLHttpRequest.DONE) {               //check if the process has ended
            if (httpRequest.status === 200){                                //check if the response was ok
                alert("Success!" + "\r\n" + httpRequest.responseText);
            } else {
             alert('There was a problem with the request. \r\n
             The Page has returned error number: ' + httpRequest.status)
            }
        }
    };
    httpRequest.open('GET', './00empty.html');
    httpRequest.send();
}

There are many HTTPresponses

The most important are:
200 Success
404 Page Not Found
100 Continue
201 Created
202 Accepted
204 No Content
401 UnAuthorized
403 Forbidden
500 Internal Server Error
for a list of all responses see This link on MDN

To add content to an object in the page by it's class

The Next TextArea is filled with the answer of the httpRequest when pressing the button above
With this code

document.querySelector('.firstResponse').innerHTML = 
httpRequest.responseText;

To take only part of the target page

The Next TextArea is filled only with part of the target file httpRequest when pressing the button above
With this code

var temp = document.createElement('div');               //create a div
temp.innerHTML = httpRequest.responseText;              //fill the new div with all the target page
document.querySelector('.firstResponse').innerHTML =
temp.querySelector('title').innerHTML                   //bring only the 'title' element
                                                        //any class/id or other element can be brought
back to main page