jQuery AJAX - Synchronous Request

The Synchronous Request blocks the client DOM/ browser until your operations is completed.

It is basically hold and wait process. The second process will execute after first one is completed and when a synchronous call occurred that time the DOM/browser both are blocked.

A Synchronous call opens a socket and waits for a response before closing the socket.

The operations (send, receive, and reply) will be Synchronous or Asynchronous.

The every blocking operation is not synchronous operations and it may be other operations.

By default, the $.ajax request in jQuery is set to asynchronous and we can set (async: false) for synchronous operations otherwise (async: true).

For Asynchronous request click...

Example – AJAX Synchronous Call

//AJAX Synchronous and Asynchronous Requests.

//#REGION NAMESPACE
var demo = demo || {};
//#ENDREGION

demo.ajax = demo.ajax || (function () {

    var getBaseURL = function () {
        var currentBaseURL = location.protocol + "//" + location.hostname +
            (location.port && ":" + location.port) + "/";
        return currentBaseURL;
    };

    var baseURL = getBaseURL();
    var request_token;

    var ajaxAsyncCall = function (requestURL, typeGP, inputs, request_token) {

        $.ajax({
            url: requestURL,
            type: typeGP,
            contentType: "application/json; charset=utf-8",
            data: inputs,
            beforeSend: function (xhr) {
                xhr.setRequestHeader("Request_Token", request_token)
            },
            async: true,
            cache: false,
            success: function (data) {
                if (data !== undefined && data !== null) {
                    if (data.Code == "OK") {
                        alert("Success");
                        return false;
                    }
                    else if (data.Code == "ERROR") {
                        alert('Error - ' + data.Message);
                        return false;
                    }
                }
            }
        });
    };

    var ajaxSyncCall = function (requestURL, typeGP, inputs, request_token) {

        $.ajax({
            url: requestURL,
            type: true,
            contentType: "application/json; charset=utf-8",
            data: inputs,
            beforeSend: function (xhr) {
                xhr.setRequestHeader("Request_Token", request_token)
            },
            async: false,
            cache: false,
            success: function (data) {
                if (data !== undefined && data !== null) {
                    if (data.Code == "OK") {
                        alert("Success");
                        return false;
                    }
                    else if (data.Code == "ERROR") {
                        alert('Error - ' + data.Message);
                        return false;
                    }
                }
            }
        });
    };

    return {
        baseURL:baseURL,
        ajaxAsyncCall: ajaxAsyncCall,
        ajaxSyncCall: ajaxSyncCall
    }
})();

//Use of common Synchronous and Asynchronous methods.

//GET CUSTOMERS LIST WITH SYNC CALL.
demo.ajax.ajaxSyncCall(demo.ajax.baseURL + "API/Users/GetUsersRequest", 'GET', null, function (data) {
    if (data != undefined) {
        successGetCustomers(data);
    }
}, null);


var successGetCustomers = function (data) {
    if (data) {
        console.log(data);
        //TODO: As PER YOU!
    }
};

SHARES

Share

Pin it

Tweet

Share

Share

Share

Buffer

Print

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link.. My Blogs - http://code-sample.com and http://code-sample.xyz My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like