Show loading animation while processing AJAX request

In this article, we are going to learn how to implement/write AJAX request code that will show loading animation while processing?
Submitted by Abhishek Pathak, on October 14, 2017

AJAX is relatively new technology. It communicates with the server and renders data without loading or refreshing the page. We have some amazing articles on AJAX tutorials, for reference. Taking up the basic reference from the basics of AJAX Getting dynamic response with AJAX, here is a simple yet perfect working AJAX request.

Code

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if(this.readyState === 4 && this.status === 200)
    alert(this.responseText);
}
xhr.open('GET', '/submit-data.php', true);
xhr.send();

First of all, create an XMLHttpRequest() object, which provides method to send and recieve response from the server. After creating an object, we define onreadystatechange event, and whenever there is any change it executes this code. The this.readyState property checks if the state is 4, which is the response has been recieved from server and also if this.status is equal to 200. Now if those conditions are met, then it means we got response from server and therefore, we alert that response using this.responseText.

Then, we need to send the data to server, which is done through open() and send() method. The open() method has 3 arguments, the method by which content has to be sent - post or get, the server URL and whether the request should be sync or async, mostly it is true. The server url is where data will be processed. The send() methods sends out the request to the server. When the response will be recieved, it will execute the onreadystatechange function, and alert out the response, if any. Also see, different ways to output data in Javascript.

A important thing to notice here is the this object, which is the instance of XMLHttpRequest() (xhr here) and the readyState property of this object. There are 5 states, starting with 0 to 4. Here we define all 5 states in AJAX.

0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready

We output the data when our request is finished and response is ready. But we have 4 states in between. Grouping the other 3 states (1^st, 2^nd and 3^rd states) process, we can show up a nice loading animation and use it instead of blank waiting. It will improve the user experience.

We are using a CSS loader, that we have an article here on how to create one. Here is the link, do check it out: Creating a loading animation with CSS.

Code (HTML with AJAX)

<html>
<head>
	<title>AJAX Loading</title>
	<style>
		.loader{width:60px;height:60px;background:0 0;border:10px solid transparent;border-top-color:#f56;border-left-color:#f56;border-radius:50%;animation:loader .75s 10 ease forwards}@keyframes loader{100%{transform:rotate(360deg)}}
	</style>

	<script>
		var xhr = new XMLHttpRequest();
		xhr.onreadystatechange = function() {
			if(this.readyState === 4)
				document.getElementById('container').innerHTML = '<div>' + this.responseText +'</div>';
			} else {
				document.getElementById('container').innerHTML = '<div class="loader"></div>';
			}
		xhr.open('GET', '/submit-data.php', true);
		xhr.send();
	</script>

</head>

<body>
	<div id='container'>
	
		<!-- The response will be printed here -->

	</div>
</body>
</html>

Breaking the code, we are simply checking if the readyState is 4, ie, response has been receieved. If it is true, we print the responseText inside the container id element, else we showing the loading screen if the readyState is other than 4, which includes all the server side processing. Notice we have added only div element with loader class. Once we get back the response, the innerHTML will replace this loader and print the this.reponseText.