How can I get jQuery to perform a synchronous, rather than asynchronous, Ajax request?

Question

I have a JavaScript widget which provides standard extension points. One of them is the beforecreate function. It should return false to prevent an item from being created.

I've added an Ajax call into this function using jQuery:

beforecreate: function (node, targetNode, type, to) {
  jQuery.get('http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value),

  function (result) {
    if (result.isOk == false) 
        alert(result.message);
  });
}

But I want to prevent my widget from creating the item, so I should return false in the mother-function, not in the callback. Is there a way to perform a synchronous AJAX request using jQuery or any other in-browser API?

Solution 1

From the jQuery documentation: you specify the asynchronous option to be false to get a synchronous Ajax request. Then your callback can set some data before your mother function proceeds.

Here's what your code would look like if changed as suggested:

beforecreate: function (node, targetNode, type, to) {
    jQuery.ajax({
        url: 'http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value),
        success: function (result) {
            if (result.isOk == false) alert(result.message);
        },
        async: false
    });
}

Solution 2

You can put the jQuery's Ajax setup in synchronous mode by calling

jQuery.ajaxSetup({async:false});

And then perform your Ajax calls using jQuery.get( ... );

Then just turning it on again once

jQuery.ajaxSetup({async:true});

I guess it works out the same thing as suggested by @Adam, but it might be helpful to someone that does want to reconfigure their jQuery.get() or jQuery.post() to the more elaborate jQuery.ajax() syntax.

Solution 3

Excellent solution! I noticed when I tried to implement it that if I returned a value in the success clause, it came back as undefined. I had to store it in a variable and return that variable. This is the method I came up with:

function getWhatever() {
  // strUrl is whatever URL you need to call
  var strUrl = "", strReturn = "";

  jQuery.ajax({
    url: strUrl,
    success: function(html) {
      strReturn = html;
    },
    async:false
  });

  return strReturn;
}

Solution 4

All of these answers miss the point that doing an Ajax call with async:false will cause the browser to hang until the Ajax request completes. Using a flow control library will solve this problem without hanging up the browser. Here is an example with Frame.js:

beforecreate: function(node,targetNode,type,to) {

    Frame(function(next)){

        jQuery.get('http://example.com/catalog/create/', next);
    });

    Frame(function(next, response)){

        alert(response);
        next();
    });

    Frame.init();
}

Solution 5

function getURL(url){
    return $.ajax({
        type: "GET",
        url: url,
        cache: false,
        async: false
    }).responseText;
}


//example use
var msg=getURL("message.php");
alert(msg);

View more solutions

Comments

[Kos]

The proper way to solve that would be to rewrite your widget's extension point use promises. This way would easily allow you to set up an asynchronous action (like an ajax request) as beforecreate.

[Cody O'Dell]

I propose the Sajak function. Do we have a letter T? Yes vanna, give me 3 T's.

[Michael Westcott]

@Kos is spot on. Sync XHR is not required here

[Emmanuel Delay]

If people ask me for 1 piece of advice when starting javascript, I say: embrace the asynchronous character of javascript, don't try ty fight that.

[firstpostcommenter]

You can try using embeddedjs.com

[Vectorjohn]

This question is like asking "how do I store my user passwords in plain text?" Sure there is an answer, but don't do it.

[John Lord]

these comments are like "I know what you asked but since i don't like the way you do it, i'm going to not give a useful answer and just tell you to rethink your life choices". Sometimes synchronous calls are necessary.

[SLA80]

Exactly, it is impossible to use get(), post(), load() for synchronous calls. Only ajax() have "async" parameter, which can be set to "false".

[StuperUser]

@SLA80 Nope. Since jQuery 1.1: stackoverflow.com/questions/6849686/…

[James in Indy]

This is a Synchronous call (async:false).

[Vladimir Fokow]

Note that the use of async: false is deprecated. If you use it, you will see the following message in the console: "Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help xhr.spec.whatwg.org"

[AbhiAbzs]

Refer this: https://www.taniarascia.com/how-to-promisify-an-ajax-call/ Also you can use jqxhr variable which is returned or you can create a promise at the point of Invocation & call the function within that.