Using Click Interceptions with JavaScript
(Page 1 of 4 )
Web pages with AJAX tricks load extra content when certain parts of the page are clicked without reloading the entire page. This improves the visitor's experience. Wouldn't you like to get that functionality for your web site? This four-part series shows you how to do it with a technique called "click interception."
Introduction
One of the most beautiful aspects of modern web design is the clear differentiation between the distinct parts or layers that comprise a web site. On one hand there's the structural markup that defines the structure of the different web documents of the site, while on the other hand, there are the CSS styles and JavaScript code that reside happily on separated files. What a wonderful scenario!
Indeed, over the last few years, this model has proven to be an efficient approach when it comes to separating structure from visual presentation, and also when it comes to extending the behavior of a web application by means of unobtrusive JavaScript.
Naturally, the use of unobtrusive JavaScript code is one of the main pillars for developing client-side applications that will degrade gracefully when scripting has been disabled on a browser, meaning that it's possible, for instance, to enrich (or expand) the behavior of a database-driven web application via client-side scripting without making the application itself depend entirely of JavaScript.
This way of linking one or more JavaScript programs to the bare bones structure of a web document leads directly to the implementation of a helpful technique known as "click interception." Before you start asking yourself what it is, let me give you a simple example: suppose for a moment that you've built with plain (X)HTML a fancy navigation bar for your brand new web site, whose elements link to different web pages. So far, nothing too complicated, right?
Now, say that instead of showing the contents of these web pages in different windows, you want to display them in a container of the same web document via Ajax. In this particular situation, you can assign an "onclick" event handler to each link of the navigation bar to handle each HTTP request without having to reload the whole web page. This means that you're actually "intercepting" each click (hence the method's name) and handling the requests in the way that you want.
Plus, there's an additional advantage in using click interceptions within the context of the previous example. If scripting has been disabled on the browser for whatever reason, the navigation bar will still work. Simple and efficient!
Now that you have a pretty clear idea of what a click interception is, it's time to move forward and back up these concepts with concrete examples. Having said that, in this article series, I'll be showing you how to implement click interceptions in different cases, so you can use them successfully as part of your own JavaScript applications.
Let's begin now!
Next: Building a web form for using click interceptions >>
More JavaScript Articles
More By Alejandro Gervasio
