Writing generic ajax function in javascript using jquery

In most of the application where frameworks like AngularJS/ React are not being used and simply made with javascript and Jquery, It is important to make use of reusable and generic components which will make things easier for the developer and maintenance.

Advantages:

  1. A common set of functionalities can be applied to the ajax function call instead of duplicating it through the application.
  2. Example: request progress event, error handling on failed request.

Implementation:

Code Example: Jquery ajax function is used here.

//generic ajax function
var methodTypePost = "POST";
var methodTypeGet = "GET";
function callAjaxMethod(url,method, parameters, successCallback) {
	
	try {
		$.ajax({
			type: method,
			url: url,
			data: parameters,
			cache: false,
			beforeSend : function(){
				//enable loader
				$('.loader').fadeIn();
			},
			success: successCallback,
			error: function(xhr, textStatus, errorThrown) {
				//console.log(errorThrown);
				$('.loader').fadeOut();
			},
			complete : function(){
				//disable loader
				$('.loader').fadeOut();
			}
		});
	} catch (e) {
		console.log(e);
	}
};

Ajax Handler used to call ajax events

//common ajax handler to run ajax request
var ajaxHandler = function(url, methodType, parameters, func) {
	
	function onSuccess(response) {
		//response = response.trim();
		if(response === 'SESSION_EXPIRED'){
		    alert("Your session is expired. Please login to continue.");
		    window.location.href = 'login.htm?auth=1';
		}
		else
			func(response);
	};
	try {
		callAjaxMethod(url, methodType, parameters, onSuccess);
	} catch (e) {
		console.log(e);
	}
};

Example how to use this generic ajax event:

//sample code to make ajax call
var url = "test.html";
var dataParams = { name : 'hello'};
ajaxHandler(url,methodTypePost,dataParams,function(data) {
	if(data !== "INVALID_PARAMETERS") {
		//appropriate feedback to the user.	
	}
	else {
		alert("There is a problem on server side. Please try again later.");
	}
	console.log(data);
});

Now, This common generic function can be included in the common file of the application and from anywhere it can be used to call ajax events.

Feel free to contact me or suggest an appropriate change in this post. I am not the perfect guy. 😀 🙂 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.