JQuery_ Novice to Ninja - Earle Castledine [79]
But this technique has become far too unreliable: old browsers are updated with patches, new versions are released, and completely new browsers are introduced —seemingly every day! This means that workarounds in your code can (and will) break or become redundant, and you’ll have to become a walking encyclopedia of browser bugs.
Now, having said this, there are a couple of functions in jQuery (albeit holding on for dear life) that assist with browser sniffing.
$.browser has a few flags for determining if the current user’s browser is Internet Explorer, Safari, Opera, or Mozilla. Sometimes you’ll be unable to avoid using this to work around pesky cross-browser bugs.
$.browser.version, on the other hand, is a deprecated action that you should try to avoid (though it’s likely to remain in the library for compatibility). It reports the current version of the user’s browser. With these commands you can execute conditional code, like so:
if ($.browser.mozilla && $.browser.version.substr(0,3)=="1.9") {
// Only do this code in Firefox with version 3 (rv 1.9)
}
Relying on browser revision numbers and vendor names, though, is just asking for trouble down the road. You want to avoid fixing old code, especially when you could be writing shiny new code, so perhaps it’s time to talk about the alternative to browser sniffing …
Feature Detection
The reason browser sniffing has been exiled is that it targets the symptom, instead of the cause of the trouble. For example, Internet Explorer has no direct support for the opacity CSS property. Before we make use of opacity in our code, we could test to see if the user is using Internet Explorer and act accordingly. But the issue isn’t really Internet Explorer: the issue is opacity itself!
To replace browser detection, jQuery has introduced the $.support method to report on the abilities of the user’s browsers. Instead of asking, “Is the user’s browser Internet Explorer?” you should now ask, “Does the user’s browser support the opacity style?” like so:
if (!$.support.opacity) {
// Doesn’t support opacity: apply a workaround
}
The beauty of this approach is that if new browsers emerge in the future which also have no support for the opacity style, or if Internet Explorer suddenly starts supporting it, your old code will still work perfectly.
There are a dozen or so properties you can test for besides opacity. For example: $.support.boxModel returns false if a browser is in quirks mode, $.support.leadingWhitespace returns true if a browser preserves leading whitespace with innerHTML, and so on. Make sure you check the full list in Appendix A if your project requires it.
Ajax Crash Course
Where once “Ajax” was the buzzword du jour, today it’s merely another tool in our web development arsenal—a tool we use to provide seamless and natural page interactions. Ajax can be a bit finicky to implement … unless you’re using jQuery!
What Is Ajax?
The term Ajax was coined in 2005 as an acronym for Asynchronous JavaScript and XML. Many people found the term problematic, as they were already doing Ajax-like work but without always using the technologies mentioned in the acronym. Eventually the term has settled down to simply mean almost any technique or technology that lets a user’s browser interact with a server without disturbing the existing page.
The non-Ajax method of interacting with a server is the familiar model we’re accustomed to on the Web: the user clicks a link or submits a form, which sends a request to the server. The server responds with a fresh page of HTML, which the browser will load and display to the user. And while the page is loading, the user is forced to wait … and wait.
Ajax lets us fire requests from the browser to the server without page reload, so we can update