Introduction to Ajax and its use cases

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 :-

 

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

Source: https://api.jquery.com/jQuery.ajax/

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) {
    			e.preventDefault();    
    			var formData = new FormData(this);
    			$.ajax({
        			url: window.location.pathname,
        			type: 'POST',
        			data: formData,
        			success: function (data) {
            		alert(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.
 

$(document).ready(function(){
       $("#search-box").keyup(function(){
                $.ajax({
                type: "POST",
                url: "readCountry.php",
                data:'keyword='+$(this).val(),
                beforeSend: function(){
                        $("#search-box").css("background","#FFF url(LoaderIcon.gif) no-repeat 165px");
                },
                success: function(data){
                        $("#suggesstion-box").show();
                        $("#suggesstion-box").html(data);
                        $("#search-box").css("background","#FFF");
                }
                });
        });
});

//To select country name
function selectCountry(val) {
$("#search-box").val(val);
$("#suggesstion-box").hide();
}

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.