AJAX Design Patterns

February 5, 2006

Christian Decker wrote this terribly early in the morning:

WidgetBucks - Trend Watch - WidgetBucks.com

By now the entire World has heard about AJAX, even those who don’t care about Web-Development have seen the potential of this new technology. Everybody is tired of endless introductions on how cool AJAX is and those endless lists of good examples like Google Suggest, GMail and alike, so I decided to cut a long story short and jump right into the real tutorial.

Keep your web page design in mind when you are deciding how to set up your site, considering the fact that web design makes up a huge part of usability and thus return traffic, making web site design a very good investment whether that investment is time to learn design concepts or money hiring a good design service.

Is this tutorial any different from the others? Well yes and no, it is different in being a tutorial on how to design and build a complete site and not just some fancy little details like how to turn caching in AJAX off or how to create a fancy widget. To keep the tutorial readable, and to avoid having to implement low level functionality, I’m using the dojo toolkit, I tried prototype too and really enjoyed working with being a really nice and easy to use Library, but dojo provides much more functionality bundled with it. For both frameworks one thing is true: documentation is scarse, and I spent alot time debugging and reading posts on the newsgroups.

For debugging I suggest using Firefox Venkman and the really nice Firebug extension, which make AJAX a lot easier to understand, especially FireBug’s "Log each Request" Feature.

In this tutorial we will try to design a community portal as it has a wide range of different components that give a good overview of what is archievable with AJAX, also it should provide you with the basic tools that will help you in more complex applications.

What we want

As developers we need to know where we want to go, before starting right away. The requirements analysis is not part of this tutorial so I’ll just write down the basic functionality for our Portal:

Pages: Load and show simple HTML Formatted content.
User: we want to be a community so the possibility for users to register themselfs, create a Profile and communicate with others is fundamental.
Messages: some sort of messaging center is nice too, and not too difficult to implement, it allows private communication between the users.
Forum: talking about communications, what could be better than a Forum to let the Users talk about whatever they want?

Many more things will be added later but for now this should be enough for some sleepless nights =D

The Layout

Although the focus should be on the development of the functionality, the layout is still as important as the application itself. It gets even more important because the application can be good but without an interface that is functional it is useless. We’ll use a layout that is easy yet functional:

The content area.
A sidebar for context related options.
The main menu (basically this just selects between modules).
The title, nothing fancy here
A list with the online users.

Modules

Basically with AJAx we step away from the classic one page-at-a-time view of doing things, and we have to start talking about a more Event Driven architecture, or MVC-Model if you prefer.
We’ll define an API that abstracts from the actual page so that we can then create modules that do more complex tasks.

To get back to this tutorial we will have several small modules that represent parts on the site, along with real modules we will have some virtual modules that take care of some functionality, but more on this later. Modules in this tutorial include:

Page: this will be the first module we will be implementing, it allows to simply display the contents of a file in the contents area of the site, it does nothing fancy.
User: this module is used for several different tasks:
- Register: register a new User
- Login
- Profile: show the profile of a User
Online: once we have users we can easily implement a component that allows us to show which users are online, and with AJAX this is possible almost in realtime. It is a nice effect and very easy to implement.
Forum: what would a community site be without a Forum?

The implementation

We will encapsulate all of our functionality in JavaScript variables, this is similar to static classes in Java and makes it possible to have some sort of clean namespace division between the modules. First of all we will have to create the engine. The engine is the part that handles loading of all the other modules and gives them abstract ways to interact with the page. The idea behind this is that the page interface (layout, stylesheet, …) and Engine build an abstraction layer so that it is easier to implement the functionality easier, without having to bother about representational issues. In other words we build an API.
The first and morst important thing the engine has to do is initialize everything.

var Engine = {
  bootstrap: function(){
    this.setStatus("Loading...");
    dojo.require("dojo.io.*");
    dojo.hostenv.writeIncludes();
    if((""+document.location).indexOf('#') < 0){
      Engine.loadPage("#Page/Welcome");
    }else{
      Engine.loadPage("" + document.location);
    }
  },

This part is easy to understand it does nothing else than set the status to "Loading…", then include some dojo packages and then display a page using Engine.loadPage() as is shown later on. As you can see everything is bundled into a variable named "Engine" thus making it easy to reference it from outside. The bootstrap function is called by the following code in the page:
<body onload="Engine.bootstrap()"></body> The next thing to do is to give the Engine the ability to load modules, this is done by downloading a JavaScript file that contains the Module (again encapsulated in its own namespace) and then calling init() of the Module which will initialize the module:

  loadedModules: new Array(),
  modules: new Array(),
 
  loadModule: function(module){
    if(Engine.loadedModules[module])
      return;
    dojo.io.bind({
      url: "javascript/" + module + ".js",
      sync: true,
      error: function(type, evaldObj){Engine.showError("Error while loading module.");},
      load: function(type, data, evt){
        eval(data);
        Engine.modules[module].execute(uri);
      }
    });
  },

For performance issues we don’t want to download the modules more than once, that’s why we use the two arrays in the first two lines: loadedModules[] is an array of booleans which to every modulename tells us if it was loaded or is yet to be loaded, the second array contains references to the Modules themselfs (being variables they can be referenced like this). loadModules() itself does nothing fancy, it just issues a Synchronous XMLHTTPRequest to download the Module’s source code. It’s synchronous because we don’t want anything to happen at this stage, a call to a function that is not yet loaded for example, this gives us a certain security. Notice that the code is evaluated using eval().
Now we move on to the real magic: loadPage(). It will get a URI as input and it will then load the correct module and pass control to the module, which will then take care of the rest:

  uri: &quot;/&quot;,
 
  loadPage: function(url){
    Engine.setStatus("Loading...");
    if(!url)
      url = "" + document.location;
    var hashIndex = url.indexOf('#');
    if(hashIndex < 0 || hashIndex <= url.length-2)
      return Engine.hideStatus;
    uri = url.substring(hashIndex + 1);
    var moduleLength;
    if(uri.indexOf('/') > 0)
      moduleLength = uri.indexOf('/');
    else
      moduleLength = uri.length;
    var module = uri.substring(0,moduleLength);
    uri = uri.substring(uri.indexOf('/'));
    if(Engine.loadedModules[module] && ! dojo.lang.isUndefined(Engine.modules[module])){
      Engine.modules[module].execute(uri);
    }else{
      Engine.loadModule(module);
    }
  },

The URI is there so other modules and function get work with it easily without having to parse it over again. As you can see loadPage() mainly interprets the URL. Determining the module to load is fairly easy being the first part of the Query string. Some may ask why we’re using URLs like "http://www.example.com/Page#This/is/a/long/string". This is because we don’t want to break the ability to bookmark the pages. AJAX itself does break the bookmarkability because everythin happens in a single page, whereas without AJAX every URL identified a single resource. We use the part behind the ‘#’ because the browser does not issue another request to the webserver, which would unload the entire AJAX application, yet we assign a resouce to a unique URL. bootstrap() also loads the requested page from the URL using loadPage(). Cutting a long story short: a user can browse through our site then copy&paste the URL somewhere and when he returns to the URL he will see exaclty the page he left.

The URL is interpreted in the following way:

Everything in front of the ‘#’ is discarded as it is only the location of the application.
The part between the ‘#’ and the first ‘/’ is the module name which will be loaded if it isn’t yet.
Everything from the ‘/’ to the end of the URL is the argument that is passed to the Module’s execute() function (see the Page module below as an example).

All that is left now to do is implementing some helper functions that will later be used by the modules:

  setStatus: function(message){
    if($('status') != null){
      $('status').parentNode.removeChild($('status'));
    }
    var body = document.getElementsByTagName("body")[0];
    var div = document.createElement("div");
    div.style.position = "absolute";
    div.style.top = "50%";
    div.style.left = "50%";
    div.style.width = "200px";
    div.style.margin = "-12px 0 0 -100px";
    div.style.border = "0px";
    div.style.padding = "20px";
    div.style.opacity = "0.85";
    div.style.backgroundColor = "#353555";
    div.style.border = "1px solid #CFCFFF";
    div.style.color = "#CFCFFF";
    div.style.fontSize = "25px";
    div.style.textAlign = "center";
    div.id = 'status';
    body.appendChild(div);
    div.innerHTML = message;
  },
 
  hideStatus: function(){
    Engine.opacityDown($('status'));
  },
 
  opacityDown: function(theElement){
    if(theElement == null)
      return;
    var opacity = parseFloat(theElement.style.opacity);
    if (opacity < 0.08){
      theElement.parentNode.removeChild(theElement);
    }else{
      opacity -= 0.07;
      theElement.style.opacity = opacity;
      setTimeout(function(){Engine.opacityDown(theElement);}, 50);
    }
    return true;
  },
  setContent: function(content){
    $('content').innerHTML = content;
  },
 
  showError: function(message){
    Engine.setStatus(message);
    setTimeout("Engine.hideStatus()",10000);
  }
}

This completes the engine. You can find the full script here.

The first module

Now we’ll move on to implement our first real module. It’s task is to load an external resource (an HTML page in this specific case) asynchronously and then display it in the content area.

var Page = {
  init: function(){
    Engine.modules["Page"] = Page;
    Engine.loadedModules["Page"] = true;
  },
 
  execute: function(uri){
    try{
      dojo.io.bind({
        url: "resources" + uri + ".php",
        sync: false,
        error: function(type, evaldObj){
          Engine.showError("Error while loading Content.");},
        load: function(type, data, evt){
          Engine.setContent(data);
          Engine.hideStatus();
      });
    }catch(e){
      alert(e);
    }
  }
}
Page.init();

When the module is loaded it will register itself to the Engine (see the init() function) and the Engine will then call execute() which does nothing else than to load the page in the background and then display it in the content area. Easy isn’t it?
But you can already see that we can create really complex modules too as will be shown in a later part of this tutorial when we’ll create a Forum as a Module.
The source of the Page module can be found here.

Use AJAX with your ecommerce hosting for powerful inline shopping cart functions, and deliver custom content based on your internet marketing services. With an open web site design the use of AJAX can streamline the delivery of key content, even if you don’t use the best hosting provider, AJAX runs efficiently on any hosting service. Does your website hosting choice make a difference in your AJAX scripts and performance? Naturally the responsiveness of the web hosting service and speed of the communicating web server need to be adequate - but you will find that today’s cheap hosting is typically par with premium web site hosting services of the past.

Putting it all together

You can take a look at the running version of this application or download the entire source code and analyse it. I hope this tutorial was usefull and helped you understand how to design your application. See you all in the next part discussing an Online display.

Also interesting posts:

111 Responses to “AJAX Design Patterns”

Darren Straight’s Blog Says:
February 6th, 2006 at 12:45:42
[...] Read the rest here. [...]
é˜³æ˜¥é¢çš„å¦ä¹ ç¬”è®° »Blog Archive » AJAX Design Patterns Says:
February 6th, 2006 at 15:08:27
[...] read more | digg story • • • [...]
jDavid.net “@” gmail.com Says:
February 7th, 2006 at 01:03:14
[...] http://snyke.net/blog/2006/02/05/ajax-design-patterns/ No Comments so far Leave a comment RSS feed for comments on this post. TrackBack URI Leave a comment Line and paragraph breaks automatic, e-mail address never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong> [...]
Thomas Winston Thorpe » Blog Archive » links for 2006-02-07 Says:
February 7th, 2006 at 04:18:49
[...] AJAX Design Patterns (tags: ajax) [...]
DoNews Time » Blog Archive » Fading Roses & Raging Viruses Says:
February 7th, 2006 at 04:30:24
[...] Fading Roses & Raging Viruses AJAX Design Patterns [...]
A practical AJAX tutorial — My Stuff Archive Says:
February 7th, 2006 at 06:19:50
[...] Is this tutorial any different from the others? Well yes and no, it is different in being a tutorial on how to design and build a complete site and not just some fancy little details like how to turn caching in AJAX off or how to create a fancy widget. It also provides a practical example of the use of the dojo toolkit. [...]
Ryan Sholin's J-School Blog Says:
February 7th, 2006 at 08:18:26
[...] Fading Roses & Raging Viruses Some instructional ajax stuff that I’m clearly unprepared to learn at this juncture. (tags: ajax) [...]
AJAXé“ » æœ€æ–°AJAXæ•™ç¨‹ï¼šAJAX Design Pattern, ä½¿ç”¨GMailæ¥åšä¾‹å Says:
February 7th, 2006 at 09:16:50
[...] http://snyke.net/blog/2006/02/05/ajax-design-patterns/ [...]
Whole Ball o’ Wax » Today’s del.icio.us bookmarks Says:
February 7th, 2006 at 14:14:50
[...] AJAX Design Patterns – This site describes several of the application design patterns that can utilize AJAX. Tagged as: ajax javascript tutorial webdesign [...]
ç™¾æ— ç¦å¿Œ » Blog Archive » links for 2006-02-07 Says:
February 7th, 2006 at 16:21:46
[...] Fading Roses & Raging Viruses (tags: ajax) [...]
Bohr’s Blog » links for 2006-02-07 Says:
February 7th, 2006 at 21:19:00
[...] AJAX Design Patterns [...]
Ronald Yau » Blog Archive » AJAX Design Patterns Says:
February 7th, 2006 at 22:17:42
[...] read more | digg story [...]
Internation 1.0 » AJAX … Says:
February 8th, 2006 at 13:25:17
[...] De ‘buzz’ rond AJAX is al een tijdje bezig, in deze korte tutorial legt collega-blogger Snyke in klare taal uit hoe hij AJAX gebruikt om het framework voor een website te maken. [...]
Ajax Lessons » Blog Archive » AJAX Design Patterns Says:
February 11th, 2006 at 16:17:55
[...] Christian Decker has posted an interesting tutorial on his blog Fading Roses & Raging Viruses about AJAX design patterns. He is using the dojo toolkit framework in his tutorial to get you started on you AJAX application. By now the entire World has heard about AJAX, even those who donâ€™t care about Web-Development have seen the potential of this new technology. Everybody is tired of endless introductions on how cool AJAX is and those endless lists of good examples like Google Suggest, GMail and alike, so I decided to cut a long story short and jump right into the real tutorial. [...]
Tiziano ’s Blog » AJAX Design Patterns Says:
February 13th, 2006 at 21:53:53
[...] read more | digg story [...]
Ajaxå¦ä¹ ç¬”è®° »Blog Archive » All about Ajax…. Says:
February 16th, 2006 at 16:12:58
[...] AJAX Design Patternä»¥GMailä¸ºä¾‹åä»‹ç»Ajaxè®¾è®¡æ¨¡å¼ [...]
jiangws » Blog Archive » AJAX Design Patterns Says:
March 16th, 2006 at 03:45:46
[...] Fading Roses & Raging Viruses: Snyke wrote this terribly early in the morning: [...]
Ajaxian » Ajax Tutorial Round-up Says:
March 17th, 2006 at 16:44:33
[...] AJAX Design Patterns [...]
Ilija Studen Says:
March 18th, 2006 at 13:29:19
I don’t like the way you created URLs. If you want to keep URLs bookmarkable you can simple use something like:

Edit this document

If JS is enabled Engine will execute event (pass whatever params you want) and return false. If not we are using the good old application to handle the request with refresh.

Or I’m missing something important here
Ilija Studen Says:
March 18th, 2006 at 13:31:54
Sorry, it cleaned up the code. Can you reformat it or it is lost permanently?
Snyke Says:
March 18th, 2006 at 13:43:51
This is a bit trickier than you suggest because if the user bookmarks this page he will come back to it sooner or later, this means that he is using the bookmarked page as entry point…
You’d have to duplicate the AJAX detection for every URL…
nxmxbbd Says:
March 18th, 2006 at 17:04:20
Ajax ç½‘æ‘˜åŠæ•™ç¨‹…

Ajax ç½‘æ‘˜åŠæ•™ç¨‹…
Iago Blog » Tutoriales Ajax Says:
March 18th, 2006 at 17:56:23
[...] AJAX Design Patterns [...]
Ilija Studen Says:
March 18th, 2006 at 20:51:02
You are right.

With the method I’m suggesting you can’t replicate the page if your coming with bookmarked link, but it works really well because routing of such request is easier and it works without JS enabled.
Snyke Says:
March 18th, 2006 at 23:33:19
I think your point is absolutely right though, one would only have to check if JavaScript is enabled somewhere in the header and redirect to the BasePage if it is, otherwise the classical One-Page-at-a-time approach is used.
Thank you for pointing me out this option I will probably include it in the next tutorial.
Ritesh Jariwala - (Actkid) Rich Internet Applications (Flash, Flashcom, PHP, MySQL, AMFPHP, Remoting, ColdFusion, Flex) Developerâ€™s Blog : 30 Ajax Tutorials Says:
March 19th, 2006 at 06:26:26
[...] AJAX Design Patterns [...]
Wordpress » Blog Archive » Ajax Tutorial Round-up Says:
March 19th, 2006 at 23:37:57
[...] AJAX Design Patterns [...]
Art and Technology » Says:
March 20th, 2006 at 19:57:22
[...] AJAX Design Patterns Excellent tutorial on how to build an AJAX powered website, with dynamic page loads. [...]
Roger Says:
March 28th, 2006 at 12:47:14
Ajax Design is good…
Jeff Says:
March 29th, 2006 at 01:43:16
Round-up of 30 AJAX Tutorials…

There are quite a few AJAX demos and examples on the web right now. While these are invaluable to learning AJAX, some people need a bit more information than just a raw piece of code. In todays environment there are many ways to learn AJAX including, b…
ScriptSe Says:
April 8th, 2006 at 00:24:16
Nice code. But seems demo doesn’t work (forum e.t.c. show an database error)
Anonymous Says:
April 8th, 2006 at 23:06:06
AJAX Design Patterns…

In this tutorial we will try to design a community portal as it has a wide range of different components that give a good overview of what is archievable with AJAX, also it should provide you with the basic tools that will help you in more complex appl…
Chrono Tron - 100% » Blog Archive » AJAX, Get Started, Resources & Tutorials Says:
April 11th, 2006 at 13:44:31
[...] AJAX Pattern for websites, a fascinating tutorial to build a community portal using AJAX alone. [...]
Saahil Chopra » Blog Archive » Ajax For Beginners Says:
April 12th, 2006 at 09:39:51
[...] AJAX Pattern for websites, a fascinating tutorial to build a community portal using AJAX alone. [...]
CodeRecipe Official Blog » Blog Archive » Ajax round up — Top 30 Says:
April 30th, 2006 at 15:49:40
[...] AJAX Design Patterns Excellent tutorial on how to build an AJAX powered website, with dynamic page loads. [...]
JanuMedia » 30 Links to AJAX Tutorials Says:
May 16th, 2006 at 06:25:18
[...] AJAX Design Patterns [...]
ngsld Says:
May 28th, 2006 at 14:10:40
Hi, Nice!
sdfsdfx Says:
June 11th, 2006 at 00:37:38
Design Patterns Excellent tutorial on how to build an AJAX powered website, with dynamic page loads
sdfsdfx Says:
June 11th, 2006 at 00:59:19
å—¨,,,å¹²å˜›è¦è¿™æ ·çš„å“¦,,,æ°”æ»äº†,
sdfsdfx Says:
June 11th, 2006 at 01:03:46
ä½ å¦ˆå¦ˆçš„å“¦,,,,å¼æ»ä½ ,,ä»–å¦ˆçš„,
sdgfsdge Says:
June 11th, 2006 at 01:07:32
æ‰“ä½ æ»,,,æ‰“ä½ å…¨å®¶
sdfsdfw Says:
June 11th, 2006 at 01:09:22
ä½ å¦ˆå¦ˆçš„å“¦,,,,å¼æ»ä½ ,,ä»–å¦ˆçš„,
å—¨,,,å¹²å˜›è¦è¿™æ ·çš„å“¦,,,æ°”æ»äº†,
sdfsdfx Says:
June 11th, 2006 at 01:10:06
å¦ˆå¦ˆçš„å“¦,,,,å¼æ»ä½ ,,ä»–å¦ˆçš„
COLD CASE » Blog Archive » AJAX Design Patterns Says:
June 14th, 2006 at 09:06:47
[...] read more | digg story Explore posts in the same categories: coldcase [...]
The Art Of Mind :: AJAX, Get Started, Resources & Tutorials :: June :: 2006 Says:
June 22nd, 2006 at 07:11:27
[...] AJAX Pattern for websites, a fascinating tutorial to build a community portal using AJAX alone. [...]
Fading Roses & Raging Viruses » Site design using Prototype Says:
July 4th, 2006 at 16:19:00
[...] This is why in this tutorial I’ll try to give you an idea on how the actual design works. I’ll be heavily relying on my last tutorial for the layout of the final application, but we’ll go much more into detail about the decisions we take. Some parts may be applicable to non-Web-2.0 Web design and some even come in handy when designing completely non-web related applications [...]
Sammy Says:
July 14th, 2006 at 08:48:16
Great!

As I am a newbie, what tools to be used for Ajax development?
worzelhund Says:
July 20th, 2006 at 18:16:07
Great Script,

Buuuut, Whats about URL Parameters for php scripts i.e.?
worzelhund Says:
July 20th, 2006 at 18:17:47
Aaand What is this: uri: "/", =)
Programming » AJAX Design Patterns Says:
August 23rd, 2006 at 12:08:36
[...] In this tutorial we describe how to build a modularized architecture to create complex AJAX Applications. Unlike most of the AJAX tutorials we focus on the design and implementation of a whole application and not on the low level details.read more | digg story [...]
bueroeinsnull|blog » Blog Archive » ajax Says:
August 30th, 2006 at 19:46:41
[...] Ajax Design Patterns: Fading Roses & Raging Viruses [...]
bueroeinsnull|blog » Blog Archive » //ajax Says:
August 30th, 2006 at 22:31:44
[...] Ajax Design Patterns: FadingRoses & Raging Viruses [...]
Greg Says:
September 2nd, 2006 at 23:24:38
Many thanks for tutorial and code.
John Andersen Says:
September 18th, 2006 at 14:05:43
Thank you for a good turtorial!
Unfortunately it does not cover the issue, where javascript is not available and thus the developed site will not work!
If you have to use AJAX, ensure that your site will work the same with and without javascript!
And before you ask :D, yes, I am developing a site that does exactly that.
Best wishes,
John, Latvia
Snyke Says:
September 18th, 2006 at 19:22:35
Thanks for your feedback, it helps improving for the future.
Downgradability has been a big issue with Ajax applications and I think the nicest solution until now is the behaviour library of Ben Nolan. It helps keeping the Javascript side separated from the actual HTML code and allows you to dynamically change the behaviour (thus the name ^^) of elements.
Give it a try, it will help ^^
Javascript-Channel.com / AJAX Says:
September 20th, 2006 at 07:04:52
[...] AJAX Design Patterns. [...]
Goresan Tinta Mucharom :: 30 Links to AJAX Tutorials :: September :: 2006 Says:
September 26th, 2006 at 17:31:56
[...] AJAX Design Patterns [...]
Huge list of Ajax tutorials | Ajax Blog Says:
October 2nd, 2006 at 10:32:10
[...] Ajax Design Patterns at Snyke [...]
All Cusco | Blog » Blog Archive » Top - 126 tutoriales Ajax Says:
October 2nd, 2006 at 16:52:55
[...] Ajax Design Patterns : at Snyke [...]
Ajax Tutorials « Blooming Webs Says:
October 7th, 2006 at 08:01:03
[...] Slide Show with Controls at ZapatecCreate Your Own Ajax Effects animated text; at ThinkVitamin Make all your tables sortable at Kryogenix Ajax Design Patterns at Snyke [...]
TechnoRepublic » Blog Archive » Top 126 AJAX Tutorial Says:
October 7th, 2006 at 22:50:37
[...] Ajax Design Patterns : at Snyke [...]
Good AJAX Tutorials at A.JAX Says:
October 15th, 2006 at 12:08:21
[...] Ajax Design Patterns : at Snyke [...]
Fading Roses & Raging Viruses » Says:
October 17th, 2006 at 01:33:35
[...] [::[ Tue 17 Oct 2006 ]::[ General ]::[ ]::] Back in february when I wrote my first two tutorials on how to build an Ajax Portal, I explained how to make the pages bookmarkable. Bookmarks in Ajax Applications are very different from bookmarks in Web 1.0. In classic Web applications bookmarks pointed to a Resource (always remember that URI stands for Uniform Resource Identifier) and that was really why bookmarks were (and still are) so usefull, you could save the URL, come back later and find the same content, send it to a friend and he would see the same thing as you did, this sharing is really popular today (see Digg.com and del.icio.us). Bookmarks in Ajax Applications go far beyond this resource identification, they conceptually save the state of the Ajax Application itself, so that the state can be resumed at a later time. Going back to the example I used in the tutorials, the currently displayed content will certainly be important to save, so saving the currently displayed document in the URL is important, on the other hand the automagically updating list of online users is not context relevant and is not important to save to the URL. in fact the user list is volatile, updates independently from the page itself and would be a complete overkill to put into your URL.To sum it up:KISS: Keep it simple stupid, don’t overload the URLs with useless state information that isn’t necessary. Creating too many differing URLs is not good coding style, keep them short and easy to remember, even better if it is something that makes sense.The reason why I write this article is that just today I received a comment on my old tutorial asking how to save Form data in the URL. First of all: it wasn’t possible in Web 1.0, why should you want to in Web 2.0? Forms submitted with the POST-Method isn’t saved in classic URLs either, and we never complained about this. In Web 2.0 we now have to first answer a conceptual question: is the data sent from the Form worth saving to the URL? If I have a Registration Form I wouldn’t want a user to be able to save the Page after the Form, because it would mean that every time he opens this page it would issue a new Registration request. Where saving Form data may be relevant is a Search feature where the searchtherm is saved, but again this is no big deal because you can simply add a parameter to the URL.Although the difference may be subtle it is still important to keep this in mind, there are things that are nice to be bookmarkable, others aren’t, the question of what is best is to be answered by you when developing [...]
H.G.M. Blog » Blog Archive » Helpful tutorials to learn Ajax. Says:
October 25th, 2006 at 02:11:37
[...] Ajax Design Patterns : at Snyke [...]
Pawan Says:
October 25th, 2006 at 10:59:39
Hi..

Its a good help…

Will get back with some Ajax related issues
Raman Says:
October 26th, 2006 at 20:00:31
Simply great demonstration. I am planning to implement what you wanted to do. Though I dislike incorporating DOJO here. But its OK.
Ajax Girl » Huge list of Ajax tutorials Says:
November 10th, 2006 at 22:30:26
[...] Ajax Design Patterns at Snyke [...]
David Escorts Says:
November 15th, 2006 at 02:48:38
Great tutorial. Ajax is the future. Hope this tut helps me. Thx.
Lautreamont Says:
November 15th, 2006 at 02:53:05
Wow! I’ll try to use some of this in next theme for my site. Just hope this does not become to hard for an Ajax newbie like me.

Thanks so much, dude.

:o]
James Says:
November 21st, 2006 at 22:09:54
Hi All Experts,
I want to use AJAX (Asynchronous JAVA script with XML ). How can i Optimize the site SEO.
as Java script and flash is not recommended by search engines. Any suggestion or help is welcomed. With Regards.
DLife » AJAXèµ„æ–™å¤§å…¨ Says:
November 24th, 2006 at 04:18:11
[...] AJAX Design Patterns - â€œIs this tutorial any different from the others? Well yes and no, it is different in being a tutorial on how to design and build a complete site and not just some fancy little details like how to turn caching in AJAX off or how to create a fancy widget.â€ by Christian Decker [...]
130 Ajax Tutorials. - Ajax.pro Says:
November 24th, 2006 at 07:22:49
[...] AJAX Design Patterns - â€œIs this tutorial any different from the others? Well yes and no, it is different in being a tutorial on how to design and build a complete site and not just some fancy little details like how to turn caching in AJAX off or how to create a fancy widget.â€ by Christian Decker [...]
Amir’s Blog » Blog Archive » A Great List of Ajax Tutorials Says:
November 25th, 2006 at 11:26:44
[...] AJAX Design Patterns - â€œIs this tutorial any different from the others? Well yes and no, it is different in being a tutorial on how to design and build a complete site and not just some fancy little details like how to turn caching in AJAX off or how to create a fancy widget.â€ by Christian Decker [...]
JaSk Says:
November 26th, 2006 at 07:22:15
I’ve tried to replicate the example, but I keep getting an error with $ not defined, what can it be?.

Thanks
Christian Decker Says:
November 26th, 2006 at 12:33:58
This might be due that you didn’t install the prototype library, try to see if it loads all right and that you did put the right permissions ^^
130 Ajax Tutorials. - Ajax.pro Says:
November 27th, 2006 at 01:38:32
[...] AJAX Design Patterns- â€œIs this tutorial any different from the others? Well yes and no, itis different in being a tutorial on how to design and build a completesite and not just some fancy little details like how to turn caching inAJAX off or how to create a fancy widget.â€by Christian Decker [...]
james Says:
December 3rd, 2006 at 18:47:40
Hey,

when is the next part of your tutorial going to be released.
JUST GOOD DESIGN | BLOG » AJAX time! Says:
December 6th, 2006 at 11:11:33
[...] Ajax Design Patterns [...]
Huge list of Ajax tutorials at readxml Says:
December 7th, 2006 at 00:57:25
[...] Ajax Design Patterns at Snyke [...]
guest Says:
December 18th, 2006 at 05:01:51
ä½ è€æ¯
Top 126 Ajax Tutorials : Ultimate Web Developer Lists : eConsultant Says:
December 29th, 2006 at 04:22:19
[...] Ajax Design Patterns : at Snyke [...]
137.sunnyjacob.co.uk » Blog Archive » AJAX Tutorials Says:
February 5th, 2007 at 20:04:21
[...] AJAX Design Patterns [...]
» 100 Ajax Tutorials and Resources - Photoshop Tutorial - The Tutorial Blog Says:
February 5th, 2007 at 20:58:32
[...] Ajax Design Patterns [...]
Ajax Plugins » Blog Archive » About for Ajax Says:
February 11th, 2007 at 14:51:43
[...] Ajax Design Patterns: Fading Roses & Raging Viruses [...]
Bear Says:
February 13th, 2007 at 16:37:14
I’m trying out this app. Now i would like to load a list with the possible effet of drag and drop… only when the page is loaded into the app it stop working…anyone a idea?
Ajax Plugins » Blog Archive » Top 126 Ajax Tutorials Says:
February 17th, 2007 at 07:02:35
[...] Ajax Design Patterns : at Snyke [...]
Ajax para tu web!! » |KENAVIK | BLOG Says:
March 13th, 2007 at 01:07:31
[...] Ajax Design Patterns [...]
robert Says:
March 18th, 2007 at 18:23:23
hi all. nice blog. its very ineresting article.
AJAX Tutorials « designcreatology Says:
March 20th, 2007 at 17:18:59
[...] AJAX Design Patterns - In this tutorial we describe how to build a modularized architecture to create complex AJAX Applications. Unlike most of the AJAX tutorials we focus on the design and implementation of a whole application and not on the low level details. [...]
Dicas Neosite » Blog Archive » 138 tutoriais Ajax Javascript gratuitos Says:
March 24th, 2007 at 03:10:03
[...] AJAX Design Patterns [...]
AJAX Tutorials « Blogtology Says:
April 8th, 2007 at 20:42:51
[...] AJAX Design Patterns - In this tutorial we describe how to build a modularized architecture to create complex AJAX Applications. Unlike most of the AJAX tutorials we focus on the design and implementation of a whole application and not on the low level details. [...]
alex Says:
April 12th, 2007 at 04:55:10
hi nice site.
SachinKRaj - get something useful from web 100 AJAX & JavaScript Tutorials « Says:
April 18th, 2007 at 14:25:39
[...] Ajax Design Patterns [...]
Tutorials « Kunal Vijan Says:
May 3rd, 2007 at 06:28:26
[...] Ajax Design Patterns [...]
AJAX Widgets and Tutorials « SKRaghav-Moves with Latest Updates Says:
May 12th, 2007 at 13:33:26
[...] Ajax Design Patterns [...]
hebertphp » 138 tutoriais de Ajax e Javascript gratuitos Says:
May 25th, 2007 at 20:21:50
[...] AJAX Design Patterns [...]
Top 15 Ajax Tutorials : Technical Lists : eConsultant Says:
June 8th, 2007 at 09:15:35
[...] AJAX Design Patterns 02. AJAX Live Search 03. AJAX Q and A on Yedda 04. Ajax tutorial with prototype 05. AJAX vote with [...]
decimus Says:
August 3rd, 2007 at 08:48:40
Hi,
is there any possibility to translate this tutorial to Polish?
let me know.
thx in advance!
Fading Roses & Raging Viruses » Blog Archive » Ajax, CSS, DOM and JS-related resources Says:
September 4th, 2007 at 21:36:55
[...] Ajax Design Patterns & Site design using Prototype: although I usually don’t plug my own stuf, I’m proud of these two creations So that’s it from my side, if you have more resources you’d like to share with the rest of the world post them on the original article.Popularity: unranked [?] [...]
100 Ajax Tutorials and Resources - Host and web design tools Says:
September 14th, 2007 at 22:55:34
[...] Ajax Design Patterns [...]
» Essential Web Design Bookmarks SharpProgrammer.Com Says:
October 7th, 2007 at 11:25:21
[...] Fading Roses & Raging Viruses Blog Archive AJAX Design Patterns [...]
100 Ajax Tutorials and Resources | ::: Ayiva ::: Says:
October 17th, 2007 at 08:16:22
[...] Ajax Design Patterns [...]
Eri Says:
November 5th, 2007 at 09:41:18
How do I submit a form, let say I have a suername and password form with a button submit. how would you do this?
Christian Decker Says:
November 5th, 2007 at 12:07:37
You’d add an eventlistener (

) and then process the request using Ajax.
Eri Says:
November 6th, 2007 at 01:54:06
Christian,

Thanks for your respond, I am very new at this and at programming and I would really appreciate it if you can take the example below and show me how will it work with your script.

Search Word

Photo

Regards,
Eri
Eri Says:
November 6th, 2007 at 01:58:40
I wasn’t able to past the code for the form but its really simple, I have a form that has a
name=”basicsearch”
method=”GET”
action=”search.php”
onSubmit=”return validatebasicsearch();”

there is also a text field/input box and a button with
type=”button”
value=”go”
class=”button”
onClick=”submitbasicsearch();”
title=”go”
naisioxerloro Says:
November 29th, 2007 at 00:12:11
Hi.
Good design, who make it?
Christian Decker Says:
November 29th, 2007 at 13:29:49
For the demo application I did the design myself (it’s quite minimalistic but I liked it at the time) and the blog has a template by 4u
Veeresh Says:
February 20th, 2008 at 07:00:02
Good article, I would helps us.

But, In contrast to Ajax features, the incompatible browsers affecting high performance applications. I am facing lot of problems during the implemention of complex Ajax Components. I am expecting one highly ajax compatible and standard browser, lets hope.

Thanks!

Veeresh
http://drveresh.googlepages.com/veeresh
Tatyana Says:
March 11th, 2008 at 19:40:50
My goal is to have rotating auctions showing on my homepage.

Tatyana’s last blog post..????????? ??????
Floroskop Says:
March 18th, 2008 at 12:32:44
Hello!
I think this try.

Coding Passion

~Because coding is what I do~

February 5, 2006