Spanish
Cross-domain gif request with javascript
Posted on 14. May, 2009 by Guillermo in Development
Last week I ran into a particular situation: I needed to send information from one domain to another. More precisely, a javascript located on a client web page sends information to a server located on a different domain.
The Problem
A regular AJAX request is what I thought first, but the Same Origin Policy prevents us from making an request to a different domain. There’s a library that helps you deal with cross domain request in AJAX called AJAX Cross Domain that honestly I haven’t had the time to check more in depth but, anyways, I needed a lightweight solution and didn’t want to include more scripts.
A way to do this is with a proxy script in the same domain that makes a server-side forward to the other domain (it’s kind of cheating because the request is made to the same domain). This works, but in my case I couldn’t implement a proxy script on each domain that uses the script, so I needed another solution.
The solution
This is what I finally ended up doing:
For each group of data that I want to send, I create an image request to the server (in this case a small 1×1 px gif) with all the info I want to send as GET parameters in the request. Image requests to a different domain are a common thing (but not always used to send data).
The server will route that request to a PHP script that has all the logic to handle the info I’m sending (in my case I’m saving it into a mysql database), and will return the gif.
This technique is not new, Google Analytics uses it to send user information to google servers every time somenone visits a website with the Analytics Code.
The code
Let’s go to the code. First, the javascript code:
var GifRequest = function(){
var url_base = "";
var gif_name = "__req.gif";
function getParamString(param_arr){
var param_str = "?";
for(key in param_arr){
param_str += key + "=" + param_arr[key] + "&";
}
param_str += "timestamp=" + getTimeStamp();
return param_str;
}
function getTimeStamp(){
var date = new Date();
return ""+date.getFullYear() + date.getMonth() + date.getDate() + date.getHours() + date.getMinutes() + date.getSeconds();
}
return {
request: function(params,callback){
var req_img = new Image();
req_img.src=url_base + gif_name + getParamString(params);
if(callback){
req_img.onload = callback;
}
}
}
}();
This code provides the GifRequest object, with a request function. This function takes 2 parameters, one with the information to send as an associative array and a callback function that’s called when the image is loaded (this means that the server processed the request and returned the gif)
GifRequest.request({
'foo':'malbec',
'var':'media'
},
function(){
alert('Gif loaded!');
}
);
We still need to redirect the gif request to a script, in this case I use a php script but you can use whatever you want. This goes on the .htaccess file of your Apache server.
RewriteEngine on RewriteRule ^__req.gif(.*)$ gif_proccessing.php$1 [L]
Here’s a zip file containing all the files used in this article, with all the comments explaining the code:
Hope it helps!
Related Posts
+54 261 4340244
