Il y a quelques temps, je vous avais présenté les différentes solutions
pour faire du cross-domain en Javascript.
Cet article a suscité beaucoup d’interrogations sur la mise en oeuvre. Alors
aujourd’hui, avec un peu de retard, je vais vous présenter l’implémentation
de ces astuces avec du code source ! 
Le proxy
Cet exemple se base sur l’API de recherche de Yahoo! en mode XML.
La fonction Javascript how_many() permet d’interroger le proxy. La fonction Javascript count_results() permet d’afficher le nombre de résultats disponibles pour la recherche effectuée.
Le fichier proxy.php, qui doit être hébergé sur notre serveur se contente de récupérer l’adresse du site à interroger puis il effectue la requête et retourne le résultat.
Le code JavaScript
function count_results(httpRequest) {
if (httpRequest.readyState == 4) {
if (httpRequest.status == 200) {
var xmldoc = httpRequest.responseXML;
var root_node = xmldoc.getElementsByTagName('ResultSet').item(0);
alert(root_node.getAttribut("totalResultsAvailable"));
} else {
alert('Un problème est survenu avec la requête.');
}
}
}
function how_many() {
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
httpRequest = new XMLHttpRequest();
httpRequest.overrideMimeType('text/xml');
httpRequest.onreadystatechange = count_results;
httpRequest.open('GET','proxy.php',true);
httpRequest.send("url=http://api.search.yahoo.com/ImageSearchService/V1/imageSearch?appid=YahooDemo&query=Madonna&output=xml");
}
Le code du proxy (proxy.php)
<?php
$data = open($_REQUEST['url']);
header("Content-Type: text/xml");
echo $data;
?>
Les images invisibles
Cet exemple ne fait qu’envoyer des informations (”hello_world”) à un service distant (”anydomain.com”).
Le code JavaScript
var i = new Image();
var url = "url=http://www.anydomain.com?data=hello_world";
i.src = encode_utf8(url);
document.body.appendChild(i);
JSON
Cet exemple se base également sur l’API de recherche de Yahoo! mais en mode JSON. Ceci permet de se passer d’un proxy.
Les fonctions Javascript ont le même rôle que dans l’exemple avec un proxy.
Le code JavaScript
function count_results(obj) {
alert(obj.ResultSet.totalResultsAvailable);
}
function how_many() {
var s = document.createElement("script");
s.type = "text/javascript";
s.src="http://api.search.yahoo.com/ImageSearchService/V1/imageSearch?appid=YahooDemo&query=Madonna&output=json&callback=count_results";
document.body.appendChild(s);
}
Voilà ! Vous pouvez constater que ses méthodes sont très simples. Je vous laisse imaginer toutes les possibilités qui s’offrent à vous…
ajax javascript json xml
