Multiple load functions?

Question

I'm curious if there is a better way to handle multiple load() functions on one page? I've got this code right here:

setInterval(function update() {
    if (denial) return;
    denial = true;
    $.ajax({
        url: 'update.php',
        error: function () {
            denial = false;
        },
        complete: function () {
            denial = false;
            $('#loader').hide("slow");
            $('#credits').load('world1.php?mode=money');
            $('#fuelleft').load('world1.php?mode=fuel');
            $('#energyleft').load('world1.php?mode=energy');
            $('#starmap').show("slow");
            $('#upgrade-holder').load('world1.php?mode=up');
        },
    });
}, 1000);

It works perfectly fine, but is there any way I could improve this code?

Answer 1

update.php could include all the content that needed to be updated. You could then update that with html, e.g.:

$.ajax({
    url: 'update.php',
    dataType: 'json',
    success: function(data) {
        $('#credits').html(data.money);
        $('#fuelleft').html(data.fuel);
        $('#energyleft').html(data.energy);
        // ...
    }
});

This code here assumes that update.php returns JSON that looks like this:

{"money":"<p>some HTML to go into #credits</p>","fuelleft":"<p>more HTML</p>",…}

…but you could easily modify it for other output formats.