Téléchargement du code disponible sur: CuttingEdge2008_05.exe (203 KB)
Browse the Code Online

 Figure 4 Certains motifs AJAX

Motif	Objectif
Browser-Side Templating (Création de modèle côté navigateur)	Le motif suggère l'utilisation de modèles HTML qui seront étoffés dynamiquement avec les données récupérées des points de terminaison HTTP distants. Au lieu de régénérer la disposition HTML pour les données immédiatement et en fonction des requêtes, le motif suggère que vous configuriez votre propre couche de modèle. Ce motif représente une alternative au motif HTML Message.
Cross-Domain Proxy (Proxy multidomaines)	Ce motif fonctionne sur une connexion serveur à serveur à un service contactable et exposé publiquement et renvoie des données au client. Pour le navigateur client, une application AJAX n'est pas autorisée à se connecter à une URL externe au domaine de la page. Cependant, un proxy local situé dans le même domaine peut facilement s'emparer des données depuis tout emplacement et les renvoyer à l'appelant.
Heartbeat (pulsation)	Comme la plupart des applications AJAX peuvent effectuer une grande quantité de travail sur le client sans jamais publier, il est possible que vous deviez informer le serveur qu'un client donné est toujours actif. Le motif suggère que l'application cliente télécharge périodiquement un message de « pulsation » pour indiquer que l'application est toujours chargée et en cours de fonctionnement dans le navigateur.
HTML Message (Message HTML)	Les points de terminaison HTTP distants renvoient normalement des données JSON (JavaScript Object Notation) sur le client à intégrer dans le DOM existant. Cette tâche peut uniquement être accomplie via JavaScript. Cependant, si le code client est particulièrement complexe, ou pour des raisons de performances, vous pourriez vouloir renvoyer le code HTML (données et disposition) depuis le serveur, au lieu de données brutes.
Microlink (Microlien)	AJAX est principalement utilisé pour effectuer un grand nombre d'activités sur une même page. Comment référencer des contenus externes, à savoir les contenus qui seraient situés sur une page différente dans une application Web classique ? Vous aurez besoin d'une sorte de lien hypertexte au sein de la même page ou « microlink ». Un microlink est une référence à un gros bloc de balises qui est récupéré via des appels au serveur et inséré ensuite dans la page. Un microlink peut être un point de terminaison HTTP ou une méthode sur un objet de commande JavaScript.
On-Demand JavaScript (JavaScript sur demande)	Ceci est l'équivalent JavaScript du motif populaire de chargement différé souvent utilisé dans une couche d'accès aux données. Le téléchargement de tout le code JavaScript requis pendant l'initialisation d'une page peut avoir un impact en termes de performances et ralentir l'intégralité du processus. En chargeant les fichiers JavaScript en fonction des demandes, vous procurez à vos pages un chargement beaucoup plus rapide sans affecter leur fonctionnalité.
Page Arrangement (Disposition de page)	Comme la majorité de l'activité d'une application a lieu dans la même page, vous devez mettre à jour le contenu de la page et présenter de nouvelles informations lorsque le contexte change. Ce motif suggère simplement que vous utilisiez le DOM pour ajouter/supprimer ou masquer/afficher des éléments pour refléter des transitions d'état.
Periodic Refresh (Actualisation périodique)	Le navigateur planifie périodiquement une requête pour obtenir des informations nouvelles ou mises à jour afin d'actualiser l'interface utilisateur.
Popup (Fenêtre indépendante)	Ce motif représente la version Web des boîtes de dialogue indépendantes/non indépendantes de Windows. Un popup consiste en un contenu HTML affiché devant le contenu existant pendant une période relativement courte ou jusqu'à ce que l'utilisateur le congédie.
Predictive Fetch (Extraction à l'avance)	Ce motif suggère la prévision des actions les plus probables de l'utilisateur et l'extraction à l'avance des données requises. La mise en œuvre de ce motif à des conséquences : il constitue en fin de compte une supposition et elle peut être fausse. Bien qu'efficace pour accroître les performances perçues, ce motif peut également avoir pour résultat une réduction des performances s'il est mal implémenté ou implémenté dans un scénario loin d'être idéal en raison d'une consommation importante de bande passante de serveur.
Progress Indicator (Indicateur de progression)	Ce motif est utilisé pour surveiller la progression d'opérations de serveur. Son principe est que l'opération de serveur écrit sa propre progression dans un emplacement partagé qu'un service de surveillance côté client peut lire dans le contexte d'une actualisation de la progression.
Submission Throttling (Limitation de la soumission)	L'un des inconvénients potentiels d'AJAX est qu'un nombre trop important de requêtes peut être créé pour le serveur durant une période horaire. Si c'est le cas, il existe un problème évident d'évolutivité. Ce motif suggère que vous utilisiez un minuteur pour télécharger périodiquement des données vers le serveur et un cache ou une file d'attente locaux pour accumuler des requêtes.
Timeout (Expiration)	En cas d'opérations lourdes dirigées depuis le client telles que la diffusion ou l'actualisation périodique, un problème consiste à s'assurer que chaque client connecté utilise vraiment l'application. Ce motif suggère que vous chronométriez les opérations lourdes et les repreniez seulement si l'utilisateur le nécessite explicitement.
Unique URLs (URL uniques)	Ce motif vous permet d'affecter des URL distinctes aux différentes parties de votre application, reflétant généralement des états différents. Ce motif est couramment utilisé pour prendre en charge l'historique dans les applications AJAX.
Virtual Workspace (Espace de travail virtuel)	Le serveur doit répondre aux requêtes aussi rapidement que possible, mais il ne peut pas renvoyer nécessairement toutes les données disponibles en raison de la bande passante. Ce motif suggère que vous génériez une interface utilisateur virtuelle qui donne l'impression que toutes les données sont disponibles alors que seule une petite partie de celles-ci est vraiment sur le client. Il est de la responsabilité de l'application de télécharger des données sur demande et de les mettre en cache localement.

 Figure 5 Implémentation d'un délai d'expiration de session cliente

<script type="text/javascript">
    var timer = null;
    function pageLoad()
    {
        if (timer === null)
        {
            timer = new Samples.TaskTimer(5000, stopTask);
            timer.start();
        }
    }

    function pageUnload()
    {
        if (timer != null)
            timer.stop();
    }

    
    function stopTask()
    {
        // Stop the clock 
        var clock = $find("<%= Timer1.ClientID%>");
        clock._stopTimer();
        
        AskIfTheUserWantsToContinue();
    }
    
    function AskIfTheUserWantsToContinue()
    {
        // Ask if the user wants to continue
        var answer = window.confirm(
          "Is it OK to continue with the clock?");
        if (answer)
        {
            // Restart the task  
            var clock = $find("<%= Timer1.ClientID%>");
            clock._startTimer();
            
            // Restart our own timeout engine
            if (timer !== null)
                timer.start();
            return;
        }        
    }
</script>

Veuillez envoyer vos questions et commentaires à l’attention de Dino à l’adresse suivante : cutting@microsoft.com.