Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
AJAX or HTML?
Our application is now ready to be deployed in the production environment, supporting both AJAX-capable browsers as well as visitors with older browsers, visitors that have disabled JavaScript, or search engine spiders. However, we need to add the last missing bit: automatic selection of HTML or AJAX version of the application.
The easiest way to auto-detect the visitor’s capabilities is to include a short JavaScript code into the starting page of the HTML-only version of the application. For example, you could use the following code in the HEAD portion of the first HTML page to redirect the JavaScript-capable visitors to the AJAX application:
<script>location.replace("faq.htm")</script>
However, this solution does not check whether the browser supports the XMLHttpRequest object (and thus whether it’s safe to start the AJAX version of the application). You could write a more sophisticated check covering various browser implementations, but it is way simpler to rely on a wrapper library (Sarissa, in our case).
However, you cannot rely on JavaScript libraries being available until the page load is complete, so you cannot redirect the visitors until the HTML page is completely loaded. The resulting check would thus be the following:
function canWeDoAjax() {
try {
x = new XMLHttpRequest(); if (!x) return; // No AJAX support
} catch (e) {}
location.replace("faq.htm");
}
xAddEventListener(window,"load",canWeDoAjax);
If you don’t like the slight glitch that occurs after the HTML version of the page loads and gets replaced by the AJAX version of the application, you have to insert an extra page load in the process (plus you need a cookie to remember that the browser is not AJAX-capable):
- The starting page of the HTML application checks whether the NOAJAX cookie is set and uses JavaScript to redirect the visitor to a browser capabilities check page if the cookie is not present. The visitors without JavaScript support will obviously stay on the first HTML page.
- The browser capabilities check page just verifies whether the XMLHttpRequest object (and any other browser capabilities you might require, such as XSLT support) is available. If the visitor’s browser meets the requirements, the AJAX version of the application is launched; otherwise, the NOAJAX cookie is set and the user is redirected back to the first HTML page.
In my application, I’m giving you the option to select HTML or AJAX version of the application (for obvious demonstrative reasons), so my AJAX-checking function is a bit different than what you’d use in a production network, but still demonstrates the use of the AJAX-selecting cookie:
function canWeDoAjax() {
try {
x = new XMLHttpRequest(); if (!x) return; // No AJAX support
if (xGetCookie("NOAJAX")) return;
} catch (e) {}
if (confirm("Do you want to start the AJAX version of the application")) {
location.replace("faq.htm"); } else { xSetCookie("NOAJAX","1"); }
}
To keep in line with the Progressive Enhancements guidelines, the function is not declared in the HTML page itself, but in a JavaScript module that is included with the HTML markup produced by the categories.asp transaction.