Introduction to Ajax and its use cases

Posted By :Sachin Chawla |31st March 2022

AJAX stands for Asynchronus JavaScript and XML. The main purpose of the AJAX is to load the data from the server without refreshing the browser page.To understand the usage of AJAX consider an example like Facebook, comments and reactions to the posts are made without refreshing the page.


Eg of a Ajax Request :-


	type: 'POST/GET',
	url: "",
	data: "used in case of POST request",
	success : function(response){
		alert("Request Success!");
	error : function(){
		alert("Request Failed!");



Here in the above example, $.ajax which is a jQuery Ajax request is made and a JavaScript object is passed inside it with a set of properties.


1) Type: It specifies the type of request (POST/ GET).

2) url : It specifies the url of the code to which request is made. If nothing is given then the request will be sent to the current url.

3) data: It specifies the data which is sent to server.

4) Success: It specfies a function which gets run when the request passes.

5) Error : It specifies a function which gets run when the request fails.



List of things which can be done using AJAX are :


1) File Upload : With the help of AJAX users can upload files. This comes in handy when we have to validate the file on the frontend and the user does not need to click on the submit button to submit your file/media.

This can be achieved given in the example below:-



$("#upload").click(function(e) {
    			var formData = new FormData(this);
        			url: window.location.pathname,
        			type: 'POST',
        			data: formData,
        			success: function (data) {
        		cache: false,
			contentType: false,
        		processData: false
In the above example when the user clicks on the upload button a click event gets triggered which performs the ajax call and hits the api mentioned in url property. FormData method  is used to append the file contents in a variable. 



2) Auto Compete : Autocompete feature is used to provide the auto suggestion for the user while entering input. We can use autocompete feature with the key-up event on the input field. As soon as event is triggered an Ajax call is made which fetches the data and populates the results on the dropdown.

                type: "POST",
                url: "readCountry.php",
                beforeSend: function(){
                        $("#search-box").css("background","#FFF url(LoaderIcon.gif) no-repeat 165px");
                success: function(data){


//To select country name
function selectCountry(val) {

3) Saving Authentication tokens: Some of the authentication services like gAuth generates token as soon as we login, this token is used to make requests which identifies the users. So after the authentication is done we have to store the token so that further requests can be made. Here we use Ajax to save the token into our database without reloading pages. 

About Author

Sachin Chawla

Sachin Chawla is an experienced web developer with over 3 years of expertise in a range of backend technologies. His proficiency in NodeJS, ExpressJS, MongoDB & ElasticSearch has given him a strong foundation in developing application architecture. He has worked on various web-based projects and utilized his skills to build highly functional, user-friendly applications. He is comfortable with different technologies and frameworks and continuously strives to enhance his skills to stay up-to-date with the latest trends in the field. Some of the projects he has contributed to include Wellsite AI, Nokenchain, RingCentral API Integration, and Vision360 (UK) -Konfer.

Request For Proposal

[contact-form-7 404 "Not Found"]

Ready to innovate ? Let's get in touch

Chat With Us