Me gustaría desarrollar un sitio web con navegación ajax completa, pero esto significa que los usuarios no pueden compartir, marcar o ir directamente a cierto contenido.¿Navegación URL en un sitio web basado en AJAX?
Me di cuenta de que algunos sitios web (Gmail, Thesixtyone, Youtube) están utilizando etiquetas hash para crear direcciones URL personalizadas para diferentes configuraciones de página. ¿Cómo se llama esta técnica y cómo puedo implementar esto?
Ir a la dirección de JQuery. http://www.asual.com/jquery/address/
Esto hace exactamente de lo que está hablando. Sin embargo, como ha preguntado qué significa # en las URL personalizadas, supongo que es bastante nuevo en esto. La dirección de JQuery parecerá intimidante al principio, pero es realmente bastante fácil. Deberías usar JQuery para todo tu manejo de Ajax también.
# es una etiqueta de anclaje. si haces esto <a name="list">This is an anchor tag</a> entonces agrega #list a la url, la página saltará a la etiqueta a donde name = list.
Encontré el complemento mencionado muy útil. – diggersworld
He utilizado el enfoque hash bang para una aplicación completamente impulsada por Ajax con SEO. Desde mi experiencia, diría que es un enfoque muy confiable tanto para el navegador web como para los navegadores de teléfonos inteligentes.
Aquí está mi enfoque. Para la simplicidad del código, utilizaré el código Jquery/Zepto
Cuando necesite cargar una página Ajax diferente, simplemente cambie el hash URL usando javascript.
window.location.hash = '#!page1';
A continuación, un evento de cambio de hash se disparará desde el javascript
$(window).on('hashchange',loadPage);
manejar ese evento con la función 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);
});
}
}
De esta manera se puede cargar una página escribiendo URL y por usando enlace también.
Ahora la parte de SEO. Google y otro importante motor de búsqueda han desarrollado una forma de rastrear un sitio web basado en Ajax. Si utiliza #! en tu url google reemplazará el #! porción con '? _escaped_fragment_' y le pedirá contenido. por ejemplo, se convertirá
www.yoursite.com/#!page1 a www.yoursite.com/?_escaped_fragment_=page1
Todo lo que necesita hacer es captura que _escaped_fragment_ como un parámetro GET. Si utiliza php el código será como
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
}
También puede establecer título de la página html y una descripción para cada página de forma individual por la captura de la _escaped_fragment_
En una nota aparte, puede compartir url en los medios sociales utilizando #! también. Se analizará como un enlace normal con la ayuda de _escaped_fragment_
Espero que este enfoque lo ayude a cubrir todos los problemas.
Si tiene un contenido div donde se actualiza ajax, aquí hay un ejemplo que usa la biblioteca de direcciones de jquery http://www.asual.com/jquery/address/.
<body>
<div id="content">
Your ajax content...
</div>
</body>
incluyen la biblioteca dirección de jQuery y luego
$(document).ready(function() {
$('a').address();
$.address.externalChange(function (e) {
if (e.value != '/') {
$('#content').load(e.value);
}
});
});
Si desea excluir algunos href del historial de navegación
$('a[href!="#"]').address();
Se llama Ajax deep linking en caso de que alguien más se pregunta – Atomix
Gracias @Atomix, estaba buscando el nombre – Jacques