处理ajax异步调用

Question

Related to the following question.

Empty variables when calling javascript function

I'm seeking some guidance on how to ensure I get all results from ajax calls.

In particular, this time the problem is with the getPublicIPAddress() function and its ajax call.

function genericYiiLocation(callback) {

//console.log('genericYiiLocation: Creating location handler');

this.longitude=  '';
this.latitude=   '';
this.accuracy=   '';
this.publicIpAddress= '';

var me = this;

if (Modernizr.geolocation) {
    //console.log('genericYiiLocation: Location supported');
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(locateSuccess, locateFail);


    } else {
        alert('genericYiiLocation: Geolocation is not supported in your current browser.');
        callback(false);
    }
} else {
    alert ('genericYiiLocation: no native location support');
    callback(false);
}

GetPoo();

function GetPoo(getPublicIPAddress){
    console.log(this.accuracy);
}




function locateSuccess(loc){
    // console.log('genericYiiLocation: storing location data');
    me.longitude = loc.coords.longitude;
    me.latitude = loc.coords.latitude;
    me.accuracy = loc.coords.accuracy;

    callback(true, me);
}

// Unsuccessful geolocation
function locateFail(geoPositionError) {
    switch (geoPositionError.code) {
        case 0: // UNKNOWN_ERROR
            alert('An unknown error occurred, sorry');
            break;
        case 1: // PERMISSION_DENIED
            alert('Permission to use Geolocation was denied');
            break;
        case 2: // POSITION_UNAVAILABLE
            alert('Couldn\'t find you...');
            break;
        case 3: // TIMEOUT
            alert('The Geolocation request took too long and timed out');
            break;
        default:
    }
    callback(false, geoPositionError);
}

function getPublicIPAddress(callback)
{

    var ip;  
    $.ajax({
        type: 'GET',
        url: 'http://smart-ip.net/geoip-json?callback=?',
        dataType: 'json',
        async: true ,
        success: function(data) {
            ip = data.host;
            callback(false,ip);

        } 
    });


//callback();        

}


}

Answer 1

The "A" in Ajax stands for asynchronous. That means that the AJAX call is finished some time later and you javascript continues executing. You will known when the AJAX call is done and the data is available ONLY by the completion event.

So, you can't use an asynchronous AJAX call to fetch some data, have your javascript wait for the response and not execute any more, get the response and then continue executing. Javascript/asynch AJAX doesn't work that way.

Instead, you have to restructure how your code works so that you issue the AJAX call and then all code that needs the response from the AJAX call must be put into the AJAX complete callback.

So, you can't do this (in pseudo code):

some code
var ipAddress = AJAX call to get the IP address
some code that uses the ipAddress

Instead, you have to structure things like this:

some code
AJAX call to get the ipAddress(function(data) {
    // completion callback
    code that uses the response from the AJAX call
})
no code here that relies on the AJAX response because it hasn't happened yet