Basic Ajax Example

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.

the code

<!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" page="text/html; charset=ISO-8859-1" />
<title>Basic Ajax</title>

<script type="text/javascript" >
function getXMLHTTP() { //fuction to return the xml http object
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
try{
req = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
}
}
}
return xmlhttp;
}

function makerequest(serverPage, objID) {

var xmlhttp = getXMLHTTP();
var object = document.getElementById(objID);

if (xmlhttp) {
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
object.innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", serverPage, true);
xmlhttp.send(null);
}
}
</script>

<body onload="makerequest('page1.html','bg')">
<div align="center">
<h1>Basic Ajax Example</h1>
<a href="#" onclick="makerequest('page1.html','bg'); return false;"> Page 1</a> |

<a href="page2.html" onclick="makerequest('page2.html','bg'); return false;"> Page 2</a> |
<a href="page3.html" onclick="makerequest('page3.html','bg'); return false;"> Page 3</a> |
<a href="page4.html" onclick="makerequest('page4.html','bg'); return false;"> Page 4</a> |
<div id="bg"></div>
</div>
</body>
</html>

and the content code

<!-- page1.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</p>
</div>

and go on till page 4

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.

Special thx to : Lee Babin

Posted by admin in Articles

BabyGore

The Art Of Knowledge

Basic Ajax Example