What's a non-deprecated way of doing a synchronous ajax call using jQuery?

Question

I've got a small javascript function that's only purpose is to call a script to get some data from the database so it can be used by other functions on the client side.

I'm using a jQuery call to get the data but for me to pass the object out of the success functions scope I need to turn asynchronous off which raises a deprecation warning.

My function works as intended currently but I'd like to use a method that isn't deprecated. Here is my function:

function getData(ID) {
  var Data = {};
  $.ajax({
    url: 'script',
    method: 'POST',
    dataType: 'json',
    async: false,
    data: {action: 'get', id: ID },
    success: function(response) {
      Data = response;
    })
  });
  return Data;
}

I've changed the variable names for privacy reasons so apologies if they're vague.

Also why is synchronous calls considered harmful to the end users experience?

@Keatinge Why do you say that? It's currently returning the object as intended every time. — Fashim, Jun 20 '17 at 05:01
@Keatinge I think it'll work because of the `async: false` option that's been passed into `$.ajax()` — Chitharanjan Das, Jun 20 '17 at 05:01
You might want to take a look at [How do I return the response from an asynchronous call?](https://stackoverflow.com/q/14220321/218196). There I am also saying about sync calls: *"Why is it bad do you ask? JavaScript runs in the UI thread of the browser and any long running process will lock the UI, making it unresponsive. Additionally, there is an upper limit on the execution time for JavaScript and the browser will ask the user whether to continue the execution or not."* — Felix Kling, Jun 20 '17 at 05:11
To answer your question though: There is no non-deprecated way to make a synchronous network request. Synchronous is deprecated. — Felix Kling, Jun 20 '17 at 05:13

Parixit · Accepted Answer · 2017-06-20T05:11:20.850

5

As AJAX call is asynchronous, you will always get blank object ({}) in response.

There are 2 approach.

You can do async:false
To get response returned in AJAX call try like below code. Which wait for response from server.


function getData(ID) {
  return $.ajax({
    url: 'script',
    method: 'POST',
    dataType: 'json',
    //async: true,  //default async call
    data: {action: 'get', id: ID },
    success: function(response) {
         //Data = response;
    })
  });
}


$.when(getData(YOUR_ID)).done(function(response){
    //access response data here
});

edited Jun 20 '17 at 05:11

answered Jun 20 '17 at 05:04

Parixit

3,829
3
37
61

Ahh cool I haven't seen the use of $.when before, why is it considered deprecated to turn async to false though? – Fashim Jun 20 '17 at 05:09
2

Why are you using `$.when` if you set `async: false`? – Felix Kling Jun 20 '17 at 05:10
@FelixKling I think he just copy-pasted my code to show his example. – Fashim Jun 20 '17 at 05:11
@Fashim yes. Felix: I have changed – Parixit Jun 20 '17 at 05:11
@Fashim Please check this for more details of deprecation. https://stackoverflow.com/questions/11448011/jquery-ajax-methods-async-option-deprecated-what-now – Parixit Jun 20 '17 at 05:13
I see. There is no need to use `$.when` though. You could just do `getData(...).done(...)`. `$.when` is only useful if you need to wait for multiple calls. – Felix Kling Jun 20 '17 at 05:14
@FelixKling Yes, but this is used when you want to call function (contains AJAX call) from somewhere else and you want to manipulate response there. Consider a case of common function for AJAX call? – Parixit Jun 20 '17 at 05:17
No, as I said, you can do the same thing with just `getData(...).done(...)`. If you pass a single argument to `$.when` it just returns that same value, i.e. `$.when(getData()) === getData()` (basically, of course two calls to `getData()` return different values). `$.when` is only needed if you need to wait for *multiple Ajax calls*, e.g. `$.when(doA(), doB(), doC()).done(...)`. – Felix Kling Jun 20 '17 at 05:30
@FelixKling Oh, I didn't aware that we can use `getData(ID_CHECK).done(...)`. – Parixit Jun 20 '17 at 05:41
Thanks man This really solves the problem of getting response from ajax success callback – MR_AMDEV May 19 '19 at 11:33

What's a non-deprecated way of doing a synchronous ajax call using jQuery?

1 Answers1

Linked