Benötigen Sie Hilfe zu verstehen, wie eine Website ajaxify

Question

ich diesen Kern vor kurzem auf gefunden, wie man eine Website mit dem HTML5 History API Ajaxify mit history.js, jQuery und scrollTo: https://github.com/browserstate/ajaxify

ich eine harte Zeit habe ein immer einfache Version dieser Arbeit und bin mir nicht sicher, ob ich alles verstehe. Zuerst habe ich alle Skripte geladen im Kern vorhanden, dann eine wirklich einfache nav und Content-Abschnitt ein:

<ul id="nav"> 
    <li id="home-link"><a href="/" title="Home">Home</a>/</li> 
    <li id="work-link"><a href="/work" title="Work">Work</a>/</li> 
    <li id="labs-link"><a href="/labs" title="Labs">Labs</a>/</li> 
    <li id="blog-link"><a href="/blog" title="Blog">Blog</a>/</li> 
    <li id="contact-link"><a href="/contact" title="Contact">Contact</a></li> 
</ul> 

<div id="content"></div> 

Als nächstes änderte ich die Wähler Variablen die HTML übereinstimmen:

/* Application Specific Variables */ 
contentSelector = '#content', 
$content = $(contentSelector), 
contentNode = $content.get(0), 
$menu = $('#nav'), 
activeClass = 'active', 
activeSelector = '.active', 
menuChildrenSelector = 'li', 

Was Ich sollte als nächstes gehen, wo ich verloren gehe. Alles, was ich tun möchte, ist HTML-Inhalt für den ausgewählten Nav-Link laden. Wenn ich also auf "Arbeit" geklickt habe, möchte ich eine work.html-Datei in den Inhaltsbereich laden und die URL in "mywebsite.com/work" ändern. Um die Dinge einfach zu halten, können wir sagen, dass work.html und alle anderen ajaxbaren Inhalte sich im selben Verzeichnis befinden.

Jede Hilfe wird sehr geschätzt! Prost!

Answer 1

Also hier ist ein echtes nackten Knochen Beispiel, wie ich am Ende der Ajaxierung der Website, an der ich arbeitete, die diese Frage inspiriert hat. Entschuldigung für die wirklich lange Verzögerung. Zunächst wird die HTML:

<ul id="nav"> 
     <li id="home-link"><a href="home" class="ajaxify" title="Home">Home</a></li> 
     <li id="work-link"><a href="work" class="ajaxify" title="Work">Work</a></li> 
     <li id="labs-link"><a href="labs" class="ajaxify" title="Labs">Labs</a></li> 
     <li id="blog-link"><a href="blog" class="ajaxify" title="Blog">Blog</a></li> 
    </ul> 

    <div id="content">Home Content</div> 

Als nächstes wird die Javascript:

<script type="text/javascript"> 

    var directory = 'content/'; //directory of the content we want to ajax in 
    var state = History.getState(); 

    //for when they click on an ajax link 
    $('.ajaxify').on('click', function(e){ 
     var $this = $(this); 
     var href = $this.attr('href'); // use the href value to determine what content to ajax in 
     $.ajax({ 
      url: directory + href + '.html', // create the necessary path for our ajax request 
      dataType: 'html', 
      success: function(data) { 
       $('#content').html(data); // place our ajaxed content into our content area 
       History.pushState(null,href, href + '.html'); // change the url and add our ajax request to our history 
      } 
     }); 
     e.preventDefault(); // we don't want the anchor tag to perform its native function 
    }); 

    //for when they hit the back button 
    $(window).on('statechange', function(){ 
     state = History.getState(); // find out what we previously ajaxed in 
     $.ajax({ 
      url: directory + state.title + '.html', //create our path 
      dataType: 'html', 
      success: function(data) { 
       $('#content').html(data); 
      } 
     }); 
    }); 
    </script> 

Im Grunde alles, was ich tue, ist das Abfangen Anker-Tag mit der Klasse klickt ‚ajaxify‘ verwendet, um zu signalisieren, welche spezifischen Inhalte, die ich laden in möchten. Sobald ich den Klick abgefangen habe und den zu ladenden Inhalt ermittelt habe, verwende ich history.js pushSate(), um zu verfolgen, in welcher Reihenfolge der Benutzer die Site durchläuft, und die URL zu ändern, ohne die Seite neu zu laden. Wenn sie sich dafür entscheiden, die Zurück-Schaltfläche zu drücken, lädt der Statechange-Listener den richtigen Inhalt. Wenn sie sich entscheiden, den Aktualisierungsknopf zu drücken, müssen Sie eine Methode finden, Ihre Indexseite mit den verschiedenen URL-Namen zu duplizieren. Dies ist in PHP einfach durchzuführen, oder Sie können die Indexseite einfach kopieren, einfügen und umbenennen.

Hier ist ein Beispiel, das ich auf Github veröffentlicht: https://github.com/eivers88/ajaxify-simple-demo

Nur zur Erinnerung, wenn sie mit Ajax vor Ort arbeitet, ist es am besten Ihre Projekte auf einem persönlichen Web-Server wie MAMP oder WAMP laufen. Diese Demo wird in Chrome fehlschlagen, ohne dass ein Server läuft. Es sollte jedoch in Firefox ohne einen Server funktionieren.

Answer 2

Es gibt eine Vielzahl von Dingen, die Sie angesichts dieser Anforderungen tun müssten. Hier ist eine Funktion, die Sie verwenden können:

function doAjax(htmlpage){ 
$.ajax({ 
    url:"/"+htmlpage, 
    type: 'GET', 
    success: function(data){ 
     $('#content').html(data) 
    } 
}); 
} 

Der einfachste Weg, um diese aus Haken wäre Ihre Tags oben anzupassen, wie zu sein:

<a href="#" onclick="doAjax('work.html');return false;"><img></a> 

Es wäre jedoch etwas mehr sein „richtig“ (obwohl funktional gleich) diese an der Spitze in einem Script-Tag mit jquery zu tun:

$(function() { 
    $('#buttonid1').click(function(){doAjax('work.html')}); 
    $('#buttonid2').click(function(){doAjax('about.html')}); 
    $('#buttonid3').click(function(){doAjax('contact.html')}); 
}); 

Hinweis in beiden Fällen diese „work.html“ Seiten nicht voll hTML-Dokumente sein sollten, sollten sie nur sein, was geht mir n dein Inhalt div.

Dieser Ajax ändert nichts an der URL, die Ihr Besucher sieht. Damit das funktioniert, müssen Sie die html5 history api verwenden. Es ist ein wenig komplizierter als die oben erwähnte Ajax-Anfrage. Wenn Sie also das oben beschriebene nicht vollständig beherrschen, ist es möglicherweise angemessen.