[Javascript] Chargement dynamique d'un fichier JSON

[Ter Rowan]

Bonjour

j'ai fait un système de traduction côté client (en js) qui pour le moment marche assez bien.
grosso modo, mon html de base (ou les éventuels flux d'info par la suite) s'appuie sur des "codes" que mon javascript remplace par le texte traduit grâce à une table de transco :

var resources = {

	s_2 : "pomme",

	s_3 : "kiwi",

	s_4 : "poire",

}; 

sauf que le système marche très bien avec la table de transco dans le code.
Or mon objectif est d'avoir autant de fichiers de transco qu'il y a de langues

je dois donc charger le fichier de ressource dynamiquement, en fonction du choix utilisateur.

Pour ça j'ai trouvé deux solutions :
1) jquery ajax
2) je sais pas comment ça s'appelle mais un truc comme cela :

var script = document.createElement('script');

script.setAttribute('src', url);

script.setAttribute('type', 'text/javascript');

head.appendChild(script);

je me pose alors la question de la meilleure solution sachant que le fichier de ressource ne changera pas tous les deux jours

la meilleure solution en terme de performance (est ce que l'un des deux permet une mise en cache du navigateur, histoire de gagner du temps ) mais aussi en terme de sécurité (où j'y connais rien, sachant juste que j'aurais la maîtrise du fichier de ressources)

voilà si vous avez des idées / expériences

[Xenos]

Salut,

Ajax, au fond, c'est du HTTP, donc Ajax Caching Is The Same As HTTP Caching. Les deux méthodes seront donc identiques. Je choisirai la méthode "ajax", mais là, je n'ai aucune raison valable à avancer.

En revanche, n'auras-tu pas un problème avec les robots d'indexation (ou avec les quelques % de gens qui n'ont pas javascript)? Auront-ils une version "anglais par défaut" du site (avec les textes anglais dans le code HTML), ou auront-il une version sans texte/uniquement avec les alias "s_*" dans le code HTML?

Perso, j'utilise le même principe, mais en XML/XSL (oui, j'adore cette paire de langage :p): j'ai un document XML, structuré en arbre (et non "flat" comme l'exemple ci-dessus), dans lequel j'ai mes textes traduis, et aux endroits du code HTML où je dois insérer un texte, je récupère la valeur dans le document XML (avec un petit système supplémentaire pour passer des paramètres aux textes traduis, par exemple, "Vous avez <param n="1"/> nouveaux messages", où "<param/>" sera remplacé par le nombre de messages).
Cela revient à peu près au même, mais je préfère utiliser des noms explicites comme clefs dans le tableau des traductions (au lieu des "s_*") et une structure en arbre (plus rapide pour accéder aux éléments).

[Ter Rowan]

Salut,

Ajax, au fond, c'est du HTTP, donc Ajax Caching Is The Same As HTTP Caching. Les deux méthodes seront donc identiques. Je choisirai la méthode "ajax", mais là, je n'ai aucune raison valable à avancer.

sauf que je crois (mais pas sûr, je n'ai pas retrouvé la ressource google de cette nuit 2h du mat :p) la méthode de création d'un script en dynamique évoquée ci dessous ne fait pas de requête http (je crois l acronyme dsl ou dls ou.. mais avec google j'arrive a d'autres trucs du genre)

j'ai pas de souci à utiliser l'ajax (par rapport à l'autre qu il faudra que je teste un peu plus) mais je voudrais être sûr que la partie http justement ne me fasse pas perdre en performance par rapport à l autre système (a priori plus ancien et plus rustique qu'ajax )

En revanche, n'auras-tu pas un problème avec les robots d'indexation (ou avec les quelques % de gens qui n'ont pas javascript)? Auront-ils une version "anglais par défaut" du site (avec les textes anglais dans le code HTML), ou auront-il une version sans texte/uniquement avec les alias "s_*" dans le code HTML?

non je suis sur l'espace "joueur déjà identifié", l'indexation se fera sur les pages d'accueil, de règles, etc...

sinon, j'ai aussi des paramètres mais ça alourdissait l'exemple et risquait de diluer l'attention sur la cible

[Xenos]

La 2nde méthode (comme la 1ere en fait) fera forcément une requête... A la 1ere visite, le navigateur est forcé d'aller chercher le JS des langues, et aux prochaines visites, il va vérifier son cache avant d'aller chercher le fichier... Niveau réseau, les 2 systèmes m'ont l'air identiques (1 requête dans chaque cas, qui débouche sur un HTTP 200 ou 304), de même que niveau cache.

Et la méthode s'appelle DSL: Dynamic Script Loading.

[niahoo]

je suis sur l'espace "joueur déjà identifié", l'indexation se fera sur les pages d'accueil, de règles, etc...

Bon bah tu charges ton script au chargement de la page alors ... avec une bête balise script, pas besoin d'ajouter le script dynamiquement. En plus, côté serveur tu peux détecter la langue de l'utilisateur quand il n'a pas encore fait son choix de langue.

Sauf au moment où l'utilisateur change de langue (pas tous les quatre matins a priori), là tu peux dynamiquement changer l'attribut src de ta balise script.

Pour tout ça, au lieu que ton fichier soit un fichier json, tu fais exactement comme dans ton premier bout de code, tu déclares la variable.

Code :

var resources = {...}

Cependant, je ne sais pas si en changeant le src du tag script la déclaration de variable sera ré-exécutée. Si tu testes le résultat m'intéresse. Mais si ça ne fonctionne pas, au lieu de changer le script, tu en ajoutes un second avec document.createElement('script'); ... . Là, la variable sera bien redéfinie. Mais je parle bien des rares moments ou l'utilisateur change de langue à condition que tu veuilles que ça se fasse sans rechargement de page.

---

Concernant les robots d'indexation, je rejoins Xenos, vaut mieux que la traduction ne soit pas dynamique pour les pages indexables. Réserves ça pour l'interface du jeu. Tu peux quand même utiliser des fichiers JSON côté serveur. Et pour les transformer en script bah ...

Code :

echo 'var resources = ' , $JSONResources , ';';

[Ter Rowan]

tu as raison, je suis parti sur une mauvaise piste concernant l identification de la langue

du coup je passe sur de l ajax pour le changement de langue et charge le json des l'initialisation


pour pouvoir changer la langue sans recharger la page, il a fallu que je pense à stocker les "codes initiaux" via des data- et pas les remplacer dans le texte

alors que j'y arrivais avec un rechargement complet de la page ($(body).html = ...)
maintenant que je ne change que des éléments de la page, j'ai deux petits soucis avec le svg :

je n'ai pas réussi à créer un alt et un title dynamiquement sur un <svg> inline (alors que j'y arrive sur un <img>)

j'arrive a modifié le texte dans le <defs> du svg mais les "users" de la définition concernée ne se mettent pas à jour. Faut que je creuse un peu pour voir si avec un suspendRedraw/unsuspendRedraw j'arrive a faire quelque chose, ou avec une autre alternative

mais bon j ai le dos qui coince a en hurler, alors ca attendra quelques jours


merci en tout cas

[Ter Rowan]

je n'ai pas réussi à créer un alt et un title dynamiquement sur un <svg> inline (alors que j'y arrive sur un <img>)

bon ben vla la solution: j'utilisais les propriétés : $(sel).prop("alt", "blablabla") fallait utiliser les attributs : $(sel).attr("alt", "blablabla")

prop marche pour img mais pas pour svg
attr marche pour les deux

pour l autre point pas fait encore

[niahoo]

ça me paraît logique, ce sont en premier lieu des attributs

[Ter Rowan]

ça me paraît logique, ce sont en premier lieu des attributs

Bah vi, au debut j utilisais que des attributs et puis j ai du mal comprendre la notion de propriété ( version jquery qui rajoute l option)

Bref l incohérence c est que ça marche avec img et pas avec svg