filling div using ajax?

Question

I've recently created a website with a menu-bar to the left. My next step is to update the right side of the page with content based on what option you choose on the in the menu. I know you can use iframe but I was wondering if there is an alternative to it, like a more dynamic one!

Most of the menu options are input-forms, I've read about ajax-calls to fill a div but couldn't find a good tutorial on how to achieve it.

edit:

Here's a sketch http://imageshack.us/photo/my-images/16/smlithis.png/

Answer 1

Consider using JQuery. Handling Ajax requests is so much easier than using ordinary JS. Documentation for the ajax function: http://api.jquery.com/jQuery.ajax/

Using the success callback (the function that is executed upon success) you can fill in your div:

$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
    $('.result').html(data);
    alert('Load was performed.');
  }
});

Instead of .result, point the selector to your main div. The .html() function fills your div with data, which is the data returned from the ajax request.

Edit: It's 2018. Use the Fetch API.