Alternate ways of launching AJAX requests non-asynchronously

Question

I am in need of a better way to retrieve data from the my server and loading it into my application controller.

Currently, I am using jQuery's built in $.ajax, but due to jQuery's focus on mostly UI/UX operations it doesn't wait for the result before return the results of a request, I don't know if I'm doing this right, but this is how I have it set up currently:

var get_data = function(){
    var result = false;
    $.get('/get/some/data').done(function(awesome_data){
        result = awesome_data;
    });

    return result;
}

But this method doesn't work and just returns false.

I've read that you can just tick the async option to false, but if the user is in a high-latency environment, it can easily hang the whole application (The application I'm writing is pretty hefty).

Are there any other libraries that can do what I am trying to achieve, or is there a way to use jQuery.AJAX so that I can retrieve data from the server non-asynchronously and without hanging the application?

Thanks for the help fellas.

typically this is NOT how you want to get data from the server. get_data should return a promise object, not the data you are getting. Since ajax is asynchronous, you want to use callbacks. — Kevin B, Jul 15 '13 at 18:06

score 0 · Answer 1 · answered Jul 15 '13 at 18:15

What server-side technology are you using? Your performance issue is tacked to threading on the server generally. Slowing down ajax calls to operate synchronously is going to create more of a bottleneck because the thread is going to hang until all requests have been completed.

Consider wrapping code that is making asynchronous calls in a new thread, to allow the threads to all operate asynchronously. Typically what I find is that even asynch requests are still executed in the same thread, just at different intervals.

For example, I have a page that makes several long-lived ajax calls, each has its own spinner.

If I click a link on the page, I have to wait for all the ajax calls to complete before the click is recognized and the browser's request is handled. If the ajax calls were spun off into their own threads, if I were to click a link it would handle the request and the threads not completed would be abandoned.

score 0 · Answer 2 · answered Jul 15 '13 at 18:16

You cannot simply call the getData function.

if you called, the Ajax Request is only registered and sent and will not wait there and get result.

The statement simply sends the request and returns false immediately to you..

you have to acquire / Continue your operation at the function declared in done in $.get() itself.. like

$.get('/get/some/data').done(function(awesome_data){
    result = awesome_data;
       //  
       //    Here you have to do further.. after getting result..
       //
});

score 0 · Answer 3 · answered Jul 15 '13 at 18:17

try using a variable to detect if the ajax request is finished or not. Let's name it isAjaxRunning When you call the function you set the variable to false. In the callback of the ajax function you can set the ajax response to a global variable and set the isAjaxRunning variable to false, if you want to use the data at an unknown later time. If you want to do something at once, use the call back function to do what you need.

If you have something that depends on the ajax request being finished, check the variable. If needed you can use setTimeout() and setInterval() to check the variable again later, or just wait for the callback function to run and handle it from there.

score 0 · Answer 4 · answered Jul 15 '13 at 18:25

Retrieving data synchronously in JS without hanging the application is not possible. Don't go looking at other libraries because the core concept does not make sense given the limitations of browser JS.

But, you just need to restructure your code a little and you will be all set. Basically, break your code into a series of steps, where calls to the server occur between the steps (if it's not already like that). For instance, let's say before your code looked like this:

function update() {
    data = $.get(...);
    ... code to update your display with the data ...
}

(Instead of updating the display, you could of course be computing on that data, doing more requests, whatever.)

Try breaking that into "before" and "after" steps, instead:

function startUpdate() {
    $.get('/get/some/data').done(function(data) {
        updateDisplay(data);
    });
}

function updateDisplay(data) {
    ... code to update your display with the data ...
}

score 0 · Answer 5 · answered Jul 15 '13 at 18:29

Disclaimer: I am author of Web Atoms Product.

This is not possible, however if you want to try out our framework, which is based on Adobe Flex, we have simplified AJAX which looks synchronously but works asynchronously as property system tracks promises and you can assign promises synchronously.

However, Web Atoms requires a learning curve and it is designed to migrate applications from Adobe Flex to HTML5 with similar concepts of Adobe Flex.

http://neurospeech.com/webatoms/docs/#page=concepts%2Fatom-promise.html

<select
    atom-name="countryCombo"
    atom-type="AtomComboBox"
    atom-items="{ AtomPromise.json('country-list.json')}">
</select>

<span 
    atom-text="['Selected Country Code is ' + $scope.countryCombo.value]" >
</span>

Alternate ways of launching AJAX requests non-asynchronously

5 Answers5