alternatives to frames to include content from different servers - html

Question

I need to make a series of webpages. Each with a header coming from a website, and the content coming from an html page in my dropbox/public. I simple way would be to use frames, but they are deprecated.
As the html content is of different size. So the iFrame does not seem to be the right tool.
What alternatives do I have?
Many people seemed to suggest in the comments ajax with jsonp. Unfortunately I am completely new to those methods, so I would need an example to copy and then work with.
Thanks,
Pietro

Answer 1

You need to have the Jquery library in the main page. Copy the above code on the header of your page:
<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
The make a div with the response id:
<div id="response"></div>
JQuery has an AJAX function called "load", this function is appended to a selector where you want a page to be loaded, in this case we want to contents of file "exemple.html" to load in the tag with id "response".
<script>
$(document).ready(function(){
// load exemple page when the page loads
$("#response").load("exemple.html");
});
</script>
Also you can load the content when a link from the main page is clicked:
<script>
$("#exemple").click(function(){
// load exemple page on click
$("#response").load("exemple.html");
});
</script>
For this you have to add on your HTML code a link with the id="exemple"
Click to load the exemple page
Hope this helps you!