Create A Simple AJAX Interfaced PHP Driven Website
DiggBlinkRedditDeliciousTechnorati
article by Srirangan
AJAX is simple, and AJAX is overrated. Infact I'll even claim that AJAX is nothing but glorified IFRAMES. By the end of this simple tutorial, you will have a PHP driven, AJAX Interfaced website.
In actual terms you will have an Index page which has a menu that is driven by javascript events and which will dynamically read other PHP scripts residing on your server, and will render their output within a DIV on the index page.
Please Note: This article assumes you understand basic PHP, basic XHTML and basic Javascript.
The Architeture
Our first AJAX Application consists of the following:
[1] Index.php Landing Page that loads the required Javascript Application, CSS Styles and XHTML Layout including the Menu which will be AJAX Event Driven
[2] Stylesheet.css to dress up the XHTML
[3] Javascript Application.js which processes the Menu Events (Requests)
[4] Content.php which renders the eventual content
Don't get over awed by what you just read. Trust me, by the end of this tutorial you'll realize that there isn't much to "AJAX" at all. Just another hyped up industry buzz word.
Let's get started!
Step 1 - Create an index.php
A simple PHP/HTML file that loads the stylesheet, javascript application (AJAX app) and the layout.
<html>
<head>
<script type='text/javascript' language='javascript' src='application.js'></script>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<title>Page Title</title>
</head>
<body>
<div id='header'>
Page Title
</div>
<div id='menu'>
<ul>
<li onclick='menuRequest("menu1")'>Menu 1</li>
<li onclick='menuRequest("menu2")'>Menu 2</li>
</ul>
</div>
<div id='content'>
Default Content
</div>
</body>
</html>
Step 2 - stylesheet.css
Basic styles for each of the layout objects. Feel free to add your own styles.
body {
}
div#header {
}
div#menu {
}
div#menu ul {
}
div#menu ul li {
}
div#content {
}
Step 3 - application.js
Defines the menuRequest() that reads the user's action and calls the content.php file to render relevant content.
function menuRequest(url)
{
var arg = url;
url = "content.php?q=" + url;
var http_request = false;
if (window.XMLHttpRequest)
{ // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType)
{
http_request.overrideMimeType('text/xml');
// See note below about this line
}
} else if (window.ActiveXObject)
{ // IE
try
{
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e)
{
try
{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request)
{
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
http_request.onreadystatechange = function() { alertContents(http_request); };
http_request.open('GET', url, true);
http_request.send(null);
}
function alertContents(http_request)
{
if (http_request.readyState == 4)
{
if (http_request.status == 200)
{
document.getElementById("content").innerHTML=http_request.responseText;
}
else
{
alert('There was a problem with the request.');
}
}
}
Step 4 - content.php
The actual brains of the whole system. The aim is to read the querystring value of 'q', q which holds the value of the menu item the user clicked on. Simple if..else. Check it out:
<?php
if( $_GET['q'] == "menu1" )
{
echo "Content for click on Menu 1";
}
if( $_GET['q'] == "menu2" )
{
echo "Content for click on Menu 2";
}
?>
There you have it. An AJAX and PHP driven system. Best of both worlds. Manipulate your index.php, stylesheet.css and content.php files and you can take this application further.
A small confession. I use very similar code on my PHP-AJAX driven personal blog - http://srirangan.net
Happy Coding!
References
[1] Mozilla Developer Center - Getting Started