Navigation d'URL dans un site Web basé sur AJAX?

Je voudrais développer un site Web avec une navigation entièrement ajax, mais cela signifie que les utilisateurs ne peuvent pas partager, mettre en signet, ou aller directement à certains contenus.Navigation d'URL dans un site Web basé sur AJAX?

J'ai remarqué que quelques sites Web (Gmail, Thesixtyone, Youtube) utilisent des balises de hachage pour créer des URL personnalisées pour différentes configurations de page. Comment s'appelle cette technique et comment puis-je l'implémenter?

Source

2010-04-06 Atomix

Il est appelé Ajax lien profond au cas où quelqu'un est autre demandent – Atomix

Merci @Atomix, je cherchais le nom – Jacques

Plongez dans l'adresse JQuery. http://www.asual.com/jquery/address/

Cela fait exactement ce dont vous parlez. Cependant, puisque vous avez demandé ce que le # signifie dans les URL personnalisées, je suppose que vous êtes relativement nouveau dans ce domaine. L'adresse JQuery semblera intimidante au début, mais c'est vraiment très facile. Vous devriez utiliser JQuery pour tout votre traitement ajax aussi.

# est une étiquette d'ancrage. Si vous faites cela <a name="list">This is an anchor tag</a> puis ajoutez #list à l'url, la page passera à l'étiquette où name = list.

Source

2010-04-06 17:34:34 Kai

Trouvé le plugin mentionné très pratique. – diggersworld

J'ai utilisé l'approche de hachage pour une application entièrement ajax avec SEO. D'après mon expérience, je dirais que c'est une approche très fiable à la fois pour les navigateurs Web et les navigateurs de téléphones intelligents.

Voici ma démarche. Pour la simplicité du code, j'utiliserai le code Jquery/Zepto

Lorsque vous devez charger une page ajax différente, changez simplement le hash de l'URL en utilisant javascript.

window.location.hash = '#!page1';

Ensuite, un événement de changement de hachage feu du javascript

$(window).on('hashchange',loadPage);

gérer cet événement avec la fonction LoadPage

var loadPage = function(e){ 
    pageId = window.location.hash; 

    _gaq.push(['_trackPageview', '/'+pageId]); //For google analytics virtual page push 

    if(pageId == '#!page1'){ 
     $.get('ajax/page1.php', function(response) { 
      $('#main').html(response); 
     }); 
    }else if(pageId == '#!page2'){ 
     $.get('ajax/page2.php', function(response) { 
      $('#main').html(response); 
     }); 
    } 
}

De cette manière, vous pouvez charger une page en tapant l'URL et par en utilisant le lien aussi bien.

Maintenant, la partie SEO. Google et d'autres grands moteurs de recherche ont développé un moyen d'explorer un site Web basé sur ajax. Si tu utilises #! dans votre URL google va remplacer le #! avec '? _escaped_fragment_' et vous demandera du contenu. par exemple

www.yoursite.com/#!page1 sera converti en www.yoursite.com/?_escaped_fragment_=page1

Tout ce que vous devez faire est de captures qui _escaped_fragment_ en tant que paramètre GET. Si vous utilisez php le code sera comme

if (isset($_GET['_escaped_fragment_'])) {   
    $fragment = $_GET['_escaped_fragment_']; 

    if($fragment == 'page1') 
     echo include 'ajax/page1.php'; // or use readfile method 
    else if($fragment == 'page2') 
     echo include 'ajax/page2.php'; // or use readfile method 
}

Vous pouvez également définir le titre et la description de la page html pour chaque page individuellement en attrapant le _escaped_fragment_

Sur une note séparée, vous pouvez partager URL dans les médias sociaux en utilisant #! ainsi que. Il sera analysé comme un lien régulier avec l'aide de _escaped_fragment_

J'espère que cette approche vous aidera à couvrir tous les problèmes.

Source

2012-09-19 10:56:07 Hasanavi

Si vous avez un contenu div où vous ajax mise à jour, voici un exemple utilisant la bibliothèque d'adresses jquery http://www.asual.com/jquery/address/.

<body>    
    <div id="content"> 
     Your ajax content... 
    </div> 
</body>

Inclure la bibliothèque d'adresses jquery puis

$(document).ready(function() { 

     $('a').address(); 

     $.address.externalChange(function (e) { 
      if (e.value != '/') { 
       $('#content').load(e.value); 
      } 
     }); 
});

Si vous voulez exclure certains href de l'historique de navigation

$('a[href!="#"]').address();

Source

2014-07-17 13:40:17 Freewi

Navigation d'URL dans un site Web basé sur AJAX?

Répondre

Questions connexes