Cross-Domain AJAX?

Thu, 22 May 2008 21:44:15 +0000

Imagine you have a web site that uses some data from a server. Imagine you want to get the data from this server without refreshing the web site. Finally, imagine that your site is not hosted on the server it gets data from (the server and the web site have different domains). Well, you have a problem. First, I apologize. This will, probably, be a very technical article. However, I also think that the content is quite valuable.

Motivation

Stankaa, my web project, is based on the idea that anybody can add her to his/her web site. You just have to copy 2 lines of code to your web site and it works.

All of this is done using XHTML Strict and without any elements. The web site never reloads. Stankaa gets the information she needs from the stankaa.com server asynchronously and modifies the host web site on the fly. The usual way of doing such things is using the XMLHttpRequest JavaScript object (the AJAX way). The problem is, it just doesn’t work if you are requesting information from a different server than the one your site is hosted on. Since the whole idea behind Stankaa is that she can be included in anybody’s web site, I had to come up with a solution.

Ajax

First, I will show you how it is usually done when you do not want to do it cross-domain.

function ajax_request(send, onReady)
{
    var request = window.ActiveXObject
        ? new ActiveXObject("Microsoft.XMLHTTP")
        : new XMLHttpRequest;

    request.onreadystatechange = function()
    {
        if (request.readyState != 4) return;
        onReady(request.responseText);
    }
    request.open("POST", "http://some-domain.sk/some.php", true);
    request.setRequestHeader("Content-Type",
                             "application/x-www-form-urlencoded");
    request.send(send);
}

This is a source code of a simple function that can “do” AJAX requests for you. You do not have to understand how it works. I will just explain how you can use it. Try something like this:

function onAnswer(answer) { window.alert(answer); };
ajax_request("", onAnswer);

What does it do? The ajax_request function makes a POST request for “http://some-domain.sk/some.php”. When the server answers, the onAnswer function you provided as a parameter for ajax_request executes. It displays an alert window showing the server answer. All this happens “in the background”, and the web page doesn’t reload (thats the point!). You can provide POST parameters for the target .php like this:

ajax_request("pudding=christmas&state=burned", onAnswer);

Of course, since JavaScript support anonymous functions (which is a really really nice feature that works especially well with closures in JavaScript), you can write just:

ajax_request("pudding=christmas",
             function (answer) { window.alert(answer); });

How to do it cross-domain

All above should work as long as you request the .php file which is located on the same domain as the requesting web site is. However, it doesn’t work for Stankaa’s scenario. After a few hours of desperate research, I managed to put together something that works the way I need it to. Although I must admit that the basic idea behind this thing isn’t mine (dynamically adding a

Protocols

Cross-Domain AJAX?

Motivation

Ajax

How to do it cross-domain