Home » AJAX

Update the page after successful AJAX request

In this article, we will learn how to update the page after successful AJAX request?
Submitted by Abhishek Pathak, on October 27, 2017

AJAX shapes the modern web application dynamic functionality. It is used to update page content without reloading the page, making it work like native application. We have AJAX articles on our website, you should check them out. Learning how AJAX updates the content of the page is important as this is the basic use of AJAX, to show the update in a nice way.

In our previous article, learning AJAX basics, we show the output in form of alerts. That works, but in real applications, that harms user experience. We want something that informs user about the success in a very intuitive way. Updating the DOM is the best way people choose, and always improves the user experience.

Suppose we are sending an input from the user to the server. Once the input is processed, a server sends success message, we can replace the input element with a nice styled paragraph that shows success message. This will not only prevent the same user to enter the input twice, but also without reloading will let the user know that their response has been received at the server. We will implement the same functionality in the following example.

Code - HTML

<div id="content">
	<form class="form">

		<input type="text" id="input" name="input">
		<input type="submit" value="Send" onclick="ajaxSend()">

	</form>
</div>

Let's break this HTML code. We have a div wrapper with .content class with a form element inside.

Note that we have not provided form with any action and method attribute. It's because we will be sending data through AJAX and we can set the values there itself. Inside the form, we have an input element to get the input from user and a submit button to submit the data. On clicking this button a function ajaxSend will execute using the onclick attribute. And it will call the function which we define as follows.

Code - JavaScript

function ajaxSend() {
	//Input element
	var input = document.getElementById('input'); 
	//Content element to show message later
	var content = document.getElementById('content'); 

	var xhr = new XMLHttpRequest(); //New object created
	
	//Check for state change of this object.
	xhr.onreadystatechange = function() {
		if(this.readyState === 4 && this.status === 200) {
			//If status is 200, show success.
			content.innerHTML = "<p>Success!</p>"; 
		} else if(this.status === 400) {
			//If status is 400, show failure
			content.innerHTML = "<p>Failed.</p>"; 
		} else {
			//Else show working on webpage.
			content.innerHTML = "<p>Working...</p>" 
		}
	}
	//Open a POST request to send data
	xhr.open('POST', '/submit-data.php', true); 
	//Send the input in query url
	xhr.send('input=' + input); 
}

In this code, we are simply setting an XMLHttpRequest object xhr which will perform AJAX operations. We get the input and content element using their ids, so that we can use them. After creating object, we set a onreadystatechange function which will fire for every readyState. The readyState 4 denotes the server has sent back a response with a status code. If this status code is 200, that is ok, then show success message. Else if it is 400, then show failure message.

Otherwise, as in else condition inside the function, show working text, which means loading. Note we are changing the text inside the content element using innerHTML property. We send this request to /submit-data.php url as a POST request and in the send() method, we append the input query. Finally we send the data to the server and once server responds, the content inside the content element will be replaced by messages sent according to server response.

This is how we update data on webpage after successful AJAX request? Hope you like the article. Do check out other AJAX and JavaScript articles. Share your thoughts in comments below.

---