Come faccio a caricare un singolo Div senza caricare l'intera pagina e mostrare lo stato di caricamento?

Faccio questo:

per prima cosa hai il div nascosto con un caricamento se in esso e un pulsante di caricamento:

<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" />

Quindi hai il codice JS (io 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>

Così. Hai un contenitore "displayDiv"; all'interno hai un'immagine "loadingGIf" e un altro contenitore "actualContent"; Quando fai clic sul pulsante di caricamento, viene visualizzato il grande contenitore con la gif di caricamento, che notifica all'utente che qualcosa sta caricando. Quando il contenuto viene caricato, nascondi semplicemente loadingGif e visualizzi le informazioni nella gif "actualContent". Nel test.php fai semplicemente eco a ciò che deve apparire nel div. Ti consiglio di usare JSON, ma ne leggerai di più.

Spero che questo aiuti.