Design Your Web Page
In the case of Informit, the page structure is already very well designed, with the DIV elements already in place, as shown in Figure 1.
Figure 1 Page structure of an Informit article.
You would only need to remove the content from the navigational DIV elements and insert an empty box where the header will appear, resulting in a web page structure similar to this example. (For the sake of simplicity, we'll conveniently forget the requirement to have logo and copyright information embedded in every page.) Here's the code:
<div id="header"> <div style="height: 100px; width: 100%"></div> </div> <div id="contentArticle"> <div id="firstCol"> ... article content .... </div> <div id="secondCol" ></div> </div> <div id="footer"></div>
The navigational elements that have been removed from the web pages have to be re-created as independent pages. You should use static HTML files for static content (this will allow the content to be cached regardless of the web server you use) and create a server-side script that will display the dynamic elements based on the web page loading them. For Informit, each web page has a unique article identifier (the p= parameter in the URL), so you would need to create a server-side script that would accept the article identifier and create the right-hand column. In most cases, you can reuse server-side code that creates inline navigational elements.
After the web pages have been redesigned, you're ready to implement the AJAX portion of this solution. As always, you can work with inline frames (IFRAME elements) or use an XmlHttpRequest object.