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?

score 29 · Accepted Answer · answered Aug 04 '09 at 04:01

29

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);
});

answered Aug 04 '09 at 04:01

Marius

57,995
32
132
151

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). – Luka Ramishvili Feb 28 '12 at 11:28
1

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**. – Marius Feb 28 '12 at 11:57
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 Feb 28 '12 at 20:15
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 :)). – Luka Ramishvili Feb 28 '12 at 20:19

score 3 · Answer 2 · answered Aug 10 '10 at 14:57

3

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

answered Aug 10 '10 at 14:57

someone

47
1

that defeats the purpose of ajax right? – Arvind Sridharan Mar 29 '13 at 06:31
5

That's bad because, with synchronous requests, you're blocking all JS execution in the browser until the request returns. – holographic-principle Jun 29 '13 at 09:26
2

Defeats the purpose but saves your day. – Sangram Nandkhile Jun 14 '14 at 18:42

How to return AJAX response Text?

2 Answers2

Linked

Related