I have realized there is a lack of good examples of ajax navigation, partial-page refreshes, or whatever you want to call it.
Here is one simple way to progressively enhance your existing site by adding a script tag, a few extra attribs to some links, and adding an extra hidden iframe to un-hide and use as a viewer for the few % of folks without javascript enabled on their browsers.
this style of progressive ajax also means that search engines can find the partial-page content, which gives you broader and more targeted reach.
all you need to do to config the script is change the hash tag on the ezajax.js script to match an attribute of your links.
the setup scheme is ezajax.js#attrib=value, customize the hash to suit your needs.
since we use the target attrib to support non-js browsers, it's perfect for signaling to the script that this link fetches a partial page. if you want to match a class attrib, it must be exact and you must use "className" instead of "class" on the config hash.
This has been tested in IE6, Chrome, and FF8 both with and without javascript.
view a
live demo.
index.html
Code:
<!DOCTYPE html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Simple Ajax Demo: Home </title>
<style type="text/css" media="all">
#view { display: none; border: 0; width: 99%; height: 6em; }
</style>
<script type="text/javascript" src="ezajax.js#target=view"></script>
</head><body>
<noscript>
<style type="text/css" media="all">
#view { display: block; }
</style>
</noscript>
<header>
<h1> About our states </h1>
<h2> We have pretend operations in Illinois, Ohio, and New York. Click around below to find out more about these places. </h2>
</header>
<h3>Locations</h3>
<nav>
<ul>
<li><a href="il.html" target="view">Illinois</a></li>
<li><a href="oh.html" target="view">Ohio<a/></li>
<li><a href="ny.html" target="view">New York<a/></li>
</ul>
</nav>
<hr />
<div id="viewer">
<iframe width="90%" height="300" name="view" id="view" src="il.html" allowtransparency="true"></iframe>
</div>
<p>Example text contents taken from http://wikipedia.org, please donate!</p>
</body>
</html>
ezajax.js
Code:
//ez-ajax, by dandavis (danml.com) :: 100% Free for everyone who includes this comment ::
(function boot(){
var myTags=document.getElementsByTagName("script"),
ops= (myTags[myTags.length-1].src.split("#")[1]||"target=view").split("="),
flagAttrib= ops[0]||"target" ,// markup should match this <A> attribute
flagValue= ops[1]||"view" ;// with this exact value
function convertLinkstoHashes(){
var links=document.links, mx=document.links.length, i=0, x;
for(i;i<mx;i++){
var a=links[i];
if((x=a.href.split(document.domain)[1]) && a[flagAttrib]==flagValue){ a.href="#"+x; a.target=""; }
}//next link
}//end convertLinkstoHashes()
function onhashchange2(e){
var hash=location.hash.slice(1);
if(hash){aGet(hash, painter);}
};window.onhashchange=onhashchange2;
function painter(html){
//show new content:
document.getElementById("viewer").innerHTML=html;
//show new title:
var title=document.title.split(":");
document.title=title.slice(0,-1).join(":") +": "+ (location.hash||"").replace(/\/$/,"").split("/").slice(-1)[0].split(".")[0];
}//end painter()
function aGet(turl, callback) {
if(aGet.pool[turl]){ return callback(aGet.pool[turl]); }
var XHRt = !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
XHRt.onreadystatechange = function () {if (XHRt.readyState == 4 && XHRt.status == 200) {callback(aGet.pool[turl]=XHRt.responseText, XHRt);}};
XHRt.open("GET", turl, true);
XHRt.send("");
}aGet.pool={};//end aGet()
window.onload=function ol(e){
//apply fix for IE6+7:
if("\v"=="v" && !top.postMessage){
var hashcache=location.hash;
setInterval(function(){
if(hashcache!=location.hash){
hashcache=location.hash;
onhashchange2();
}}, 150);
}//end if IE<8
convertLinkstoHashes();
onhashchange2();
}//end onload()
}());
oh.html
Code:
Ohio is a Midwestern state in the United States.[17] The 34th largest state by area in the U.S.,[18] it is the 7th-most populous with over 11.5 million residents,[19] containing several major American cities and seven metropolitan areas with populations of 500,000 or more. The state's capital is Columbus. The Anglicized name "Ohio" comes from the Iroquois word ohi-yo’, meaning "great river".[20][21][22][23][24] The state, originally partitioned from the Northwest Territory, was admitted to the Union as the 17th state (and the first under the Northwest Ordinance) on March 1, 1803.[9][25] Although there are conflicting narratives regarding the origin of the nickname, Ohio is historically known as the "Buckeye State" (relating to the Ohio buckeye tree) and Ohioans are also known as "Buckeyes".[1]
il.html
Code:
Illinois is the fifth-most populous state of the United States of America, and is often noted for being a microcosm of the entire country.[8] With Chicago in the northeast, small industrial cities and great agricultural productivity in central and northern Illinois, and natural resources like coal, timber, and petroleum in the south, Illinois has a broad economic base. Illinois is a major transportation hub. The Port of Chicago connects the state to other global ports from the Great Lakes, via the St. Lawrence Seaway, to the Atlantic Ocean; as well as the Great Lakes to the Mississippi River, via the Illinois River. For decades, O'Hare International Airport has ranked as one of the world's busiest airports. As the "most average state",[8] Illinois has long had a reputation as a bellwether both in social and cultural terms[8] and politics.
ny.html
Code:
New York is a state in the Northeastern region of the United States. It is the nation's third most populous state. New York is bordered by New Jersey and Pennsylvania to the south, and by Connecticut, Massachusetts and Vermont to the east. The state has a maritime border with Rhode Island east of Long Island, as well as an international border with the Canadian provinces of Ontario to the north and west, and Quebec to the north. The state of New York is often referred to as New York State to distinguish it from the city of New York.
example text contents taken from
http://wikipedia.org, please donate!
Before you post, read our: 
proper ajax navigation using progressive enhancement
