A Simple AJAX Driven Website with jQuery + PHP

Written by Kevin Liew on 08 Jul 2009
398,983 Views • Tutorials


AJAX is abbrieviated from Asynchrounous javascript and XML. It's not a new technology, but the implementation of a group of technologies to achieve a seamless interaction between client and server.

Typically, xhtml and css to present the information, javascript is used to handle user interactions, and a server side language to perform the users' requests (and normally return data in XML format, in this tutorial, we won't do that), and it all is happening in the background using the Javascript XMLHttpRequest. Javascript plays a main role tie all these technologies together and create the asynchronous interaction between client ans server.

AHAH (Asynchrounous HTML and HTTP) is a subset of AJAX which is another technique, Inspite of retreiving XML, AHAH is retreiving HTML content. Both of them are basically the same, the only difference is the content it returns. Generally, most people will simply call it AJAX, but technically, we should call it AHAH. In this tutorial, AHAH is used.

The Good, Bad and Solutions

The Goodies:

  • Reduce connections and bandwidth to the server, images, scripts, stylesheets only need to be downloaded once
  • Reduce loading timew. User doesnt have to load pages again and again, it all happens in a same page!
  • Increase responsiveness and end user experiences.

The Badies:

  • Browser Back button. AJAX web pages cannot connect with browser history engine. If you clicked on back button, you can't navigate those AJAX content.
  • Bookmark will not work on AJAX webpages. Due to the dynamic content, you might bookmark the homepage instead of the desired page.
  • Javascript is needed. To run AJAX based website, your browser need to have javascript enabled.

The Solutions:

AJAX is not a perfect technology, but some of the limitations can be overcame with some simple solutions. I found this very userful plugin called jquery.history.js. It solves Browser Back Button. For the bookmark problem, we can solve it by appending a hash value in the end of the url.

For the last one - javascript, we are going to ignore it. It can be done but I want to keep this tutorial simple.

And, of course, you'll need a good web server as well, if you're hunting for a web hosting company, you can click here to read reviews about the best web hosting out there! iPage Review


You will need the following items and environment to run this script


I will provide two versions of HTML code. The first one is the most basic elements you will need to get it working. And the last one is the one I created with some design

Simplified versions
	<li><a href="#page1" rel="ajax">Home</a></li> 
	<li><a href="#page2" rel="ajax">Portfolio</a></li> 
	<li><a href="#page3" rel="ajax">About</a></li>
	<li><a href="#page4" rel="ajax">Contact</a></li>

<div class="loading"></div>

<div id="content">
<!-- Ajax Content -->

2. CSS

This is really really simple, just have to keep the loading and content hidden

#loading {
	background: url(images/load.gif) no-repeat;
#content {

3. Javascript

I have added comments in every single lines of the code.

$(document).ready(function () {
	//Check if url hash value exists (for bookmark)
	//highlight the selected link
	$('a[href=' + document.location.hash + ']').addClass('selected');
	//Seearch for link with REL set to ajax
	$('a[rel=ajax]').click(function () {
		//grab the full url
		var hash = this.href;
		//remove the # value
		hash = hash.replace(/^.*#/, '');
		//for back button
	 	//clear the selected class and add the class class to the selected link
	 	//hide the content and show the progress bar
	 	//run the ajax
		//cancel the anchor tag behaviour
		return false;

function pageload(hash) {
	//if hash value exists, run the ajax
	if (hash) getPage();    
function getPage() {
	//generate the parameter for the php script
	var data = 'page=' + document.location.hash.replace(/^.*#/, '');
		url: "loader.php",	
		type: "GET",		
		data: data,		
		cache: false,
		success: function (html) {	
			//hide the progress bar
			//add the content retrieved from ajax and put it in the #content div
			//display the body with fadeIn transition

4. PHP

We will not go further on PHP code, this time, I'm using a basic switch to grab the content. The content for the page is being assigned to a variable called "page". And the last line, output the content.

To debug the php script, you can access it by passing data into it, for example:


It should display the content for page1. If you know about php and database, you can store the content in the database and retrieve it. Make a simple form to edit the content and BANG... you got yourself a customized content management system.


//Get the page parameter from the url
switch($_GET['page'])  {
	case 'page1' : $page = 'Page 1'; 
	case 'page2' : $page = 'Page 2'; 
	case 'page3' : $page = 'Page 3'; 
	case 'page4' : $page = 'Page 4'; 
echo $page;


That's it. Make sure you check out the demo and download the source code and play with it. If you have created your own, feel free to drop your link in the comment section to show off! : )

Last but not least, I need your support :) If you like this article, please help me to promote it by adding this post to your bookmark. Or you can subscribe to my RSS for more jQuery tutorial and design inspiration posts! Thanks!

Demo 1Demo 2Download
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

m4rus 11 years ago
Thank you so much!
Andrea 11 years ago

Thank you for this wonderful tutorial, it was just what was needed for our website!
I have a problem though, I am trying to get the home page content to not be empty, I have seen an earlier post about placing
into the document ready function. I havw done this but it hasnt changed anything, I am not sure if I am doing it correctly. Please can you help?
Brian 11 years ago
Having same problem as a few others here - content mismatching. On some occasions the correct page/include is displayed and somethings not (ie. it requires a second click to get the correct content displayed).
Occurs in both Chrome and Safari.

Also as someone else mentioned here, the get function does appear to load twice. For instance if you output the var data in an alert box it will appear twice.
Armin 11 years ago
I just downloaded the files, but when I open the index.php page (without having changed anything) from Expression Web 4 into in IE8 all I see is the source code in the browser window. I'm new at this Ajax/jQuery stuff and I'm just exploring here, so maybe I've neglected to do some steps first? If so, which steps?

Avik 11 years ago
well, you missed the requirement step. ajax and php cant run from your desktop. you will need wamp or xamp software to create a environment that will run php and ajax.

actually it is very easy, just download wamp server and install it to wherever you want (eg. C:/wamp)
now open (eg. C:/wamp/www) directory or wherever you save that.
copy the downloaded files and paste it into (eg. C:/wamp/www)
then start wamp server and open your browser, and go to (localhost/index.php)
you will find it working
Roman 11 years ago
Can you please tell how to make the output to the browser type http://sire.ru/ # index, and not http://sire.ru/ # page1? Did, as described above, but does not work - does not load the data, writes "There is no such page!"
It turned out only to achieve view http://sire.ru/ # 1: (
Kaivalya 11 years ago
how do you load the page 1 and page2, i am not able to find the linkl
Jayant 10 years ago
Thanks :)
Nick Meisher 10 years ago
For all you people having problems, please read and understand what the 'Requirements' section is asking you to do. You need a host or have xampp installed on your home computer as well as reference jquery.js and history.js in the header of the page you create (view source of this page you are reading and you will see a line
<script src=" target="_blank" rel="nofollow">http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
, your page needs this line as well as a similar line referening history.js, which you need to google for, download and add put next to your php file, then reference it just like the jquery.min.js line above (just with a url pointing to where you put it).
Lpion 10 years ago
Hi there.
I really like the tutorial , but it seems to be a bit outdated.
I use jquery 1.11 , but the script wont work with it.
Any hints on how to update the code to work with 1.11?
kev 8 years ago
Nice article. I learned a lot. But can you explain a bit more about the hash and how to handle ( + more useful options to handle the url at ajax request ). Thx