Hai bisogno di aiuto per capire come ajaxify un sito web

Question

Recentemente ho trovato questa sostanza su come Ajaxify un sito web con l'API HTML5 Storia usando History.js, jQuery e scrollTo: https://github.com/browserstate/ajaxify

Sto attraversando un momento difficile ottenere un versione semplice di questo lavoro e non sono sicuro di aver capito tutto. In primo luogo, ho caricato tutti gli script forniti nella sostanza, quindi impostare una molto semplice nav e la sezione dei contenuti:

<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> 

Avanti, ho cambiato le variabili di selezione in base al codice HTML:

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

Cosa Dovrei fare il prossimo è dove mi perdo. Tutto quello che voglio fare è caricare contenuti html specifici per il collegamento nav selezionato. Quindi, se ho cliccato su "Lavoro", vorrei caricare un file work.html nella sezione del contenuto e cambiare l'URL in "mywebsite.com/work". Per semplificare le cose, lascia che work.html e tutti gli altri contenuti ajaxable si trovino nella stessa directory.

Qualsiasi aiuto è molto apprezzato! Saluti!

Answer 1

Quindi ecco un esempio reale di come sono finito a giudicare il sito web su cui stavo lavorando che ha ispirato questa domanda. Ci scusiamo per il ritardo davvero lungo. In primo luogo il codice 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> 

successivo il 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> 

In sostanza tutto quello che sto facendo è intercettare tag di ancoraggio scatta con la classe 'ajaxify' utilizzato per segnalare quali contenuti speciali Io voglio caricare in. Una volta che intercetto il clic e determino quale contenuto caricare, utilizzo quindi history.js pushSate() per tenere traccia di quale ordine l'utente sta attraversando il sito e modificare l'url senza ricaricare la pagina. Se decidono di premere il pulsante Indietro, il listener di statechange caricherà il contenuto corretto. Se decidono di premere il pulsante di aggiornamento, sarà necessario trovare un metodo per duplicare la pagina dell'indice con i diversi nomi di URL. Questo è facile da fare in PHP o potresti semplicemente copiare, incollare e rinominare la pagina indice come necessario.

Ecco un esempio che ho postato su Github: https://github.com/eivers88/ajaxify-simple-demo

Solo un promemoria, quando si lavora con l'Ajax a livello locale, è meglio per eseguire i vostri progetti su un server web personale come MAMP o WAMP. Questa demo fallirà in chrome senza un server in esecuzione. Tuttavia, dovrebbe funzionare in Firefox senza un server.

Answer 2

Ci sono una varietà di cose che avresti bisogno di fare dato quei requisiti. Ecco una funzione è possibile utilizzare:

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

Il modo più semplice per agganciare questo fuori sarebbe quello di modificare i tag di cui sopra per essere come:

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

Sarebbe tuttavia un po 'più "corretto" (anche se funzionalmente lo stesso) per fare questo con jQuery in un tag script in alto:

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

Nota in entrambi i casi, queste pagine "work.html" non dovrebbe essere documenti HTML completo, dovrebbero essere solo cosa va n il tuo contenuto div.

Questo ajax non farà nulla per cambiare l'URL che il visitatore vede. Per farlo funzionare, dovrai usare lo html5 history api. È un po 'più complicato della richiesta Ajax che ho sopra. Quindi, se non hai una piena padronanza di ciò che ho scritto sopra, potrebbe essere appropriato o meno.