11
votes

Devrais-je charger une page HTML entière avec AJAX?

Mon concepteur a pensé que c'était une bonne idée de créer une transition entre différentes pages. Essentiellement, seule la partie de contenu rechargera (l'en-tête et le pied de page resteront intacts), et seul le contenu div devrait avoir un effet transitoire (disparition ou une sorte). Pour créer ce type d'effet n'est pas vraiment le problème, de rendre Google (Analytics) Happy est ...

Solutions que je n'ai pas aimées et pourquoi;

  • charge uniquement le contenu div avec Ajax: Google ne verra aucun contenu, ce qui signifie que le site ne sera jamais trouvé, ni uniquement les pièces récupérées par Ajax, qui ne sont pas toutes les pages complètes du tout
  • Affiche l'effet transitoire, puis rediriger l'utilisateur à la page désignée (capturer l'événement click d'un élément): L'effet est à peu près identique à celui de la même page, par exemple. l'utilisateur verra toujours une page étant rechargée

    J'ai pensé à une solution possible: Lorsqu'un visiteur clique sur un lien, capturez l'événement, chargez la cible avec AJAX, affichez l'effet transitoire entre-temps, puis réécrivez simplement le document entier avec le contenu récupéré avec la demande AJAX.

    Au moins cela fonctionnera et présente des avantages; La page recharge de la page sera l'air transparente, peu importe la ralentissement de votre connexion Internet, Google ne vous dérangera pas, car le contenu AJAX est une page HTML complète elle-même et peut être rampé tel quel, même les navigateurs non javascript (téléphones mobiles et al. .) Cela ne vous dérangera-t-il pas, ils rechargent simplement la page.

    Mon hésitation à mettre en œuvre cette méthode est que je rechargais une page entière utilisant Ajax. Je me demande si c'est ce que Ajax est censé faire, si cela ralentit les choses. Surtout, y a-t-il une meilleure solution, par exemple. Ma première solution «mauvaise» mais légèrement différente, de sorte que Google aimerait cela (analytique aussi)?

    Merci pour vos pensées à ce sujet!


3 commentaires

Au-delà de "ça a l'air cool", demandez pourquoi vous avez besoin de cette transition. S'il n'y a pas de raison valide, ne le faites pas.


En outre, dans ce cas, je n'ai pas vraiment de choix, comme dans ce cas le choix des concepteurs, il y a deux raisons; Il a l'air "cool" en effet, et l'utilisateur aura l'expérience de "ne pas avoir à attendre" (ou d'avoir l'idée que quelque chose se passe), si vous savez ce que je veux dire;)


Pourquoi? Je pense que "ça a l'air cool" est une raison suffisante. Je veux dire que Flash a été populaire juste parce que ça a l'air cool. Pourquoi ne pas atteindre la même chose sans cela?


4 Réponses :


3
votes
  1. Vous pouvez avoir Ajax et SEO: proposition de Google .

  2. Je pense que vous pouvez apprendre quelque chose de Gmail's Design.


1 commentaires

1. J'ai regardé cela, mais ce n'est pas encore cristal pour moi. Je vais enquêter sur la façon dont il va travailler quand en production! Je vous laisserai savoir quand j'ai plus d'informations!



2
votes

Cela peut être un peu étrange, mais j'ai une idée pour cela.

Préparez vos pages à charger avec un paramètre 'ifarme' Obtenir le paramètre. P>

  • Lorsqu'il y a "iframe", chargez-le avec du JavaScript pour déclencher le parent show_iframe_content () li>
  • Lorsqu'il n'y a pas de "iframe", chargez simplement la page, avec un élément iframe caché appelé «préélateur» li> ul>

    Votre objectif est de vous assurer que tous vos liens sont ouverts dans le «préchargeur» avec un paramètre «Iframe» d'obtention d'un «iframe» supplémentaire et lorsque le chargement de l'iframe se termine, et appelle le show_iframe_content (). Copiez le contenu de votre page parent. p>

    Comme ceci: Link cliqué sur -> Transition vers la phase de chargement -> iframe chargé -> show_iframe_content () appelé -> Contenu Iframe copiée à Parent -> Transition Retour à la normale phase p>

    Le tout est bon depuis, si un chenille visite de vos pages, il le fera sans le paramètre "iframe", il peut donc passer à travers toutes vos pages comme la normale, mais quand vous Utilisez-le dans un navigateur, vous faites que vos liens font la magie ci-dessus. P>

    Ceci est juste un croquis de celui-ci, mais je suis sûr que cela peut être fait correctement. P>

    EDIT: FORT> En fait, vous pouvez le faire avec simple Ajax, sans iframe, la chose est que vous devez modifier la page après avoir été chargée dans le navigateur, pour charger le contenu lié avec Ajax. Les crawlers devraient également voir les liens. P>

    exemple Script: P>

    $.fn.initLinks = function() {
        $("a",this).click(function() {
            var url = $(this).attr("href");
            // transition to loading phase ...
            // Ajax post parameter tells the site lo load only the content without header/footer
            $.post(href,"ajax=1",function(data) {
                $("#content").html(data).initLinks();
                // transition to normal phase ...
            });
            return false;
        });
    };
    
    $(function() {
       $("body").initLinks();
    });
    


1 commentaires

N'aimez pas vraiment les iframes, mais c'est une chose personnelle :) Mais votre solution pour ajouter un paramètre 'Ajax' semble assez simple! Comme celui-ci! Merci!



2
votes

Google Analytics peut suivre les événements JavaScript comme s'ils sont des pagesViews- vérifier ici pour la mise en œuvre:

http://www.google. com / support / googleanalytique / bin / réponse.py? hl = fr-gb & réponse = 55521


0 commentaires

10
votes

Réponse courte: je ne recommanderais pas de charger une page entière de cette manière.

long réponse: non recommandé. Alors que possible, ce n'est pas vraiment l'intention de XHR / Ajax. Essentiellement ce que vous faites est de reproduire le comportement natif du navigateur. Certains des problèmes que vous rencontrez:

  1. Support pour le dos / en avant bouton. Vous aurez besoin d'un programme URI # à résoudre.
  2. Le navigateur doit analyser la page entière à travers Ajax. Cela va ralentir les choses. Par exemple. si vous chargez un bloc de HTML dans le Navigateur, puis remplacez le DOM avec il ne sera que des scripts, CSS ou des images qui y sont contenues commencent Téléchargement.
  3. mémoire - le Navigateur ne change pas les pages. Plus de temps (selon le navigateur), je Attendez-vous à ce que l'utilisation de la mémoire augmente.
  4. accessibilité. Lecteurs d'écran devra être informé chaque fois que Le contenu de la page est mis à jour. Force ne pas être une préoccupation pour vous mais vaut la peine mentionner.
  5. mise en cache. Navigateur ne saurait pas quelle page au cache (au-delà de la charge initiale).
  6. Séparation des préoccupations - votre vue est essentiellement brisé en morceaux côté serveur pour rendre le Contenu de la page avec le statique HTML pour le cadre de page et enfin le JS à combiner le serveur pièce avec la pièce du navigateur. Cela va faire de la maintenance au fil du temps problématique et complexe.
  7. Intégration avec d'autres composants - Vous voyez déjà des problèmes avec Google Analytics. Vous pouvez rencontrer Problèmes avec d'autres composants liés au moment choisi pour quand le DOM est construit.

    Si cela vaut la peine pour l'effet de transition de page est votre appel, mais j'espère avoir répondu à votre question.


3 commentaires

pfft ... Malheureusement, vous avez répondu à ma question un peu trop bien :) Je dois penser à autre chose que ...


Désolé;) juste curieux, quel était l'effet de transition? Peut-être que cela pourrait être reproduit à travers d'autres moyens.


C'est-à-dire 5,5 introduit quelque chose comme ça. Généralement fronça les sourcils comme une mauvaise expérience utilisateur maintenant-un jours. Jansfreeware.com/articles/ie-page-transitions.html