Un sito completamente in AJAX

danielloantonio · 10 Set 2012

Salve,
ho gia parlato qui (http://forum.mrwebmaster.it/javascript/31153-tutte-pagine-sito.html) su come integrare tutte le pagine di un sito in una sola e ho risolto con questo template (http://www.templatemo.com/preview/templatemo_278_cafe_bakery)! Ora pero sorge il problema della pesantezza della pagina dato che sono molte pagine, e non vorrei caricare tutto all'inizio ma su richiesta con ajax!
Come si puo fare?

Avevo pensato ad una cosa del genere:

HTML:

<html>
<head>
// Includo jQuery
<script type="text/javascript">
function dynpage(pagetoload) {
     $.ajax({
          type: "GET",
          url: "include.php",
          data: "id="+pagetoload,
          success: function(response){
               $("#main").html(response);
          }
     });
}
</script>
</head>
<body>
<div class="topbar"><a href="#" onclick="dynpage('home')">Home</a> || <a href="#" onclick="dynpage('search')">Ricerca</a></div>
<div id="main"></div>
<script type="text/javascript">
dynpage('home');
</script>
</body>
</html>

Potrebbe andare?

Grazie a tutti

alessandro1997 · 10 Set 2012

Io farei così (simile al tuo ma più sintetico):

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Sito in AJAX</title>
        <meta charset="utf-8" />

        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
        $(function() {
            $("#content").load("page.php", "id=home");
            
            $(".menu-item").click(function() {
                $("#content").load("page.php", "id=" + $(this).attr("data-page"));
            });
        });
        </script>
    </head>
    
    <body>
        <a href="#" class="menu-item" data-page="home">Home</a> |
        <a href="#" class="menu-item" data-page="page-1">Pagina 1</a> |
        <a href="#" class="menu-item" data-page="page-2">Pagina 2</a>

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

criric · 10 Set 2012

Quoto entrambe le soluzioni :fonzie:

borgo italia · 10 Set 2012

ciao
una domanda da 'gnurant:
ma non si perde qualcosina nell'indicizzazione?

danielloantonio · 10 Set 2012

Gia non ci avevo pensato! Non si potrebbe fare tipo lo stesso script ma in modo che l'url della pagina cambia? un po come fa twitter per iphone! le varie voci della topbar si caricano in ajax infatti non ricarica tutta la pagina, ma comunque l'url cambia (quindi sono pagine diverse).....

confusooo :/ Grazie a tutti

alessandro1997 · 10 Set 2012

Prova così:

Codice:

$(function() {
    $("#content").load("page.php", "id=home");
    
    $(".menu-item").click(function() {
        $("#content").load("page.php", "id=" + $(this).attr("data-page"));
        location.hash = "page" = $(this).attr("data-page");
    });
});

danielloantonio · 10 Set 2012

Ma cosa dovrebbe fare :s ??

alessandro1997 · 10 Set 2012

Aggiunge il nome della pagina come hash, quindi quando clicchi su un link aggiunge #page=home al link.

danielloantonio · 10 Set 2012

E in questo modo quindi viene "considerato" da google e altri?

danielloantonio · 12 Set 2012

UP! Google li indicizza? Invece di #page=home è possibile #home ? Grazie mille

alessandro1997 · 12 Set 2012

Prova così:

Codice:

location.hash = $(this).attr("data-page");

Tra l'altro il codice precedente era sbagliato (l'uguale stava fuori dalle virgolette).

Ora, leggendo questa pagina bisogna innanzitutto aggiungere il punto esclamativo all'inizio dell'hash, quindi cambia così:

Codice:

location.hash = "!" + $(this).attr("data-page");

Inoltre, bisogna fare in modo che l'URL http://www.tuosito.com/?_escaped_fragments=pagina restituisca il codice HTML della pagina pagina, senza il resto della pagina principale. Per realizzarlo io metterei questo all'inizio della pagina:

PHP:

<?php
if (isset($_GET['_escaped_fragments'])) {
    $_GET['id'] = $_GET['_escaped_fragments'];
    require_once 'page.php';

    exit();
}
?>

Ovviamente queste sono solo delle idee: dovrai fare prove, sistemare e adattare secondo le tue esigenze.

danielloantonio · 12 Set 2012

Scusa mi sono perso un po! Quindi devo sostituire la stringa della location.hash e inserire quel codice php all'inizio? E poi cosi il #home sarebbe la variabile $id = home ?

alessandro1997 · 12 Set 2012

Sì, esatto. Per saperne di più vedi qui: https://developers.google.com/webmasters/ajax-crawling/docs/getting-started.

danielloantonio · 12 Set 2012

Ok grazie mille

Cerca

Cerca

Un sito completamente in AJAX

danielloantonio

Utente Attivo

alessandro1997

Utente Attivo

criric

Super Moderatore

borgo italia

Super Moderatore

danielloantonio

Utente Attivo

alessandro1997

Utente Attivo

danielloantonio

Utente Attivo

alessandro1997

Utente Attivo

danielloantonio

Utente Attivo

danielloantonio

Utente Attivo

alessandro1997

Utente Attivo

danielloantonio

Utente Attivo

alessandro1997

Utente Attivo

danielloantonio

Utente Attivo

Discussioni simili