¿Cómo se hace AJAX en el buscador de github?

Github tiene un buen browser fuente. Navegar entre diferentes routes en el repository genera llamadas ajax para cargar el contenido (como se puede ver claramente en el logging de Firebug). La llamada ajax devuelve el html de la nueva list de files que se mostrará. Además de cambiar la list de vista de files, la URL también cambia. Sin embargo, no utiliza fragments como la mayoría de los sitios de enlace profundo ajax (uso de #). En github toda la url cambia.

Por ejemplo, en django repo en https://github.com/django/django ir a la carpeta django generará una request ajax a https://github.com/django/django/tree/master/django?slide=1&_=1327709883334 que devolverá el contenido html de la carpeta. El enlace también cambiará a https://github.com/django/django/tree/master/django . Como puede ver, este nuevo enlace no usa un fragment.

¿Cómo se hace eso? Siempre pensé que los sitios basados ​​en ajax tenían que usar fragments de URL (#) para lograr enlaces profundos, pero aparentemente no es así.

Bueno, como se describió en los comentarios de Dav , parece que GitHub no usa la biblioteca pAjax. Debido a que terminé respondiendo con una información "incorrecta" (de hecho, creo que había visto algo relacionado con GitHub con pAjax cuando respondía esta pregunta, pero por el momento no puedo encontrar la fuente), fui tras La respuesta correcta.

No encontré nada oficial por parte de los desarrolladores con respecto a si se utilizó alguna biblioteca, solo encontré una publicación que decía que se utilizó la API de Historial: https://github.com/blog/760-the-tree-slider

Luego vino a mi cabeza, ¿por qué no preguntar el código en sí?

Usando Chrome (en realidad, cualquier browser con herramientas de desarrollador decentes), abra un repository (en este caso, pAjax), haga clic derecho en cualquier directory, simplemente elija inspeccionar elemento.

Elemento de inspección

Esto mostrará el elemento a responsable del enlace del directory.

Estructura de HTML

Apareció una class "sospechosa", vamos a searchla en la fuente de JavaScript de la página.

¡Codez!

Y aquí está, el controller de events click para el enlace del directory, además de todo el código relacionado con la animation y el Historial Api. Y como se puede observar, no se usa ninguna biblioteca detrás de History Api. No olvide marcar la opción de printing bonita.


Respuesta antigua e incorrecta

GitHub utiliza el plugin jQuery pJax (pushState + Ajax), que utiliza la API de historial de HTML5.

Debe usar el método pushState () de HTML5 para cambiar el historial del browser.

 window.history.pushState(data, "Title", "/new-url"); 

Doc dice:

pushState () toma tres parameters: un object de estado, un título (que actualmente se ignora) y (opcionalmente) una URL.

El último argumento es la nueva URL. Por razones de security, solo puede cambiar la ruta de la URL, no el dominio en sí. El segundo argumento es una descripción del nuevo estado. Y el primer argumento es algunos datos que es posible que desee almacenar junto con el estado.