Prototype et l'encodage
Par Benjamin le mercredi 1 octobre 2008, 11:34 - technique - Lien permanent
Prototype est un framework Javascript qui facilite grandement le développement d'interfaces riches. Il offre notamment des objets bien utiles pour faire de l'AJAX. Hélas, même si Prototype permet de s'affranchir de nombreux problèmes de compatibilité de navigateurs, on finit toujours par être rattrapé par le problème récurrent le plus vieux de l'Internet : l'encodage dès qu'on quitte le monde merveilleux de l'ASCII.
J'avais déjà évoqué le problème de l'encodage dans les JSPs (donc côté serveur). Voici maintenant un problème rencontré côté client, sur du Javascript basé sur Prototype.
Le problème survient lorsqu'on utilise l'objet Ajax.Request pour transporter dans données en JSON. Si l'on s'en tient à la documentation de Prototype, cela se fait de la manière suivante :
new Ajax.Request('/data',{
onSuccess: function(transport){
json = transport.headerJSON;
// et utilisez ce joli objet !
}
});
où /data est la ressource qui renvoie les données en JSON. On aura pris soin de lui affecter un Content-type de type application/javascript et de mettre les données JSON dans un Header nommé X-JSON.
Les données renvoyées en JSON sont évaluées automatiquement et cela fonctionne très bien tant que ces données ne contiennent aucun caractère non ASCII. Par contre, si vous avez besoin de caractères non ASCII (ça peut servir, en français), les ennuis commencent.
Avec un navigateur FireFox (les curieux pourront tester sur d'autres navigateurs), dès que parmi les données, il y a des caractères accentués, FireFox lève une erreur mystérieuse : malformed URI sequence
On aura beau ajouter dans la réponse du serveur toutes sortes d'artifices pour bien préciser que la réponse est encodée en UTF-8, l'erreur surgira inévitablement...
Heureusement, voici un contournement qui permet d'utiliser malgré tout nos chers caractères accentués dans les données JSON.
Primo, côté serveur, oubliez l'envoi JSON à la manière orthodoxe : renvoyez plutôt les données JSON dans le corps de la réponse HTTP et optez pour un Content-type de la forme text/html; charset=UTF-8.
Secundo, côté client (Javascript), oubliez l'évaluation automatique des données reçues : récupérez la réponse sous forme texte puis évaluez-là. En clair, cela donne :
new Ajax.Request('/data',{
onSuccess: function(transport){
json = transport.responseText;
json = json.evalJSON();
// et utilisez ce joli objet !
}
});
C'est moins propre, moins élégant, mais cela a le mérite de fonctionner !
Si cet article vous a intéressé, n'hésitez pas à nous laisser un commentaire ou à vous abonner à notre flux RSS.
Peut-être serez-vous également intéressé par ces articles :
Commentaires