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

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link.. My Tech Blog - https://www.code-sample.com/ My Books - Book 1 and Book 2