necesita ayuda para entender cómo ajaxify un sitio web

Question

poco encontré este GIST sobre cómo Ajaxify un sitio web con la API Historia HTML5 usando History.js, jQuery y ScrollTo: https://github.com/browserstate/ajaxify

Estoy teniendo dificultades para conseguir una versión simple de este trabajo y no estoy seguro de que entiendo todo. En primer lugar, he cargado todos los scripts proporcionados en lo esencial, a continuación, establecer un sistema de navegación muy sencilla y sección de contenido:

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

A continuación, he cambiado las variables selector para que coincida con el html:

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

Lo Se supone que debo hacer lo siguiente es donde me pierdo. Todo lo que quiero hacer es cargar contenido html específico para el enlace de navegación seleccionado. Entonces, si hago clic en "Trabajo", me gustaría cargar un archivo work.html en la sección de contenido y cambiar la URL a "mywebsite.com/work". Para mantener las cosas fáciles, digamos que work.html y todos los demás contenidos ajaxables se encuentran en el mismo directorio.

¡Cualquier ayuda es muy apreciada! ¡Aclamaciones!

Answer 1

Así que aquí hay un verdadero ejemplo de cómo terminé ajaxifying el sitio web en el que estaba trabajando que inspiró esta pregunta. Perdón por la gran demora. En primer lugar el código 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> 

A continuación, el 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> 

En esencia todo lo que hago es interceptar etiqueta de anclaje hace clic con la clase 'ajaxify' se utiliza para indicar qué contenido específico quiero cargar en. Una vez que intercepte el clic y determine qué contenido cargar, entonces uso history.js pushSate() para realizar un seguimiento del orden que el usuario está pasando por el sitio y cambiar la URL sin tener que volver a cargar la página. Si deciden presionar el botón Atrás, el oyente de cambio de estado cargará el contenido correcto. Si deciden presionar el botón Actualizar, necesitarás encontrar un método para duplicar tu página de índice con los diferentes nombres de la url. Esto es fácil de hacer en php o simplemente puede copiar, pegar y cambiar el nombre de la página de índice según sea necesario.

Este es un ejemplo que he publicado en Github: https://github.com/eivers88/ajaxify-simple-demo

Sólo un recordatorio, cuando se trabaja con el Ajax a nivel local, lo mejor es ejecutar sus proyectos en un servidor web personal como MAMP o WAMP. Esta demostración fallará en Chrome sin que se ejecute un servidor. Sin embargo, debería funcionar en Firefox sin un servidor.

Answer 2

Hay una variedad de cosas que tendrías que hacer teniendo en cuenta esos requisitos. Aquí es una función que puede utilizar:

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

El la forma más sencilla de conectar esto sería para ajustar las etiquetas de arriba para ser como:

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

Sin embargo, sería un poco más "correcta" (aunque funcionalmente lo mismo) para hacer esto con jQuery en una etiqueta de secuencia de comandos en la parte superior:

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

Nota en ambos casos, estas páginas "work.html" no debería ser documentos hTML completos, que sólo debe ser ¿Qué pasa? n su contenido div.

Este ajax no hará nada para cambiar la URL que su visitante ve. Para que funcione, tendrás que usar el html5 history api. Es bastante más complicado que el pedido de ajax que tengo arriba. Entonces, si no tiene un dominio total de lo que escribí arriba, puede o no ser apropiado.