An big problem with loading content in your page with javascript, is that this content can’t be seen by search-engines.
But this problem can be overcome, see this little code example I wrote.
What can this do?
- All pages can be used with Javascript disable
- You can bookmark a page that was loaded with javascript, thanks to RHS
- The back and forward buttons of the browser are still functional
To write this, I used the jQuery javascript framework and the RHS library
You can test the example online. Or download it.
ajaxsite.php
<?php
class Page
{
public $link, $title, $content;
public function __construct($link, $title, $content)
{
$this->link = $link;
$this->title = $title;
$this->content = $content;
}
}
class AjaxSite
{
/**
* All pages of the site
*
* @var array
*/
private $pages = array();
/**
* Holds the current page to display
*
* @var Page
*/
private $currentPage;
/**
* The default page
*
* @var string
*/
private $defaultLink;
/**
* Contructor, set example pages
*
* @param $default_link
*/
public function __construct($default_link)
{
$this->defaultLink = $default_link;
//some placeholder text
$lorum = <<<LOR
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas faucibus malesuada elit. Nulla et ipsum. In sed lacus. Donec eleifend neque. Nullam et tellus et dui tincidunt rhoncus.</p><p> Donec imperdiet ante eget massa. Nunc eu urna sit amet nisl pellentesque faucibus. Pellentesque suscipit porta elit. Praesent ac tellus ut quam pellentesque faucibus.</p>
LOR;
//create a couple of pages
$p1 = new Page(“page1″, “Page 1″,“<h3>This is page 1</h3>” . $lorum);
$p2 = new Page(“page2″, “Page 2″,“<h3>This is page 2</h3>” . $lorum);
$p3 = new Page(“page3″, “Page 3″,“<h3>This is page 3</h3>” . $lorum);
//put the pages in an array, use the page link as key for easier searching
$pages = array
(
$p1->link => $p1,
$p2->link => $p2,
$p3->link => $p3
);
$this->setPages($pages);
}
/**
* Set all Pages
*
* @param array $pages
*/
public function setPages(array $pages)
{
$this->pages = $pages;
}
/**
* Get all Pages
*
* @return array
*/
public function getPages()
{
return $this->pages;
}
/**
* Get the current page to show
*
* @return Page
*/
public function getCurrentPage()
{
//if currentPage is already set, return it
if($this->currentPage != null) return $this->currentPage;
//get page link for page to show
$link = $_GET[“p”];
if($link != null)
{
//if link exists in the array of pages, use it, otherwise use the default
$link = array_key_exists($link,$this->pages)? $link : $this->defaultLink;
//set the current page
$this->currentPage = $this->pages[$link];
}
else
{
//if the link is not set, use the default
$this->currentPage = $this->pages[$this->defaultLink];
}
return $this->currentPage;
}
/**
* Get default link for this page
*
* @return string
*/
public function getDefaultLink()
{
return $this->defaultLink;
}
/**
* Check if this page is not an ajax request
*
* @return bool
*/
public function notAjaxRequest()
{
//default return value
$notAjaxRequest = true;
//get type of request
$request = $_GET[“r”];
//if request type is ajax, only echo partial content
if($request != null && $request == “ajax”)
{
echo “<h2>” . $this->getCurrentPage()->title . “</h2>”;
echo $this->getCurrentPage()->content;
$notAjaxRequest = false;
}
return $notAjaxRequest;
}
}
index.php
<?php
require_once “ajaxsite.php”;
// create new site
$app = new AjaxSite(‘page1′);
//only show full page when this page is not an ajax request
if($app->notAjaxRequest()):
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1″ />
<title>Search Engine & Usability friendly Ajax</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="json2007.js"></script>
<script type="text/javascript" src="rsh.js"></script>
<script type="text/javascript">
<!–
//set default page, used in main.js
var defaultpage="<?php echo $app->getDefaultLink() ?>";
//–>
</script>
<script type=“text/javascript” src=“main.js”></script>
</head>
<body>
<div id=“container”>
<div>
<h1>Search Engine & Usability Friendly Ajax</h1>
<div style=“height:10px;”>
<img id=“loader” src=“ajax-loader.gif” alt=“Loading…” style=“display:none;” /></div>
</div>
<div id=“nav”>
<ul>
<?php foreach($app->getPages() as $link=>$page): ?>
<li>
<a id=“_<?php echo $link ?>" href="<?php echo ‘index.php?p=’ . $link ?>"><?php echo $page->title ?></a>
</li>
<?php endforeach; ?>
</ul>
</div>
<div id=”content“>
<?php echo $app->getCurrentPage()->content ?>
</div>
</div>
</body>
</html>
<?php endif; //And that’s it 
?>
main.js
var loc = “” + window.location;
//create dhtmlHistory, so we can store the browser history for this site
window.dhtmlHistory.create();
//event when browser history buttons are clicked
var yourListener = function(newLocation, historyData)
{
//newLocation contains the current page location (for example "page1")
//historyData contains the html for the current page that I saved with dhtmlHistory.add(loc,content)
$(“#content”).html(historyData);
}
//executed when DOM is ready
$(document).ready(function()
{
//initialize dhtml history and set the event for all history changes
dhtmlHistory.initialize();
dhtmlHistory.addListener(yourListener);
//set location of current page in global var, so it can be used in all events
loc = “” + window.location;
var lastIndex = loc.lastIndexOf(“#”);
loc = (lastIndex != -1)?(loc.substring(lastIndex + 1)):defaultpage;
//load the content for the first page based on the current location
//for example "page3", this makes bookmarking an "ajax" page possible
$(“#content”).load(“index.php?p=” + loc + “&r=ajax”, null, function()
{
var content = $(“#content”).html();
dhtmlHistory.add(loc,content);
});
//Everytime and ajax request starts, we show the loading animation and hide the old content
$(“#content”).ajaxStart(function()
{
$(“#loader”).show();
$(this).hide();
});
//Everytime and ajax request is succesfull, we hide the loading animation again
//and show the new content with a fade in animation
$(“#content”).ajaxSuccess(function(evt, request, settings)
{
$(“#loader”).hide();
$(this).fadeIn();
});
//we set a click event for all link in the navigation
$(“#nav li a”).click(function()
{
//I saved the page link in the id of the hyperlink
//though I could also just parse the src and get it from there
loc = $(this).attr(“id”).substring(1);
//load the new content in the content div
$(“#content”).load($(this).attr(“href”) + “&r=ajax”,null, function()
{
//everytime we load new content with ajax
//we put it in the dhtmlHistory object, so we can recover it later
dhtmlHistory.add(loc,$(this).html());
});
//return false when the hyperlink is clicked, to disable
//the default behavior of the hyperlink
return false;
});
});
), but a man’s gotta do what a man’s gotta do.
Yesterday went to see 
