Handling Remote Files with JavaScript Click Interceptions

As you’ll certainly recall, in the previous section I built a basic web page that contained a bunch of links that opened several text files when someone clicked on them. This process required a reload of the complete web page. However, by using click interceptions it’s possible to modify this default behavior and perform the same task without reloading the whole web document.

To achieve this objective, I’m going to use a few JavaScript functions. These will be responsible for fetching the pertinent text files with Ajax, and for displaying the contents of these files within a unique DIV element.

This being said, here are the signatures of the functions that carry out the aforementioned tasks:

// send http requests with Ajax

function sendHttpRequest(url,callbackFunc,respXml){

var xmlobj=null;

try{

xmlobj=new XMLHttpRequest();

}

catch(e){

try{

xmlobj=new ActiveXObject("Microsoft.XMLHTTP");

}

catch(e){

alert('AJAX is not supported by your browser!');

return false;

}

}

xmlobj.onreadystatechange=function(){

if(xmlobj.readyState==4){

if(xmlobj.status==200){

respXml?eval(callbackFunc+'(xmlobj.responseXML)'):eval(callbackFunc+'(xmlobj.responseText)');

}

}

}

// open socket connection

xmlobj.open('GET',url,true);

// send http header

xmlobj.setRequestHeader('Content-Type','text/html; charset=UTF-8');

// send http request

xmlobj.send(null);

}

// define 'displayFileContents()' function

function displayFileContents(fileContents){

var filecont=document.getElementById('filecontainer');

if(!filecont){return};

filecont.innerHTML=fileContents;

}

// define 'initializeLinks()' function

function initializeLinks(){

var lnkcont=document.getElementById('linkcontainer');

if(!lnkcont){return};

var links=lnkcont.getElementsByTagName('a');

if(!links){return};

for(var i=0;i<links.length;i++){

// use click interception to display file contents on the same web page

links[i].onclick=function(){

sendHttpRequest('readfile.php?file='+this.href,'displayFileContents');

return false;

}

}

}

I’m not going to explain again how the first “sendHttpRequest()” function works, since you learned about it in previous articles of this series. You should pay attention to the other two functions, however, since they do deserve a quick analysis.

As you can see, the “displayFileContents()” function is really easy to follow, since it will fill a containing DIV, identified as “filecontainer,” with the contents of each sample text file being fetched via Ajax. This process doesn’t bear much discussion here.

The “initializeLinks()” function is the one that actually makes use of click interceptions. It will intercept each click that occurs in the list of links defined in the previous web document, and route the pertinent HTTP requests to a PHP file, in this case named “readfile.php.” Obviously, this last one will read the contents of each sample text file, and return them straight to the browser.

The definition of this simple PHP file is listed below, so you can grasp how it works:

<?php

if($fileContents=@file_get_contents($_GET['file'])){

echo '<p>'.$fileContents.'</p>';

}

else{

echo 'Error reading target file.';

}

?>

It's not very hard to understand, right? But, of course, the immediate consequence of using click interceptions here is that the contents of each text file created previously will be displayed on the same web document without having to reload it completely.

Besides, it’s worthwhile to stress another important detail: if scripting has been disabled in the client, the contents of the text files will still be loaded correctly. This is a clear example of the advantages of developing JavaScript applications that degrade gracefully.

Well, at this stage you hopefully understand how to use click interceptions to display the contents of several text files on the same web page without having to reload it completely. However, I guess that you want to see the complete source code of this web application in one place. Therefore, in the last section of this tutorial I’ll be listing all of its files for you.

Click on the link that appears below and keep reading.