PART II
Chapter 9: Site and Application Architecture with Ajax 411
satisfy those users with a decade-old browser and computer technology, but neither should
they aim to please only those who upgraded to the latest releases yesterday.
The choice between progressive enhancement and graceful degradation will depend
much on the type of application/site being built, as well as the cost/benefit provided by the
amount of flexibility that is desired. Yet more often than not, in the evolution of an existing
Web site or application, progressive enhancement will likely be the philosophy of choice. It
might be thought then that for a brand-new application built in the Ajax era, graceful
degradation is the preferred philosophy. However, that may not be the case as there will
always be known limitations unless you degrade to the oldest forms of technologies. This
begs the question, why not approach things from the other direction for the sake of
simplicity? The trade-offs and limitations alluded to will all become clear as we implement
examples, so let’s get started by exploring in-page Ajax.In-Page Ajax
The idea of in-page Ajax is to add Ajax features within a page that performs some action in
an improved or richer manner but does not affect the overall structure of the page or
surrounding site or application. For example, we may have various widgets or features that
could be improved with Ajax such as on the fly validation, type-ahead suggestions or other
in page actions. However, even with an Ajax-aware browser viewing the page, the general
architecture of our site or application would stay the same. URLs would change, forms
would be posted—there would be just bits and pieces of Ajax goodness within. If the user
were to disable the necessary capabilities, the features would simply revert to some less rich
form or may even be unavailable if not mandatory for site usage. This approach epitomizes
the progressive enhancement philosophy as we start from the basics and build up.
As an example of in-page Ajax, consider a progressive enhancement scheme on a simple
search mechanism. In this example, a standard search facility is modified to use Ajax to enable
a suggest mechanism showing the possible choices or scale of results as the user types. We
saw such a system in the previous chapter in the section entitled “Auto Completion and
Suggestion.” To implement the search box traditionally in XHTML we might have:<form action="dosearch.php" method="GET">
<label>Search:
<input type="text" name="query" id="query" size="30" />
</label>
<input type="submit" value="Go" />
</form>As we can see in the preceding markup, no JavaScript is needed and it follows a traditional
Web pattern. To “Ajaxify” it, a class name can be added to the field we want to monitor and
provide suggestions for placing them in a nearby <div> tag:<label>Search:
<input type="text" name="query" class="ajaxsuggest" bind="dosuggest.php"
id="query" size="30" />
</label>
<input type="submit" value="Go" />
<br />
<div id="suggestionList"></div>