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…

Je vous ai souvent parlé du modèle de conception MVC et de ses avantages.

Ajaxian vient de relater un article de PHPied sur la mise en application du modèle MVC avec Ajax.

Selon l’auteur, avec Ajax, la vue contient des pages HTML, des feuilles de style CSS et des scripts Javascript pour la mise à jour du HTML. Le controleur contient des scripts Javascripts pour les comportements et du code PHP pour aiguiller les requêtes. Et pour finir, le modèle contient la logique métier en PHP.

A partir de ce modèle, l’auteur a écrit une petite démonstration dont le code source est accessible. Il propose même un squelette de projet pour les nouveaux projets. La couche Ajax est implémentée avec YUI.

L’approche, même si elle reste simpliste, est réellement intéressante. Elle permet de se poser des questions sur l’organisation du code dans les applications qui utilisent Ajax.