How to return AJAX response Text?

Question

I use prototype to do my AJAX development, and I use the code like this:

somefunction: function(){
    var result = "";
    myAjax = new Ajax.Request(postUrl, {
        method: 'post',
        postBody: postData,
        contentType: 'application/x-www-form-urlencoded',
        onComplete: function(transport){
            if (200 == transport.status) {
                result = transport.responseText;
            }
        }
    });
    return result;
}

And I find that the "result" is an empty string. So, I tried this:

somefunction: function(){
    var result = "";
    myAjax = new Ajax.Request(postUrl, {
        method: 'post',
        postBody: postData,
        contentType: 'application/x-www-form-urlencoded',
        onComplete: function(transport){
            if (200 == transport.status) {
                result = transport.responseText;
                return result;
            }
        }
    });

}

But it didn't work also. How can I get the responseText for other method to use?

Solution 1

remember that onComplete is called long after the someFunction is done working. What you need to do is pass a callback function to the somefunction as a parameter. This function will be called when the process is done working (ie, onComplete):

somefunction: function(callback){
    var result = "";
    myAjax = new Ajax.Request(postUrl, {
        method: 'post',
        postBody: postData,
        contentType: 'application/x-www-form-urlencoded',
        onComplete: function(transport){
            if (200 == transport.status) {
                result = transport.responseText;
                callback(result);
            }
        }
    });

}
somefunction(function(result){
  alert(result);
});

Solution 2

How about adding "asynchronous: false" in your code? In my case, it worked well :)

Comments

[Luka Ramishvili]

Your answer is great, more functional/oop style, and really, really great. However, [someone]-s answer was to the point: asynchronous: false is more easy and does easier what the question author wanted (but your solution is more extensible and flexible).

[Marius]

asynchronous: false will halt the browser until the response has been received. If the network connection is slow, so it takes a few seconds to connect to the server, then the entire browser might freeze for a few seconds, and will not respond to user input. This is not good usability. It might be easier, but it does not behave well, and therefore asynchronous:false should never be used.

[Luka Ramishvili]

sorry, I hadn't actually used asynchronous before. You're right, so that's basically the same as function ajaxLoader(){var fAjaxLoaded = false;$.ajax(...,success: function(){fAjaxLoaded = true;}); while(fAjaxLoaded);return ...}

[Luka Ramishvili]

That's the same as halting javascript thread, not usable. From my experience, callbacks work better and result in more organized code (that way, my code generally consists of many functions and 5-6 mini-calls :)).

[Arvind Sridharan]

that defeats the purpose of ajax right?

[holographic-principle]

That's bad because, with synchronous requests, you're blocking all JS execution in the browser until the request returns.

[Sangram Nandkhile]

Defeats the purpose but saves your day.