Le weblogue de SeB

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

Cet article a été publié le Mercredi 5 septembre 2007 à 21:59 et est classé dans Développement. Vous pouvez en suivre les commentaires par le biais du flux RSS 2.0. Vous pouvez laisser un commentaire, ou faire un trackback depuis votre propre site.