Le weblogue de SeB

A force de mettre de l’Ajax un peu partout, il est nécessaire d’afficher un signal visuel pour indiquer à l’utilisateur que des données sont en cours de chargement ou qu’un traitement est en cours. Ceci se fait avec de simples icônes animés. Le site AjaxLoad propose un générateur gratuit d’icône sur la base d’une quarantaine de modèle et laisse libre choix sur les couleurs !

Rien de bien révolutionnaire mais ça se révèle très pratique. Alors pourquoi s’en priver !

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 œuvre. 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 contrôleur 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.

A force d’utiliser du JavaScript pour accéder à des services externes, de mauvaises surprises peuvent survenir…

Ce n’est pas une nouvelle : Ajax a le vent en poupe. Suivant de près ou de loin cette technologie, de nombreux sites utilisent des services externes proposés par d’autres sites.

Cette agrégation de services passe soit par une intégration côté serveur, soit par l’utilisation de petit Javascript. De part sa facilité d’intégration, la seconde solution tend à se généraliser. Or elle pose deux problèmes majeurs :

• certains scripts offrent des performances très médiocres
• le service dépend de la disponibilité du site du fournisseur

Les sites utilisant Google Analytics peuvent rencontrer ce problème. Comme le signale Clever Age, les difficultés techniques rencontrées par l’outil de statistiques se sont répercutées sur les sites l’utilisant.

Pourquoi ?

Le code Javascript fourni par Google Analytics placé dans la section HEAD des pages, est chargé avant la section BODY. Le script externe étant indisponible, la page ne peut pas se charger. Le site devient alors indisponible.

Solution

Bien qu’il soit d’usage de déclarer les Javascript dans la section HEAD, il suffit de les déclarer à la fin du document HTML^[1]. Ainsi la page se charge normalement, puis essaie de charger les scripts externes. Cette méthode fait parti des recommandations de Google Analytics.

L’emplacement de la déclaration de ressources externes devient importante. De plus, il faudra réfléchir à deux fois avant d’intégrer le dernier service tentance de la sphère web 2.0.