Handling Remote Files with JavaScript Click Interceptions

Introduction

Put in a simple way, click interceptions are a client-side mechanism for modifying (and eventually extending) the behavior of any “clickable” element of a web page to improve its existing functionality. In most cases, this process is performed by means of a simple “onclick” JavaScript event handler, which will fire up one or more functions associated to the element in question, in this way interrupting its normal behavior.

To demonstrate how useful click interceptions can actually be, in each preceding article of the series, I created different hands-on examples aimed at showing how to implement this handy click interception approach with real-world web applications. I covered the construction of a simple image gallery, the submission and validation of a simple web form with Ajax, and so forth.

Nonetheless, the inherent flexibility of click interceptions permits us to use them in many other cases with relative ease. Keeping this versatility in mind, in this last installment of the series I’m going to teach you how to utilize them to display the contents of several text files on the same web page.

Basically, my plan is as follows: first, I’ll create a basic web document containing a group of links, where each of them will load a sample text file. Then, via the click interception approach, I’ll modify the default behavior of these links to make the contents of the text files be displayed on the same web page, in this case using Ajax.

The example that I'm about to show you is indeed an appropriate end to this article series on using click interceptions with JavaScript. Thus, don’t waste more time in preliminaries; start reading this last tutorial. Let’s get going!