Show loading image while $.Ajax ASYNC SYNC is performed

How to show progress bar while loading using Ajax call?

The AJAX Request maybe ASYNC or SYNC!

Stayed Informed – Best JavaScript Interview Questions & Answers

Table of Context –

1. HTML

2. CSS

3. JavaScript and Ajax Request

HTML Code –

<div id="wait" class="ajax-loader">
        <div class="ajax-loader-img"><img src='~/Images/loader-ui/loading_2x.gif' /><br>wait...</div>        
</div>

CSS Code –

.ajax-loader {
    display:none;position:absolute;width:100%; height:100%; z-index:99999; background-color:rgba(256,256,256,0.4);
}

.ajax-loader-img {
   position:absolute;top:50%;left:50%;padding:2px;
}

AJAX ASYNC and SYNC REQUEST Code –

//#region AJAX ASYNC REQUEST

    var asyncCall = function (url, data, GETPOST, callback, arr_hdrs) {
        var global = pm.baseConst;
            $.ajax({
                url: global.baseUrl + url,
                type: GETPOST,
                contentType: global.contentType,
                data: data,
                beforeSend: function (xhr) {
                     //THIS IS USED FOR DISPLY LOADING WAIT.. AFTER POST CALL!
             if (GETPOST !== undefined && GETPOST !== null) {
              if (GETPOST.toLowerCase() === 'post' || GETPOST.toLowerCase() === 'put')
                  $("#wait").css("display", "block");
              }
                },
                async: true,
                cache: false,
                success: function (data) {
                    //FOR LOADING ICON DISPLAY BLOCK HERE..
                    $("#wait").css("display", "none");

                    if (data !== undefined && data !== null && data !== "") {                       
                        if (data.Code !== undefined && data.Code !== null && data.Code !== "") {
                            if (data.Code.toLowerCase() === "ok") {
                                callback(data);                        
                            }
                            else if (data.Code.toLowerCase() === "error") {
                                pm.dialog.alertDialog('error', 'Error', 'Error', data.Message, null);
                            }
                            else if (data.Code.toLowerCase() === "warning") {
                                pm.dialog.alertDialog('info', 'Information', 'Information', data.Message, null);
                            }
                            else {
                                pm.dialog.alertDialog('error', 'Error', 'Error', pm.constant.request.unableToProcessYourRequest, null);
                            }
                        }                   
                        else {
                            callback(data);
                        }
                    }
                    else if (data === null) {
                        callback(data);
                    }
                    else {
                        pm.dialog.alertDialog('error', 'Error', 'Error', pm.constant.request.unableToProcessYourRequest, null);
                    }                   
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    jqXHRError(jqXHR, errorThrown);
                },
                complete: function () {
                    //FOR LOADING ICON DISPLAY BLOCK HERE..
                    $("#wait").css("display", "none");
                }
            })
            .fail(function (jqXHR, textStatus, errorThrown) {
                jqXHRError(jqXHR, errorThrown);
            });
    };

//#endregion