2010-04-06 4 views
8

Mi piacerebbe sviluppare un sito Web con navigazione ajax completa, ma ciò significa che gli utenti non possono condividere, aggiungere segnalibri o accedere direttamente a determinati contenuti.Navigazione URL in un sito Web basato su AJAX?

Ho notato alcuni siti Web (Gmail, Thesixtyone, Youtube) utilizzano i tag hash per creare URL personalizzati per diverse configurazioni di pagina. Come si chiama questa tecnica e come posso implementarla?

+2

Si chiama Ajax Deep Linking nel caso in cui nessun altro è chiedersi – Atomix

+0

Grazie @Atomix, stavo cercando il nome – Jacques

risposta

5

Inserire nell'indirizzo JQuery. http://www.asual.com/jquery/address/

Questo fa esattamente quello di cui stai parlando. Tuttavia, dal momento che hai chiesto che cosa significa # negli URL personalizzati, presumo che tu sia abbastanza nuovo in questo. All'inizio, l'indirizzo di JQuery sembrerà intimidatorio, ma è davvero abbastanza facile. Dovresti usare JQuery per tutta la tua gestione di ajax.

# è un tag di ancoraggio. se fai questo <a name="list">This is an anchor tag</a> quindi aggiungi #elenco all'URL, la pagina salterà al tag dove nome = lista.

+0

Trovato il plugin citato molto utile. – diggersworld

6

Ho utilizzato l'approccio hash bang per un'applicazione completamente basata su Ajax con SEO. Dalla mia esperienza direi che è un approccio molto affidabile sia per browser web che per smart phone.

Ecco il mio approccio. Per la semplicità del codice userò il codice Jquery/Zepto

Quando è necessario caricare una pagina ajax diversa, modificare l'hash dell'URL utilizzando javascript.

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

Poi un evento di modifica hash scatterà dalla javascript

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

Maniglia quell'evento con funzione di 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); 
     }); 
    } 
} 

In questo modo è possibile caricare una pagina digitando l'URL e da usando anche il link.

Ora la parte SEO. Google e altri importanti motori di ricerca hanno sviluppato un modo per eseguire la scansione di un sito Web basato su Ajax. Se usi #! nel tuo URL google sostituirà il #! porzione con '? _escaped_fragment_' e ti chiederà il contenuto. per esempio

www.yoursite.com/#!page1 verrà convertito in www.yoursite.com/?_escaped_fragment_=page1

Tutto quello che dovete fare è fermo che _escaped_fragment_ come parametro GET. Se si utilizza il PHP il codice sarà come

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 
} 

È anche possibile impostare il titolo della pagina html e una descrizione per ogni singola pagina catturando l'_escaped_fragment_

In una nota separata, è possibile condividere url nei social media utilizzando #! anche. Sarà analizzato come un collegamento regolare con l'aiuto di _escaped_fragment_

Spero che questo approccio ti aiuti a coprire tutti i problemi.

1

Se si dispone di un contenuto div in cui si aggiorna ajax, ecco un esempio utilizzando la libreria di indirizzi jquery http://www.asual.com/jquery/address/.

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

includere la libreria indirizzo jquery e poi

$(document).ready(function() { 

     $('a').address(); 

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

Se si desidera escludere alcuni href di navigazione storia

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