Faire du cross-domain simplement avec javascript

Voilà, après un longue absence et une promesse que j'ai faite à SecDZ (que je ne suis pas sûr pouvoir arriver à tenir ;-)) je reviens pour vous parler de comment faire des requêtes cross-domain avec du code javascript très simple et sans attendre l'arrivée des nouvelles générations de XMLHttpRequest (Level 2).

Le cross-domaine simplement expliqué: Il s'agit de pouvoir faire des requêtes vers le site siteB.com à partir de code javascript chargé dans le navigateur à partir d'un site siteA.com.Il existe bien la méthode AJAX, mais qui ne permet de faire que des requêtes vers le même site (pour des questions évidentes de sécurité).Faisons un test grandeur nature, notre siteA.com est mon site ubuntudz.com et le site vers lequel on va faire des requêtes est ubugnu.com, le script javascript de cette page (émanant de siteA.com) doit être capable de faire des requêtes vers siteB.com et faire des modifications sur cette page suivant la réponse de siteB.com.

 +  =   

Dans cet exemple, javascript va faire une requête vers un autre site (siteB.com) et récupérer le résultat de l'addition, puis l'afficher dans la case adéquate, et ce sans passer par AJAX, car avec AJAX on n'aurait pu faire cette opération (erreur)Cette astuce est utile quand on veut profiter de la bande passante de Blogger par exemple pour le coté statique du site, et déléguer les tâches dynamique pour un autre site moins généreux en bande passante.Maintenant voila les scripts JS et PHP, le truc, c'est de créer une fonction JS qui inclut des codes JS, le serveur répondra par du vrai code JS selon les paramètres passés.

<script>
function include(src) {
    var html_doc = document.getElementsByTagName('head').item(0);
    var js = document.createElement('script');
    js.src = src;
    js.type = 'text/javascript';
    js.defer = true;
    html_doc.appendChild(js);
}
    function cal(a,b) {
    include("http://www.ubugnu.com/ubuntudz/?a="+a+"&b="+b);
}
</script>

<input id='a' style='width:20'> + <input id='b'' style='width:20'> = <input id='c'' style='width:20'> <input type='submit' onClick='cal()' value='calculer'>

<?
echo "document.getElementById('c').value=";
echo $_GET['a']+$_GET['b'].";";
?>