Make an AJAX Website in Less than 10 Minutes

I’ve been toying around with AJAX apps and XMLHttpRequest but have wanted to put up a site that loads all of its content asynchronously. If you’re like me and you learn best from working with examples you’re only 10 minutes away from your first AJAX website.

I have done several examples and tutorials on this subject, but this is one of the most complete I’ve seen to date. As stated by Angus the methods used also have several advantages:

Browser SupportThis implements both XMLHttpRequest and a custom-written hidden-IFRAME-based transport layer. Therefore, it works in a wider range of browsers, including Opera 7 and IE5/Mac.

AccessibilityThe document interface code is written with modern “best practice” coding standards in mind. Links are standard A HREF links with a CLASS attribute applied, so legacy useragents can still access your site’s content.

MultithreadingThe threaded RemoteFileLoader object will automatically create transports as needed, so you can have as many simultaneous requests going on in the background as you want. Plus, it’s smart enough to reuse transports that are idle or loading into the same target.

EasyYou can load any file anywhere with just a function call.

So the question is how do I create a website in less than ten minutes Max? Simple, first take a look at Angus’s wonderful demo page and play around for a few minutes. When you’re done being amazed, download the example.

Script License Agreement

HTMLHttpRequest v1.0beta (c) 2001-2005 Angus Turnbull, TwinHelix Designs

Licensed under the CC-GNU LGPL, version 2.1 or later

This is distributed WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

Open the content folder in your favorite text editor and use any of the pages as an example for your content pages. Next, fill body with your content – for now use text only. Open htmlhttprequest.html and delete everything except example 1. Change the li’s to your links in ul id=”demoLinkList”. Upload the pages to your favorite directory. That’s it, you’ve done it! You’ve just made an AJAX website that loads all of its content asynchronously. Have look at my 10 minute example here (I really put myself on the clock).  Download my example here

Obviously, there are several components missing if you want to build a public website out of this example. Bookmarking, back button functionality and a contact form just to name a few. The other component that would be very useful is a way to pull the content from a database so this could be implemented in blogs and other CMS’s.

Over the next few weeks I will be working on these issues and will release a downloadable package containing everything a beginner will need to construct a basic but complete AJAX website. Stay tuned : )