I want to make a few divs on the same page work similar to iframes. Each will load a URL which contains links. When you click on those links I want an AJAX request to go out and replace the div's html with new html from the page of the clicked link. It will be very similar to surfing a page inside an iframe.

Here is my code to initially load the divs (this code works):

onload:

$.ajax({
  url: "http://www.foo.com/videos.php",
  cache: false,
  success: function(html){
    $("#HowToVideos").replaceWith(html);
  }
});
$.ajax({
  url: "http://www.foo.com/projects.php",
  cache: false,
  success: function(html){
    $("#HowToProjects").replaceWith(html);
  }
});

This is a sample of code that I'm not quite sure how to implement but explains the concept. Could I get some help with some selectors(surround in ?'s) and or let me know what is the correct way of doing this? I also want to display a loading icon, which I need to know where the right place to place the function is.

$(".ajaxarea a").click(function(){
        var linksURL = this.href; // 
        var ParentingAjaxArea = $(this).closest(".ajaxarea");;
        $.ajax({
      url: linksURL,
      cache: false,
      success: function(html){
        $(ParentingAjaxArea).replaceWith(html);
      }
    });
    return false;
});

$(".ajaxarea").ajaxStart(function(){
    // show loading icon
});