分组内容在ajax调用之间闪烁

I have an ajax call that passes a parameter to a request for data. The data is based on a view from a web service that provides me with XML. The web service sometimes lags in returning the view and during that time the contents of the div flickers with the current and new data.

I've tried emptying/hiding the div and setting headers to not cache the php page but still the same.

Here is my code:

$('#getCourses').change(function() {
    var courseGroup = $('#courseGroup:selected').val();

    $('#showGroupCourses').html('<img src="images/loading.gif">Processing');

    $.ajax({
        cache: false,
        type: 'POST',
        url: 'getGroupCourses.php',
        data: { passCourseGroup:courseGroup },
        success: function(groupCourses) {
            $('#showGroupCourses').html(groupCourses).show('fast').css({'height':'auto'});
        }
    })
});

Any thoughts on how to prevent this?

Thanks!

Try this:

$('#getCourses').change(function() {
    var courseGroup = $('#courseGroup:selected').val();



    $.ajax({
        cache: false,
        type: 'POST',
        url: 'getGroupCourses.php',
        data: { passCourseGroup:courseGroup },
        beforeSend: function( xhr ) {
          $('#showGroupCourses').html('');
         $('#showGroupCourses').html('<img src="images/loading.gif">Processing');
        }
     })
     .done(function(groupCourses) {
             $('#showGroupCourses').html(groupCourses).show('fast').css({'height':'auto'});
        });
});