Introduction
This time we are going to create a simple AJAX website with jQuery and the right amount of PHP & CSS. It is going to have a few pages loaded by AJAX from the PHP back-end, and a complete support of the browser history – a real pain for any AJAX or Flash site .
So get the demo files and lets start rollin’.
The XHTML
First, we create the XHTML backbone of the site.
The Code is (demo.html)
<div id="rounded">
<img src="img/top_bg.gif" /><!– image with rounded left and right top corners –>
<div id="main" class="container"><!– our main container element –>
<div id="main" class="container"><!– our main container element –>
<h1>A simple AJAX driven jQuery website</h1> <!– titles –>
<h2>Because simpler is better</h2>
<h2>Because simpler is better</h2>
<ul id="navigation"> <!– the navigation menu –>
<li><a href="#page1">Page 1</a></li> <!– a few navigation buttons –>
<li><a href="#page2">Page 2</a></li>
<li><a href="#page3">Page 3</a></li>
<li><a href="#page4">Page 4</a></li>
<li><img id="loading" src="img/ajax_load.gif" alt="loading" /></li> <!– rotating gif – hidden by default –>
</ul>
<li><a href="#page1">Page 1</a></li> <!– a few navigation buttons –>
<li><a href="#page2">Page 2</a></li>
<li><a href="#page3">Page 3</a></li>
<li><a href="#page4">Page 4</a></li>
<li><img id="loading" src="img/ajax_load.gif" alt="loading" /></li> <!– rotating gif – hidden by default –>
</ul>
<div class="clear"></div> <!– the above links are floated – we have to use the clearfix hack –>
<div id="pageContent"> <!– this is where our AJAX-ed content goes –>
Hello, this is the default content
</div>
Hello, this is the default content
</div>
</div>
<div class="clear"></div> <!– clearing just in case –>
<img src="img/bottom_bg.gif" /> <!– the bottom two rounded corners of the page –>
</div>
This code is positioned in the body part of our demo.html file. Its main purpose is to serve as a front-end to the php back-end, with jQuery handling all the communication in between.
Note the addresses of the navigation links – #page and a page number. This part, called a hash, is included in the current URL without a page refresh, creating an entry in the browser’s history. By monitoring this hash with javascript, we can change the loaded page by AJAX and provide a seamless browsing experience.