Handling Remote Files with JavaScript Click Interceptions - The full source code of the text file reading application
(Page 4 of 4 )
As I promised you in the prior section, here are the signatures of all the source files that comprise this sample web application. It uses click interceptions to display the contents of several text files on the same web page, without having to reload it. Here they are:
(definition of 'textfile_links.htm' file)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example on reading text files using click interception</title>
<script language="javascript" type="text/javascript">
// 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(){
//alert(this.href);
sendHttpRequest('readfile.php?file='+this.href,'displayFileContents');
return false;
}
}
}
// call 'initializeLinks()' function when web page is loaded
window.onload=function(){
if(document.getElementById&&document.
getElementsByTagName&&document.createElement){
initializeLinks();
}
}
</script>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h1{
font: bold 18pt Arial, Helvetica, sans-serif;
color: #000;
}
h2{
font: bold 16pt Arial, Helvetica, sans-serif;
color: #000;
}
a:link,a:visited{
font: normal 10pt Arial, Helvetica, sans-serif;
color: #00f;
}
a:hover{
color: #f90;
}
p{
font: normal 10pt Arial, Helvetica, sans-serif;
color: #000;
}
#linkcontainer{
width: 300px;
padding: 5px;
background: #ffc;
}
#filecontainer{
width: 300px;
}
</style>
</head>
<body>
<h1>Example on reading text files using click interception</h1>
<div id="linkcontainer">
<ul>
<li><a href="textfile1.txt" title="Read contents of text file here...">Read contents of text file 1...</a></li>
<li><a href="textfile2.txt" title="Read contents of text file here...">Read contents of text file 2...</a></li>
<li><a href="textfile3.txt" title="Read contents of text file here...">Read contents of text file 3...</a></li>
<li><a href="textfile4.txt" title="Read contents of text file here...">Read contents of text file 4...</a></li>
</ul>
</div>
<div id="filecontainer"></div>
</body>
</html>
(definition of 'readfile.php' file)
<?php
if($fileContents=@file_get_contents($_GET['file'])){
echo '<p>'.$fileContents.'</p>';}
else{
echo 'Error reading target file.';
}
?>
In addition to all of the source files shown previously, below I included an image that shows how the contents of a particular text file are loaded into the web document without additional page reloads.
You can use all of the code samples shown in this article to acquire a more solid grounding in using click interceptions with JavaScript.
Final thoughts
It’s hard to believe, but we’ve come to the end of this series. Even so, the whole experience has been hopefully educational, since you learned how to use click interceptions with JavaScript to expand the functionality of a number of real-world web applications, including a basic image gallery, a text file reading program, and more.
So, with all of these friendly examples at your disposal, you shouldn’t have major problems utilizing click interceptions with your existing and future web applications.
See you in the next web development tutorial!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
