Sito AJAXify

Question

Ho motivi legittimi per fare ciò che sto cercando di spiegare. Ho un sito esistente che dice abc.com che ha pagine normali ecc. Tutto scritto in php. Ora vorrei AJAXify il sito, ad esempio quando un utente fa clic su un link, dovrebbe recuperare il collegamento utilizzando AJAX e sostituire i contenuti della pagina. Questa è la parte facile e posso ottenerla usando la funzione jQuery get.

Ora il problema si presenta quando l'utente aggiunge un segnalibro alla pagina. Posso usare i tag hash per specificare se l'utente si trova su un'altra pagina, ma invece di usare javascript per recuperare di nuovo la nuova pagina, è possibile recuperarlo direttamente usando PHP quando viene chiamata la pagina.

Potete per favore darmi uno schema su come ottenere quanto sopra. Questa funzionalità è simile a ciò che ha Facebook.

Grazie per il vostro tempo.

Answer 1

Si tratta di un processo abbastanza semplice di (1) Analisi del tag hash, e (2) il caricamento del contenuto tramite Ajax come si farebbe normalmente.

Se carichi più contenuti quando l'utente fa clic sulla pagina, assicurati di modificare sempre correttamente il tag hash per riflettere cosa c'è nella pagina.

Ecco a quick example con cui giocare. Clicca su un nome e nota il tag hash. Il relativo Javascript assomiglia a questo:

// Go straight to content if it's in the hash. 
$(document).ready(function(){ 
    load_story_from_hash(); 
}); 

// Call this function whenever user clicks on a hash link 
function set_hash(hash){ 
    window.location.hash = hash; 
    load_story_from_hash() 
} 

// Actually load content based on the hash in the URL 
function load_story_from_hash(){ 

    var hash = window.location.hash; 
    hash = hash.replace(/^#/, ''); 

    if (hash) { 

     $('#post_container').load(hash+'.html', {}, function(){ 
     $.scrollTo('#post_container', 1000); 
     }); 

    } 

} 

Answer 2

Il modo migliore per farlo è avere un index.php che carichi tutte le altre pagine in base alle parti dell'URL successive. Per esempio:

http://www.example.com/index.php/reports/employees/hoursWorked

In questo caso index.php verrà eseguito, si può vedere ciò che viene richiesto è sono le ore lavorate rapporto, e caricare tali contenuti. Il problema è che se index.php carica poi tutti gli altri contenuti dopo aver usato AJAX, l'URL nel browser non cambierà mai.

Un problema potrebbe essere quello di inserire un link "Link a questa pagina" su ogni pagina che contiene quel tipo di URL per gli utenti ai segnalibri.

Answer 3

Bene, è possibile utilizzare uno di questi strumenti o eseguire il rollover. Usa window.location.hash insieme ad altri trucchi.

• YUI - Browser History Manager
• Really Simple History (RSH)

Answer 4

La risposta è no, non è possibile ottenere il valore del lato server URL hash. Vedi How to get Url Hash (#) from server side.

Dovrai ottenere il valore hash sul lato client e fare una richiesta in più.

Answer 5

jQuery La cronologia è la mia scelta preferita. Può essere trovato qui: http://www.balupton.com/projects/jquery-history/ Fornire supporto per browser incrociato, associazione agli hash, overloading hash, tutto il resto.

C'è anche un'estensione Ajax per esso chiamato jQuery Ajaxy, permettendo così di aggiornare facilmente la tua pagina web in una corretta applicazione Ajax, senza necessità di apportare modifiche lato server e rimanendo SEO e amichevole JS-disabili: http://www.balupton.com/projects/jquery-ajaxy/

Questo è la soluzione scelta da siti come e http://www.balupton.com

Nel complesso sono entrambi ben documentati, supportati e ricchi di funzionalità. Hanno anche vinto una domanda di taglie qui How to show Ajax requests in URL?

Answer 6

Ho scritto di recente un articolo su questo esatto problema. L'articolo è in stile tutorial. Usando l'evento di modifica dell'hash, im mostra come aggiungere parametri all'URL, che può innescare richieste Ajax con un numero infinito di parametri, quindi funziona in modo abbastanza scalabile.

È possibile trovare maggiori informazioni qui a http://andresgallo.com/2012/06/08/ajaxifying-the-web-the-easy-way/

parte I tratta come rispondere ai link hash, mentre la parte II spiega come inviare i dati del URL hash ad una richiesta Ajax permettendo quindi di fare praticamente tutto quello che vuoi dai tag hash nel tuo url.