¿Cómo cargo una división individual sin cargar la página completa y mostrar el estado de carga?

Hago esto:

primero tienes el div oculto con una carga si está en él y un botón de carga:

<div id="displayDiv" style="display: none">
  <img id="loadingGif" src="loadingGif" style="display:none"; />
  <div id="actualContent" style="display:none" />
</div>
<input type="button" id="loadButton" />

Luego tienes el código JS (yo uso jQuery)

<script type="text/javascript">
   $(document).ready( onDocumentReady); // this runs before page load

   function onDocumentReady()
   {
      $('#loadButton').click( onLoadClick ); //assign action on button click
   }   

   function onLoadClick()
   {
       $('#loadingGif').show(); // show the loading gif. It won't show as long as it's parent is hidden
       $('#actualContent').hide(); // hide the actual content of the response;
       $('#displayDiv').show(); // display the div
       $.get("test.php", onRequestComplete ); // make the ajax request to the stand alone PHP file
      //so as long as the content loads, the loading gif will show;
   }

   function onRequestComplete( data )
   {
      $('#loadingGif').hide();
      $('#actualContent').html( data );
      $('#actualContent').show();
   }
</script>

Asi que. Tienes un contenedor "displayDiv"; dentro tienes una imagen "loadingGif" y otro contenedor "actualContent"; Cuando hace clic en el botón de carga, aparece el contenedor grande con el gif de carga, notificando al usuario que algo se está cargando. Cuando se carga el contenido, simplemente oculta el loadingGif y muestra la información en el gif "actualContent". En test.php, solo haces eco de lo que debe aparecer en el div. Recomiendo usar JSON, pero leerá más al respecto.

Espero que esto ayude.