This is just a quick summary of how I converted a copy of the articles page to use AJAX.
Put simply, AJAX is a technique for creating dynamic web applications. "So what?", you may say, "we have been doing that for years with server-side scripting, cgi, and client-side javascript". Well, the main selling point for AJAX is that it allows you to make calls back to the server from client-side script. This allows you to take the data from these calls and use it in javascript on the client's browser. The idea is nothing new, M$ released "Remote Scripting" in 1998 which did basically the same thing, but required a Java Applet to work with. With the release of IE5 in 1998 the real beginning of AJAX took place, as it included the XMLHttpRequest object, which now forms the foundation for AJAX. Combine the XMLHttpRequest object with DHTML and you have AJAX. This is why I said "technique" earlier, as there is really nothing new in AJAX, just new ideas about how to use existing technologies.
As you may have already guessed, the XMLHttpRequest object makes a call back to the web server (or any other web server for that matter), and populates some properties of itself with the results. The properties with the results are responseText and responseXML, with the responseXML property being an XML document object. You can then use these objects as you would any other object in DHTML.
The main changes in the code were to add three javascript functions and change the links to call these functions instead of direct the user to the article pages. I also added a few div tags to the page that act as containers for our dynamic content.
An old link:<a href="article_samba.html">Using Samba to share files with Win32 clients</a>A new link:
<a href="#top" onclick="showArticle(this);" name="samba">Using Samba to share files with Win32 clients</a>
As you can see I just changed the link to call the showArticle function, passing a reference to the anchor tag object, and gave the link a name. The name for each link is part of the article's page name, which is used below in the javascript to call the article page.
The showArticle function:
function showArticle(linkobj) {
var xmlHttpReq = false;
// Mozilla/Safari
if (window.XMLHttpRequest) {
xmlHttpReq = new XMLHttpRequest();
xmlHttpReq.overrideMimeType('text/xml');
}
// IE
else if (window.ActiveXObject) {
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttpReq.open('GET', 'http://www.natesteffen.com/article_' + linkobj.name + '.html', true);
xmlHttpReq.onreadystatechange = function() {
if (xmlHttpReq.readyState == 4) {
document.getElementById('articlecontent').innerHTML = xmlHttpReq.responseText;
}
}
xmlHttpReq.send(null);
document.getElementById('titleblock').innerHTML = linkobj.text;
document.getElementById('articleindex').style.display = 'none';
document.getElementById('articlecontent').style.display = '';
}
The code should be fairly self explanatory. First I create an object varying the syntax depending on what the browser supports. Next I call the open method, which really just instantiates the object with some parameters it needs to make the call. The section where the onreadystatechange property is set simply tells the object what to do when it's state changes. If the readyState is 4, meaning the page is finished downloading, fill the innerHTML property of the articlecontent element on my page with the responseText. Finally we call the send method, which actually makes the call to the web server. Once all this is done I tell the page to change the title to the link text, hide the article index, and show the content we just loaded.
This should all be very familiar if you have ever tried to make web service calls in classic ASP on M$ platforms. Even if you haven't, the principals are very simple, and there are lots of examples out on the web.
You can view the finished result here. If you view the source code you will find a few extra javascript functions. They deal primarily with the back links and stripping the header and footer off of the article pages. I added the stripping and formatting features so that I didn't have to create copies of every article page, saving me a lot of work. In reality this isn't a very good use of AJAX, but it was a good learning experience setting it up.
In the end I decided against switching the main articles page over to the new AJAX version. The biggest reason was that it breaks the back button, but also it really isn't a good use of AJAX. I know there are many workarounds for the back button issue, but I didn't feel like taking the time to code them, especially since I never really intended on putting this into production. In this case, AJAX was just unnecessary, and I created the page more to play with the technology than to solve a problem. There are some great examples of AJAX use out on the internet though (Slashdot's comment system is a good one to check out), so I haven't given up on AJAX yet. If I ever find a good place to use it where it helps more than impeeds the user experience you can bet you will see it on my site.