Max Kiesler - Designer
Make an AJAX Website in Less than 10 Minutes
SubscribeFriday, September 09, 2005
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.
Angus Turnbull of Twinhelix has written an interesting piece of code named, ”HTMLHttpRequest v1.0beta2” and it’s the perfect start to building your own rich client-side web applications that send and retrieve data to/from a server.
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 Support
This 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.
Accessibility
The 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.
Multithreading
The 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.
Easy
You 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 : )
[Technorati tags: ajax, javascript, xml, web design]
Comments on this post
baldo on 01/19 at 09:40 AM
nice!! tnx for tutorial
Tyler on 02/03 at 04:58 PM
Great tips.. thank Mark… I’ll looking forward for the new release
Ivan Minic on 02/07 at 04:29 AM
Thanks for the tips
Alex Battiston on 02/07 at 10:40 AM
thanks. very good!
Gromski on 02/08 at 05:05 AM
You mention that using the RemoteFileLoader “you can have as many simultaneous requests going on in the background as you want”.
Does this get around IE’s limit of having only two active connections at a time? I’m not sure I can see how it will…
Or does it simply queue requests so that once the connections become available the next request in the queue can be sent?
The only way I’ve managed to find around IE’s inherent connection limit (without hacking the user’s registry) is to use the ServerXML object instead…
Abhishek on 03/07 at 04:55 PM
Great Work WIll wait for you to post the full package
Wojciech Bednarski on 03/17 at 07:22 PM
nice!
karthikeyan on 03/24 at 06:37 AM
The calculation of the example code is not working properly !!!!
karthikeyan on 03/24 at 06:41 AM
the example code is download from your site which code’s calculate field doesn’t give the result.
Ganesh Iyer on 04/06 at 02:49 AM
Nice, but sometimes when I click a link it shows the page seperately, not in the same page. I think it should be fixed
padma on 04/20 at 11:51 PM
How to use Javascript and XML in Ajax
Basha on 05/09 at 11:24 PM
Its great work to understand about AJAX at first look.
Gary Wong on 05/18 at 02:02 AM
I have visited the site quite a few times, and have decided to comment here. Thanks for your hardwork. Truly good for my understanding about AJAX
Harry Maugans on 05/28 at 09:54 PM
Very nice, my problem in the past has been multithreading. Great resource.
123 on 07/01 at 04:25 AM
In IE (MyIE) does not work
web design on 08/04 at 11:28 PM
Ajax
I know .NET
but i am looking to learn Ajax......
found this resource great
musarath on 08/05 at 06:20 AM
Will the AJaX Technologie lead, what r the things should i need to instal to make it work.
rufdraft on 09/09 at 10:29 PM
i really love to know more about ajax technology
Web Designer on 09/24 at 11:20 AM
“Website in Less than 10 Minutes”
It’s better to take a piece of paper and plan it first 
chris on 09/27 at 02:20 AM
nice :O)
Anand - Internet Blogger on 10/23 at 02:27 AM
I am increasingly impressed by how AJAX has been spinning the internet around..Thanks for the tutorial…
Kumi Rauf on 10/26 at 09:23 PM
Plain & simple, Black & White, AJAX has a sturdy footing in the future of web applications
brijesh kumar on 12/08 at 10:57 PM
i m here 2 make u fun
naveen on 12/14 at 12:02 AM
It very easy to understand the AJAX Concepts.
naveen on 12/14 at 12:03 AM
It is very easy and simple to understand the AJAX Concepts
Search
Home | DesignDemo | VizList | mHub | About | Contact | News
Max Kiesler is an award-winning strategic designer and co-founder
and principal of Ideacodes.com, a web consultancy in San Francisco
focused on next generation websites. About Max...
This work is licensed under a Creative Commons Attribution 2.5 License