AJAX线程 - 如何等待它完成？

Question

I'm wondering how can I make my script wait for AJAX to complete:

function urlExists(testUrl){
    var ajaxurl = 'some AJAX URL';
    jQuery.ajax({
        type: "POST",
        url: ajaxurl,
        data: {
                "action": "somefunction",
                "content": testUrl
            },
        global: false,
        success: function(){
            alert('ajax successs');
            return true;
        },
        error: function(){
            return false;
        }
    });
    return false;
}

/* The AJAX function returns TRUE or FALSE 100% alright. */
/* The interesting part begins below. */

if(urlExists(src)){
    alert('test');
}else{ 
    alert('test2');
}

When AJAX returns TRUE (or FALSE) the if(urlExists(src)) always says test2 ... I bet it's because it's not waiting for AJAX to complete? But what does this do then? Why it's like that? I get test2 and soon after that ajax successs . I need it to display test message. Can someone explain me that?

Answer 1

The AJAX function returns TRUE or FALSE 100% alright.

No. It always returns false , as stated in its last line.

how to wait for it to complete?

You can't "wait" in terms of "sleeping", as it is an asynchronsous task. You will need to use a callback. With jQuery's Deferreds, it looks like this:

function urlExists(testUrl){
    return jQuery.ajax({
        type: "POST",
        url: 'some AJAX URL',
        data: {
                "action": "somefunction",
                "content": testUrl
            },
        global: false,
        success: function(){
            alert('ajax successs');
        }
    });
}
urlExists(src).done(function(){
    alert('test');
}).fail(function(){ 
    alert('test2');
}); // returns the promise immediately, but will alert later on

Answer 2

This happens because AJAX is aynchronous, meaning the AJAX call is made and execution continues without waiting for the response to come back. Thats why your urlExists () executes before the response comes. To call it after the response has arrived call in the success handler like so:

function urlExists(testUrl){
    var ajaxurl = 'some AJAX URL';
    jQuery.ajax({
        type: "POST",
        url: ajaxurl,
        data: {
                "action": "somefunction",
                "content": testUrl
            },
        global: false,
        success: function(){
            alert('ajax successs');
            if(urlExists(src)){
                 alert('test');
             }else{ 
                 alert('test2');
                  }
            return true;
        },
        error: function(){
            return false;
        }
    });
    return false;
}

/* The AJAX function returns TRUE or FALSE 100% alright. */
/* The interesting part begins below. */

Answer 3

You could make your request asynchronous, however i do not suggest it. It will result in a poor user experience any time the network or server doesn't respond quickly.

function urlExists(testUrl){
    var result;
    var ajaxurl = 'some AJAX URL';
    jQuery.ajax({
        type: "POST",
        url: ajaxurl,
        async: false, // BAD
        data: {
                "action": "somefunction",
                "content": testUrl
            },
        global: false,
        success: function(){
            alert('ajax successs');
            result = true;
        },
        error: function(){
            result = false;
        }
    });
    return result;
}

if(urlExists(src)){
    alert('test');
}else{ 
    alert('test2');
}

The recommended way is to instead use deferred objects or callbacks. Below is an example using deferreds.

function urlExists(testUrl){
    var ajaxurl = 'some AJAX URL';
    return jQuery.ajax({
        type: "POST",
        url: ajaxurl,
        data: {
                "action": "somefunction",
                "content": testUrl
            },
        global: false
    });

}

urlExists(src).done(function(){
    alert('test');
}).fail(function(){
    alert('test2');
});

also note though if you are testing for the existence of a cross-domain url, this will always fail.