JAVASCRIPT

Using Click Interceptions with JavaScript

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

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 2

November 05, 2008

TABLE OF CONTENTS:

As I stated in the previous section, below I included the complete definition of the two source files that comprise this basic example of using click interceptions with JavaScript. As you know, in this specific case, this client-side approach is utilized to submit a basic web form with Ajax, but naturally, it can be applied within the context of other web applications as well.

Having said that, here's how the mentioned source files look:

(definition of 'sample_form.htm' file)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Submitting a web form using AJAX and click interception</title>

// send http requests

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);

}

// call 'initializeForm()' function when page is loaded

window.onload=function(){

// check if browser is DOM compatible

if(document.createElement&&document.getElementById&&document.
getElementsByTagName){

initializeForm();

}

</script>

body{

padding: 0;

margin: 0;

background: #fff;

}

h1{

font: bold 18pt Arial, Helvetica, sans-serif;

color: #000;

}

font: normal 10pt Arial, Helvetica, sans-serif;

color: #000;

}

#formcontainer{

width: 300px;

padding: 5px;

background: #eee;

text-align: right;

padding-right: 100px;

}

#errorcontainer{

width: 300px;

}

</style>

</head>

<body>

<h1>Submitting a web form using AJAX and click interception</h1>

<p>First Name <input name="fname" type="text" title="Enter your First Name" /></p>

<p>Email <input name="email" type="text" title="Enter your email address" /></p>

</form>

</div>

</body>

</html>

(definition of 'processform.php' file)

<?php

$fname=trim($_GET['fname']);

$lname=trim($_GET['lname']);

$email=trim($_GET['email']);

$errorMsg='';

if(!$fname){

$errorMsg.='<p>Enter your first name.</p>';

}

if(!$lname){

$errorMsg.='<p>Enter your last name.</p>';

}

if(!$email){

$errorMsg.='<p>Enter your email address.</p>';

}

echo $errorMsg;

Definitely, the pair of source files listed above are a good example of developing a click interception mechanism with JavaScript for submitting a simple web form via AJAX. In addition, you must realize that even when scripting is disabled on the browser for whatever reasons, the web form will still work correctly. This implies that the JavaScript application is also capable of offering a graceful degradation in this situation. What else can you ask for?

Final thoughts

In this initial chapter of the series, I explained the basic concepts that surround the implementation of click interceptions with JavaScript, and included an example to illustrate my points. As you saw earlier, this approach can be quite useful when it comes to extending the existing behavior of different web applications in an unobtrusive way.

In the upcoming part of the series, I'm going to show you how to use click interceptions to build an expansible image gallery. Now that you've been warned, you don't have any excuses to miss it!

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.