Home arrow JavaScript arrow Page 4 - Handling Remote Files with JavaScript Click Interceptions
JAVASCRIPT

Handling Remote Files with JavaScript Click Interceptions


If you’re a web developer who frequently builds JavaScript applications, then you may have already used click interceptions, even without being aware of their numerous advantages. This four-part series, of which this is the final part, shows you how to get the most out of them.

Author Info:
By: Alejandro Gervasio
Poor Best
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
November 26, 2008
TABLE OF CONTENTS:
  1. · Handling Remote Files with JavaScript Click Interceptions
  2. · Showing the contents of several text files in different windows
  3. · Loading the contents of several text files without web page reloads
  4. · The full source code of the text file reading application

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
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.

blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Tutorials for Beginners
- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks
Find More JavaScript Tutorials

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 4 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials