Samir AMZANI's BLOG

Malgré toute la beauté d'une application ajaxienne, on s'aperçoit  d'une grande quantité de Javascript est demandée, ce qui rend cette application trop lourde au début de chargement de la  première page.       
Parmi les solutions qui permettent de palier à ce  problème est la compression ou l'optimisation de code javascript, mais cela ne fonctionne pas dans certaines conditions, et la plupard des fonctions perdent leurs contextes d'exécution.
Pourquoi charger tout les Javascript alors qu'un minimum  serait suffisant pour assurer l'affichage de site.

Le javascript On-Demand consiste à charger le codeJavascript à la demande de client.

Exemple pratique :

J'ai une page ou il y'a un formulaire de saisie, et je voudrais faire des contrôles client-side avant  de transmettre ses données au serveur Web :

Solution 1 : ajouter le Javascript dans le nœud head

L'astuce ce cette solution consiste à  télécharger le code Javascript qui contôle les champs de formulaire vers la fin de la saisie. 

function telecharger_js(){
        if (self.validate_form) { //est ce quele javascript est déja chargé?
                return;
        }
        var head =document.getElementsByTagName("head")[0];
        script =document.createElement("script");
        script.id = "form_script";
        script.type ="text/javascript";
        script.src ="form_functions.js";
        head.appendChild(script);
    } 

<formid='id_frm' method='post' action='validate.php'>

<labelfor="name">name</label>

<inputtype="text" name="name" id="name" /><br> 

…………………
<labelfor="age">name</label>

<inputtype="text" name="age" id="age" onfocus="telecharger_js()"/><br>

<inputtype="button" id='btn_valider" value="valider" />

</form>

Solution 2 : une variante de la  première solution qui permet de chargé le code javascript depuis le serveur  avec Ajax et l'exécuté avec la function eval()

La librairie prototype propose  plusieurs  méthodes de manipulation des formulaires, qui à mon avis peuvent réduire considérablement le temps de développement des applications de remote-scripting  avec Ajax.

 L'objet Form de prototype est simple  d'utilisation, par exemple pour avoir tout les éléments "INPUT" d'un  formulaire identifié par  un id_form on utilise la méthode : Form.getElements(id_form),cette fonction revoie un array des éléments "INPUT".  

Une autre utilisation pratique quej'ai remarqué est le positionnement de focus  sur le premier élèment d'un  formulaire grâce à la méthode Form.focusFirstElement(id_form).

Voici  un jeu de test des principales méthodes de ce fameux objet.

Un document très intéressant sur l'utilisation dela bibliothèque prototype

http://www.electrolinux.com/traductions/prototype.js.html

L'intérêt par exemple de cette bibliothèque et deminimiserles lignes de codes Javascript :

Exemple :
Cette notation $('elementDom') est équivalente à document.getElementById('elementDom')

Elle facilite aussi l'utilisation de l'Ajax, etd'autres nombreuses fonctionnalités… (ici schéma qui illustre toutes  les fonctionnalités de prototype)

Pourquoi    JSON :

Regardonscet exemple qui illustre la création d'un modèle objet en Javascript :

var   garage = new Object();

garage.nom= "mon garage";

garage.vehicule= new Array();

garage.vehicule[0] = new Object();

garage.vehicule[0].matricule = "1234 GC 2A";

garage.vehicule[0].marque= "Citroen AX";

garage.vehicule[0].couleur = "gris";

garage.vehicule[0].dateMiseEnCirculation = new Date(1992,11,01);

garage.vehicule[1] = new Object();

garage.vehicule[1].matricule = "1434 EF 2A";

garage.vehicule[1].marque= "Audi A3";

garage.vehicule[1].couleur = "noir";

garage.vehicule[1].dateMiseEnCirculation = new Date(2005,05,04);

.......

var bill = new Object();

bill.nom = "samir";

bill.age="23";

garage.vehicule[0].propretaire= bill;

Onregardons   cette syntaxe vous pouvez remarqué qu'elledevient vite fastidieuse, si on veut manipuler des objets complexes.

Heureusement que JSON propose un moyen plus élégantpour présenter les graphes d'objets.

Comment utiliser JSON :

L'exempleprécèdent peut être présenté avec JSON de cette manière :

var garage = {

            nom : "mon garage",

            vehicule : [

                                   {

                                   matricule :"1234 GC 2A",

                                   marque :"Citroen AX",

                                   couleur :"gris",

                                   dateMiseEnCirculation : new Date(2005,05,04),

                                   propretaire: [

                                               {nom : "samir", age : 23 }

                                   ]

                                   },

                                   {

                                   matricule :"1434 EF 2A",

                                   marque :"Audi A3",

                                   couleur :"noir",

                                   dateMiseEnCirculation: new Date(2005,05,04)

                                   }

                        ]

            }

Icideux propriétés ont été attribuées à l'objet garage : nom est une simple chaîne,véhicule est une liste à index numérique d'objets...

JSONpermet un moyen plus concis pour créer ces informations  sans générer de nombreuses lignes de codequi pourraient certainement consommer beaucoup plus de bande passante...

JSON   Coté   Serveur                

 Voici un schéma;qui   explique l'échange des données au formatJSON entre un client et un serveur Il existe plusieurs implémentations dans différentslangages de JSON, ces dernières figurent dans le siteJSON. PHP peut comprendre le format JSON grâce àl'extension de Omar KILANI : php-json