Section 3.5. Ajax Patterns Demos | Ajax Design Patterns

3.5. Ajax Patterns Demos

The Ajax Patterns Demos appear in many patterns as Refactoring Illustrations and also in the Solution section. They're all online at http://ajaxify.com/run/, and it would be worth trying them out. In addition, the full code base can be downloaded from that location; its installation is explained in the Appendix B. It includes the demos as well as completed code for Chapter 2. Note the demos have been tested on Firefox 1.5 and IE6, though most of them work on comparable browsers as well.

The server-side code is all PHP, but most of it is fairly trivial, so it should be fairly easy for all programmers to comprehend. PHP was chosen as it's quite easy for anyone to set up, on any platform. Also, the language itself is fairly "generic" in that anyone with web development experience should have no difficulty following the code.

The demos are organized around a refactoring theme. For most of the examples, there is an initial, "embryonic," Ajaxian application. Then, several parallel refactorings are applied to the same demo, each in a separate subdirectory. And each of these refactorings may have a further refactoring applied, contained in a deeper subdirectory. A tree structure emerges on the site, with each application having evolved in different ways.

For example, look at the evolution of Finite Cache Sum Demo (http://www.ajaxify.com/run/sum/xml/cached/expiry/), which has the path /sum/xml/cached/expiry/.

/sum/: First, there is the basic demo at /sum/. Enter some numbers and the server responds with a sum. As a basic Ajaxian applicationwith no form submission involvedthere are some foundational technologies illustrated here, but that's about it.
/sum/xml/: Next, the sum is refactored to receive results in XML form, as a demo is done for the XML Message pattern. The "xml" prefix on the URL tells you its lineage.
/sum/xml/cache: One benefit of the new XML form is its convenience for caching, so a further evolution is a basic cache. This is a refactoring illustration for the Browser-Side Cache pattern.
/sum/xml/cache/expiry: Finally, the cache undergoes further improvement. This time, a concession to the laws of physics is made, and the cache is now of finite size. Unused elements expire. So here's a further refactoring illustration for Browser-Side Cache.