As Ajax becomes an increasingly widely used and available technique, one of the more common uses for it is navigation. It is a rather straightforward process to dynamically load content into a page via the Ajax method. However, since Ajax loads in the content exactly where you ask it to, without refreshing the page, it is important to note exactly where you are loading content.
You should be quite used to seeing pages load from scratch whenever a link is pressed, and you’ve likely become dependent on a few of the features of such a concept. With Ajax, however, if you scroll down on a page and dynamically load content in with Ajax, it will not move you back to the top of the page. The page will sit exactly where it is and load the content in without much notification.
A common problem with Ajax is that users simply don’t understand that anything has happened on the page. Therefore, if Ajax is to be used as a navigational tool, it is important to note that not all page layouts will react well to such functionality. In my experience, pages that rely upon navigational menus on the top of the screen (rather than at the bottom, in the content, or on the sides) and then load in content below it seem to function the best, as content is quite visible and obvious to the user.
Consider the following example, which shows a generic web page that loads in content via Ajax to display different information based on the link that has been clicked.
index.html script:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample 2_1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<body onload="makerequest ('content1.html','hw')">
<div align="center">
<h1>My Webpage</h1>
<a href="content1.html" onclick="makerequest('content1.html','hw');
return false;"> Page 1</a> | <a href="content2.html"
onclick="makerequest('content2.html','hw');
return false;">Page 2</a> | <a href="content3.html" onclick=
"makerequest('content3.html','hw'); return false;">Page 3</a> |
<a href="content4.html" onclick="makerequest('content4.html','hw'); return false;">
Page 4</a>
<div id="hw"></div>
</div>
</body>
</html>
content1.html script:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<!-- content1.html -->
<div style="width: 770px; text-align: left;">
<h1>Page 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>
content2.html script:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<!-- content2.html -->
<div style="width: 770px; text-align: left;">
<h1>Page 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>
content3.html script:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<!-- content3.html -->
<div style="width: 770px; text-align: left;">
<h1>Page 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
22 CHAPTER 2 ¦ AJAX BASICS
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>
content4.html script:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<!-- content4.html -->
<div style="width: 770px; text-align: left;">
<h1>Page 4</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>
After you run the index.html, by making use of Ajax, you can create a fully functional, Ajax navigation–driven site in a manner of minutes. You include the JavaScript required to process the links into <script> tags in the head, and can then make use of the makerequest() function at any time to send a server-side request to the web server without refreshing the page. You can call the makerequest() function on any event (you are using onclick() here) to load content into the respective object that is passed to the function.
Using this method to handle navigation is a very nice way to produce a solid break between content and design, as well as create a fast-loading web site. Because the design wrapper only needs to be created once (and content can be loaded on the fly), users will find less lag when viewing the web site, and have a seamless page in front of them at all times. While those users without a fast Internet connection typically have to wait while a site loads using traditional linking methods, they won’t have to wait with Ajax. Using the Ajax method allows the content being retrieved from the server to be loaded with little to no obtrusive maneuvering of the web page that the user is viewing.
