We are closing down our forums, it’s time to move on, but we are keeping some important threads, here are the AJAX tutorials…
Beginner AJAX Tutorial – Creating a simple AJAX website with example
What you need to know before you read this tutorial:
You need to read the previous two tutorials, they are located at here:
Beginner Ajax Tutorial
Beginner AJAX Tutorial – Display a Progress Bar or a Loading Message
(It will only takes a few minutes and will catch you up to this point.)
We are going to make a simple AJAX website with 4 pages.
A few things to note:
1. We are going to make a website that works just fine for users without JavaScript.
2. The back-end will be PHP, it might not be the best way to implement but it’s simple and effective for the purpose of this tutorial.
3. You will be able to download the complete source code for this AJAX tutorial.
4. In this AJAX tutorial the browser back button is ‘broken’, and users can’t bookmark internal pages of this website; fixing these issue is the topic of the next tutorial.
5. In this tutorial I’m going to demonstrate what can be done with AJAX in a simple way using inline JavaScript; separating presentation and behavior will be the topic of later tutorials.
Inline JavaScript looks like this:
<a href="?page=about" onClick="return get_page('about');">About us</a>Let’s start with the back-end
Here is the directory structure of this website:
/index.php
/templates/main.php
/templates/home.php
/templates/about.php
/templates/services.php
/templates/contact.php
/images/few images
/yui/our yui code libraries
Here is the index.php source code:
<?php
$templates_folder = 'templates/';
if( !isset($_GET['page']) ) {
$_GET['page'] = 'home';
}
/**
* Because we are going to get the content of a file based on user input and display it
* to the user, we use basename function to make sure a sneaky user doesn't try
* something like ../../ to get a password file or something important.
**/
$page = trim(basename($_GET['page'])) .'.php';
$page_file = $templates_folder .$page;
/**
* Note: This assumes your templates are static, that is: there is no PHP code
* in them, I will write about how to handle that situation later but for now,
* let's keep it simple :)
**/
if( file_exists($page_file) ) {
$page_content = file_get_contents($page_file);
} else {
$page_content = 'This page doesn\'t exist here.';
}
/**
* If the $_GET['AJAX'] is set, then the request is coming from our JavaScript
* get_page() function, so we just send the $page_content to the browser.
**/
if( isset($_GET['AJAX']) ) {
echo $page_content;
} else {
include $templates_folder .'main.php';
}
?>What it does is straightforward and you can understand the code just by reading it.
But here is how it works:
1. It checks the contents of the $_GET['page'] variable for the name of the page a visitors wants to visit and assigns it to $page.
$page = trim(basename($_GET['page'])) .'.php';
$page_file = $templates_folder .$page;
$page_file now contains the exact path to our template.
Also note that, this part of the code:
if( !isset($_GET['page']) ) {
$_GET['page'] = 'home';
}Makes sure that the home page is the default page, and if $_GET['page'] is empty it assigns ‘home’ to it.
2. It checks if the page exists in the templates folder.
if( file_exists($page_file) ) {
$page_content = file_get_contents($page_file);
} else {
$page_content = 'This page doesn\'t exist here.';
}If it exists then it assigns it’s content to $page_content variable if not an error message that this page does not exist.
3. It checks the content of $_GET['AJAX'] variable and if its set, the request is coming from our JavaScript code:
if( isset($_GET['AJAX']) ) {
echo $page_content;
} else {
include $templates_folder .'main.php';
}If it is coming from our JavaScript code then it only prints out the content of the page, but if not, it prints the main.php template.
Main.php source code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Sample AJAX-XHR Website</title>
</head>
<body>
<?php echo $page_content; ?>
</body>
</html>
This is the main.php in it’s simplest format, I omitted the JavaScript.
What it does is just printing the $page_content variable in the page.
Other templates:
They only contain plain HTML code, you will see everything together soon.
The front end
All the JavaScript code goes into main.php, here is the JavaScript code we had so far in the previous tutorial:
<script type="text/javascript" src="yahoo.js"> </script>
<script type="text/javascript" src="event.js"> </script>
<script type="text/javascript" src="connection.js"> </script>
<script type="text/javascript">
function success_handler(o) {
replace_html('content', o.responseText);
}
function failure_handler(o) {
replace_html('content', 'Server or your connection is death');
}
function replace_html(id, content) {
document.getElementById(id).innerHTML = content;
}
function show_progressbar(id) {
replace_html(id, '<img src="http://images.code-head.com/progress-bars/4.gif" border="0" alt="Loading, please wait..." />');
}
function send_request() {
show_progressbar('content');
var callback = { success:success_handler, failure:failure_handler, timeout: 10000 };
YAHOO.util.Connect.asyncRequest('GET', 'http://images.code-head.com/tutorials/ajax/beginner-ajax-tutorial.php', callback);
}
function test_failure() {
show_progressbar('content');
var callback = { success:success_handler, failure:failure_handler, timeout: 10000 };
YAHOO.util.Connect.asyncRequest('GET', 'http://images.code-head.com/tutorials/ajax/some-file-that-doesnt-exists.php', callback);
}
var progress_bar = new Image();
progress_bar.src = 'http://images.code-head.com/progress-bars/4.gif';
</script>The code we use for this tutorial is similar, we will only replace send_request() and test_failure() with one function, get_page():
<script type="text/javascript" src="yui/yahoo.js"> </script>
<script type="text/javascript" src="yui/event.js"> </script>
<script type="text/javascript" src="yui/connection.js"> </script>
<script type="text/javascript">
function replace_html(id, content) {
document.getElementById(id).innerHTML = content;
}
function show_progressbar(id) {
replace_html(id, '<img src="http://images.code-head.com/progress-bars/4.gif" border="0" alt="Loading, please wait..." />');
}
function success_handler(o) {
replace_html('content', o.responseText);
}
function failure_handler(o) {
replace_html('content', 'Server or your connection is death.');
}
function get_page(page) {
if( page == '' ) {
/* Do nothing if 'page' is empty, you might want to show some error message. */
return false;
}
show_progressbar('content'); /* Show progress bar while waiting */
var callback = { success:success_handler, failure:failure_handler, timeout: 10000 };
YAHOO.util.Connect.asyncRequest('GET', 'index.php?AJAX=true&page=' + page, callback);
return false;
/**
* return false!
* Because this will prevent the browser from navigating to page specified in
* the link's href attribute.
**/
}
/* Let's preload our progress bar */
var progress_bar = new Image();
progress_bar.src = 'http://images.code-head.com/progress-bars/4.gif';
</script>get_page() function is very simple, here is what it does:
1. It receives the page name as an argument.
function get_page(page) {
// ...
}2. It check if the page variable is empty.
if( page == '' ) {
return false;
}Here, this function does nothing if page variable is empty, you might want to show an error message.
3. It shows the progress bar before sending the request to the server, letting the user know that something is actually happening:
show_progressbar('content');4. It sends the request to server and sets our success_handler and failure_handler as callbacks:
var callback = { success:success_handler, failure:failure_handler, timeout: 10000 };
YAHOO.util.Connect.asyncRequest('GET', 'index.php?AJAX=true&page=' + page, callback);Note: We are sending a request to:
'index.php?AJAX=true&page=' + page
We set the AJAX variable to true and we set the page variable to the page variable that passed to the function. (It can be ‘about’, ‘services’, etc.)
5. It returns false. Return false will result in any link that uses this function to appear as not working, that is, the browser won’t try to navigate
to the page specified in the links href attribute. Instead of letting the browser navigate to that page we replace the content of the page with JavaScript.
main.php with the JavaScript and a menu:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Sample AJAX-XHR Website</title>
<!-- Usual yui stuff -->
<script type="text/javascript" src="yui/yahoo.js"> </script>
<script type="text/javascript" src="yui/event.js"> </script>
<script type="text/javascript" src="yui/connection.js"> </script>
<script type="text/javascript">
function replace_html(id, content) {
document.getElementById(id).innerHTML = content;
}
function show_progressbar(id) {
replace_html(id, '<img src="http://images.code-head.com/progress-bars/4.gif" border="0" alt="Loading, please wait..." />');
}
function success_handler(o) {
replace_html('content', o.responseText);
}
function failure_handler(o) {
replace_html('content', 'Server or your connection is death.');
}
function get_page(page) {
if( page == '' ) {
/* Do nothing if 'page' is empty, you might want to show some error message. */
return false;
}
show_progressbar('content'); /* Show progress bar while waiting */
var callback = { success:success_handler, failure:failure_handler, timeout: 10000 };
YAHOO.util.Connect.asyncRequest('GET', 'index.php?AJAX=true&page=' + page, callback);
return false;
/**
* return false?!
* Because this will prevent the browser to navigate to page specified in
* the link's href attribute.
**/
}
/* Let's preload our progress bar */
var progress_bar = new Image();
progress_bar.src = 'http://images.code-head.com/progress-bars/4.gif';
</script>
</head>
<body>
<div id="main-wrapper">
<div id="main-padding">
<h1>Sample AJAX-XHR Website</h1>
<div id="menu">
<a href="?page=about" onClick="return get_page('about');">About us</a>
<a href="?page=services" onClick="return get_page('services');">Our services</a>
<a href="?page=contact" onClick="return get_page('contact');">Contact us</a>
<a href="?page=home" onClick="return get_page('home');">Home</a>
</div>
<div id="content">
<?php echo $page_content; ?>
</div>
</div>
</div>
</body>
</html>2 notes:
1. Menu links are like:
<a href="?page=about" onClick="return get_page('about');">About us</a>Their href attribute is actually pointing to the right page, so users without JavaScript will be able to navigate through these pages, and search engines will have
no problem indexing these pages as well.
2. On the other hand their onClick event is set to call get_page() function and passes the page name as the argument to the get_page().
Here is how it works all together:
http://images.code-head.com/tutorials/ajax/sample-AJAX-XHR-website/
Please note: Ignore the look of this example, the point is the functionality.
You can try turning off your JavaScript and see that the example site still works just fine without it.
Download the complete source code here if you want to take a closer look at everything:
http://images.code-head.com/tutorials/ajax/sample-AJAX-XHR-website/sample-AJAX-XHR-website.zip
If you have questions or suggestions, feel free to reply to this thread.
-Codehead
Update:
I should mention that it’s a long time that I moved on to use jQuery rather than yui and I think jQuery is much nicer and easier to use library. I will hopefully write some tutrials on jQuery.
If you don’t know jQuery yet, download it here and HAVE FUN FOREVER!
Download jQuery
AJAX – Beginner AJAX Tutorial – Creating a simple AJAX website with example
Back To Top
Back To Previous Page
CODEHEAD
I'm a programmer at 
Services
Blog
About
Contact
Blog Home