Friday, January 2, 2009

Another way of accessing a file on Web Server (Javascript/ASP.net)

Few days back while working on back-end of a Web Portal. I was trying to create an Anchor Tag (<a>) in such a way that a log should also be created whenever that anchor tag is clicked by user.

So there are couple of techniques.

Approach #1:
On Click: Post back to server create the log and redirect to the URL.

Approach #2:
Use AJAX

So I used the 2nd approach. For this purpose I first created a Javascript function as,

First Try:
function createlog(param1, param2) {
var xmlHttp;
try
{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{ // Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
try
{
var u;
u = "createlog.aspx?param1=" + param1 + "&param2=" + param2;
xmlHttp.open("POST", u, false);
xmlHttp.send(null);
return true;
}
catch (e)
{
return false;
}
}


So this is an example function. Which will create a log by executing a "createlog.aspx" file on server which accepts 2 parameters in QueryString. The above function is simply using the XMLHttpRequest() object for AJAX call.

Then we can use this function in an anchor tag as,
<a href="http://www.domain.com" onclick="return createlog(1, 2);">www.domain.com</a>

When user will click on the link the createlog() function will be executed first. Which then will create the log on server and then redirect to the link.

Second Try:
Secondly I looked in the Google's Result Page. Because they are doing this also. Whenever we click on a result, Google redirects to that URL directly (without posting back) but also keeps the track of clicking. I looked into their Javascript and found a very interesting thing. And hence modified my Javascript function to this,
function createlog(param1, param2) {
var u = "createlog.aspx?param1=" + param1 + "&param2=" + param2;
(new Image).src = u;
return true;
}


Because my requirement is to just execute the "createlog.aspx" file on the server. I do NOT need the returned value. That is why XMLHttpRequest() is NOT critically required in this scenario. On the other hand (new Image).src approach is lot simpler.

What happens is that the browser creates an Image object and go to the "source" (in this case my createlog.aspx) which actually do NOT return any data (i.e. image bytes). But by going to that URL it actually is executed on server. And the Image object is then discarded at the end of function (I guess).


One more thing I found was Google is using "onmousedown" event instead of "onclick". I don't know exactly the benefits but I have experience that "onclick" event is NOT fired (on some browsers) when we right click and open the link in new window or tab. "onmousedown" event is triggered each time we click on link even if we right click on it. So it seems that this is NOT a good approach to use "onmousedown". But I have checked that whenever we right/left click on the link for the first time, the file "createlog.aspx" is executed on server. But it does NOT execute, if we click again. I think this is due to cache maybe.

2 comments:

Agha Usman said...

Good work mate !

boston said...

Its nice article thanks for sharing it with me or us...i just love programming and website design Good job and thanks again..