php ajax url-rewriting fragment-identifier hashchange

php - ¿Cómo se muestran las solicitudes de Ajax en la URL?



url-rewriting fragment-identifier (7)

Creo que puedes hacerlo fácilmente usando el evento onHashChange presente en HTML5 o usando una biblioteca de JavaScript que emula ese comportamiento "hash" en navegadores que no tienen soporte HTML 5 completo. Una de esas bibliotecas podría ser MooTools onhashchange , pero también hay muchas otras.

Que si tiene un navegador compatible con HTML 5 o una biblioteca que emula el comportamiento, simplemente use:

window.sethash("#newsection"); cambiar a algo nuevo desde javascript, y / o una devolución de llamada a ese evento onHashChange para interceptarlo, dependiendo de los escenarios de casos de uso.

Lo que quiero es tener enlaces que cambien una parte de la página, y una URL dinámica para ella, donde puedo especificar variables como #calendar=10_2010tabview=tab2

Check this for an exact example: HAGA CLIC AQUÍ PARA UNA DEMO EXACTA

Así que aquí está el formato de enlace que necesito:

#calendar=10_2010&tabview=tab2

Necesito tener variables en los enlaces, como el calendar y la tabview para poder cambiar varias cosas en una sola página sin hacer un aviso.

O en otro formato como http://www.wbhomes.com.au , esto es exactamente lo que quiero, sin embargo, el primer formato también es bueno, pero es mucho más hermoso.

  • http://wbhomes.com.au/#/propertiesforsale/houseandland/quinnsbeach-waterland1

Requisitos

  • Se debe acceder desde cualquier lugar, por ejemplo, un correo, o si solo escribo en la barra de direcciones.

  • El enlace debe estar en el historial, por lo que si presiono el botón Atrás o Adelante, se debe acceder a la página.

  • La actualización de página también debe funcionar.

Algunos recursos:

Ejemplos:

Algunos tutoriales:

¡Por favor, ayúdame! Nunca he encontrado ninguna solución para hacer esto, pero no quiero usar jquery o cualquier API, o cualquier biblioteca, quiero tener un script de Javascript/AJAX y PHP funcione.

El uso de enlaces hash permite que los enlaces favoritos / compartibles activen el código JavaScript, en lugar de volver a cargar la página. http://benalman.com/projects/jquery-hashchange-plugin/ permite vincular un controlador de eventos al evento hashchange, este complemento funciona con navegadores más antiguos que normalmente no lo admiten. Un controlador de eventos vinculado a hashchange puede leer la parte hash de la url y llamar a cualquier función.

// register event handler function bindHashchange() { $(window).bind(''hashchange'', function(event) { event.preventDefault(); var label = location.hash.substring(1); handleLabel(label); }); // trigger event so handler will be run when page is opened first time // otherwise handler will only run when clicking on hash links $(window).trigger(''hashchange''); } // read and handle hash part of url function handleLabel(label) { if ( label.length > 0 ) { // using label from url switchPage(label); } else { // use the default label, if no hash link was present switchPage(''start''); } } // in this case, load hidden <div>''s into a <div id="content"> function switchPage(label) { if ( label == ''start ) { $(''div#content'').html($(''div#start'')); } else if ( label == ''some_other_page'' ) { // do something else } }

Este otro controlador de eventos puede procesar 2 argumentos separados por un punto (''.'') En la misma url.

function processHash() { var str = location.hash.substring(1); var pos = $.inArray(''.'', str); var label = ''''; var arg = ''''; if ( pos > -1 ) { label = str.substring(0, pos); } else { label = str.substring(0); } if ( pos > 1 ) { arg = str.substring(pos+1); } if ( label.length == 0 ) { // the default page to open of label is empty loadContent(''start''); } else { // load page, and pass an argument loadContent(label, arg); } }

Si se utilizan expresiones regulares, cualquier combinación de caracteres se puede analizar.

var registry = {}; // split on character ''.'' var args = label.split(//./g); for ( i in args ) { var arg = args[i]; // split on character ''='' var temp = arg.split(''=''); var name = temp[0]; var value = temp[1]; // store argument in registry registry[name] = value; } // registry is loaded, ready to run application that depends on arguments

Esto transformará la url:

mysite / # company.page = items.color = rojo

En el siguiente objeto de JavaScript:

Objeto {empresa = indefinido, página = "artículos", color = "rojo"}

Entonces, solo es cuestión de ejecutar las funciones show () u hide () de jQuery en los elementos seleccionados.

Esto podría transformarse en JavaScript no jQuery, pero luego perdería la funcionalidad que entrega Ben Alman, que es crucial para una solución portátil.

Esto es algo que elude a la mayoría de los nuevos desarrolladores AJAXian. Aunque es un problema bastante simple de resolver.

Lo primero que necesitará es el núcleo jQuery que es gratuito en jquery.com

luego necesitarás el plugin jQuery hash change even de Ben Alman que puedes encontrar aquí: http://benalman.com/projects/jquery-hashchange-plugin/ No necesitarás esto para versiones más nuevas de navegadores compatibles con html5 evento hashchange, pero lo hará para las versiones anteriores de los navegadores. no tiene que hacer nada más que incluir este script en su página, maneja el resto.

ahora para tus enlaces necesitarás construirlos en una cadena de consulta así:

<a href="user.php?q=/topic/article" class="dynlnk">Link Text/Image</a>

ahora tiene enlaces que van a las páginas y pueden manejarse en php en caso de que JavaScript esté desactivado. todo lo que tiene que hacer es usar el $ _GET super global y analizar la cadena de consulta para manejar el contenido de la página.

ahora en su javascript en la página necesitará hacer que sus enlaces activen hashchange. Puedes hacer eso reemplazando el? Q = con un # como este.

$(".dynlnk").each(function(){ $(this).attr("href", $(this).attr("href").replace("?q=", "#")); });

ahora sus enlaces activarán el hashchange, lo único que queda por hacer es enlazar el hashchange a una función que hace algo. Esto se puede hacer de manera muy simple con jQuery como este:

$(window).bind( ''hashchange'', function(e){ //this splits the part after the hash so you can handle the parts individually. //to handle them as one just use location.hash pageparts = location.hash.split("/"); });

Ahora solo agrega el código que utilices para manejar tu ajax y contenido.

ahora solo necesita un último bit de javascript para activar el hashchange en caso de que la página se haya cargado con un hash para comenzar, así que solo llame a la función de activación de Windows cuando se cargue la página

$(window).trigger( ''hashchange'' );

Espero que esto sea lo suficientemente claro, si no, no dude en ponerse en contacto conmigo para hacer más preguntas.

Lo que quiere es una forma de respaldar el historial en AJAX que se puede hacer usando muchas bibliotecas existentes. Yo recomendaría leer la página de YUI 3 en la historia .

Para la demostración vinculada a su pregunta, lograr esa funcionalidad es realmente muy simple, ya que no usa ningún AJAX en absoluto (cuando comienza a agregar AJAX a la mezcla, se vuelve más difícil, se explica más adelante). Para lograr esa funcionalidad, lo haría; actualice sus enlaces para usar hashes, luego vincule al evento hashchange. Lamentablemente, el evento hashchange no es compatible con varios navegadores, aunque afortunadamente hay muchos "complementos históricos / remotos" disponibles; nuestro preferido a lo largo de los años ha demostrado ser jQuery History , es de código abierto, recibió un gran apoyo y se desarrolló activamente: -).

Aunque, cuando se trata de agregar funcionalidad AJAX a la mezcla, como sitios como Facebook, www.wbhomes.com.au/ y Balupton.com, entonces ¡comenzarás a enfrentar toda una serie de problemas realmente difíciles! (¡Sé que fui el arquitecto principal de los dos últimos sitios!). Algunos de estos problemas son:

  • ¿Cómo puede actualizar de forma elegante y sencilla ciertos enlaces internos para usar el historial y la funcionalidad AJAX, y detectar cuándo ha cambiado el hash? mientras mantiene otros enlaces funcionando igual que antes.
  • ¿Cómo redirigir de "www.yoursite.com/myapp/a/b/c" a "www.yoursite.com/myapp/#/a/b/c"? y aún así mantener la experiencia fluida para el usuario, de modo que los 3 redireccionamientos necesarios sean lo más sencillos posible.
  • ¿Cómo enviar datos y valores de formulario usando AJAX y actualizar el hash? y viceversa si no admiten Javascript.
  • ¿Cómo detectar qué área particular de la página es deficiente la solicitud AJAX? Tal que las subpáginas se muestran con la página correcta.
  • ¿Cómo cambiar el título de la página cuando cambia el estado de AJAX? y otro contenido que no sea de página.
  • ¿Cómo se realizan buenos efectos de intro / outro mientras se carga y cambia el estado AJAX? de modo que el usuario no se quede a oscuras.
  • ¿Cómo actualizar la información de inicio de sesión de la barra lateral cuando iniciamos sesión a través de AJAX? Como obviamente, no queremos que ese botón de inicio de sesión suba arriba a la izquierda para estar allí más.
  • ¿Cómo todavía apoyar el sitio web para los usuarios que no tienen habilitado JS? Tal que se degrada graciosamente y aún es indexable por los motores de búsqueda.

El único proyecto de fuente abierta y confiable que conozco que intenta resolver todos esos problemas extremadamente difíciles mencionados ha demostrado ser jQuery Ajaxy . Es efectivamente una extensión del proyecto de jQuery History mencionado anteriormente, que proporciona una agradable y elegante interfaz de alto nivel para agregar la funcionalidad AJAX a la mezcla para resolver esos problemas difíciles detrás de escena, para que no tengamos que preocuparnos por ellos. También es la solución elegida utilizada en los últimos sitios comerciales mencionados anteriormente.

Buena suerte, y si tiene más preguntas, solo publique un comentario sobre esta respuesta y la abordaré lo antes posible :-)

Actualización: ahora existe la API de historial de HTML5 (pushState, popState) que desaprueba la funcionalidad de hashchange HTML4. History.js ahora es el sucesor de jQuery History y proporciona compatibilidad entre navegadores para la API de historial HTML5 y una alternativa de hashchange optional para navegadores HTML4. jQuery Ajaxy se actualizará para History.js

Szevasz .. :)

HTML

<a href="/bye.php?user=abc&page=messages" onclick="return goToWithAjax(this);">bye</a>

Javascript

function goToWithAjax(hash) { hash = hash.href ? hash.getAttribute("href", 2) : hash; ajax( hash, function( response ) { document.getElementById("content").innerHTML = response; }); hash = ("#!/" + hash).replace("//","/"); window.location.hash = hash; return false; } ////////////////////////////////////////////////////////////////////////////// function getXmlHttpObject() { var xmlHttp; try { xmlHttp = new XMLHttpRequest(); } catch (e) { try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; } function ajax(url, onSuccess, onError) { var xmlHttp = getXmlHttpObject(); xmlHttp.onreadystatechange = function () { if (this.readyState == 4) { // onError if (this.status != 200) { if (typeof onError == ''function'') { onError(this.responseText); } } // onSuccess else if (typeof onSuccess == ''function'') { onSuccess(this.responseText); } } }; xmlHttp.open("GET", url, true); xmlHttp.send(null); return xmlHttp; }​

CorMVC Jquery Framework se hace de esa manera, es un código abierto que puede profundizar en la fuente y obtener la lógica de la misma.

Y en realidad es bastante sencillo. El creador lo dice muy bien en este video a continuación.

http://www.bennadel.com/resources/jing/2009-12-21_0933.swf

PD: lo siento, no puedo publicar el segundo enlace porque soy un nuevo usuario.