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

Question

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

Check this for an exact example:CLICK HERE FOR EXACT DEMO

Así que aquí está la formato de enlace de lo que necesito:

#calendar=10_2010&tabview=tab2

Necesito tener variables en los enlaces como calendar y tabview, por lo que puedo cambiar varias cosas en una sola página sin dar el salto.

---

u otro formato, tales como el http://www.wbhomes.com.au, esto es exactamente lo que quiero, sin embargo, el primer formato es bueno, pero esto es mucho más bella.

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

---

Requisitos

• se necesita acceder desde cualquier lugar de ejemplo, un correo electrónico, o si sólo escribir en la barra de URL .

• 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 recources:

Ejemplos:

• www.developer.yahoo.com/

• www.facebook.com - los enlaces de la barra lateral en su página de perfil

• www.wbhomes.com.au/ - 100% de cerca de lo que quiero

• www.flickr.com/

• www.youtube.com

algunos tutoriales:

• www.ajaxpatterns.org/

• www.contentwithstyle.co.uk/

---

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 que funcione Javascript/AJAX y PHP.

Answer 1

Para la demostración vinculado en su pregunta, lograr que la funcionalidad es en realidad muy simple - ya que no usa ningún AJAX en absoluto (cuando comienzas a agregar AJAX a la mezcla, es 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 navegadores cruzados, 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 soporte y está desarrollado activamente :-).

Aunque, cuando se trata de agregar funcionalidad AJAX a la mezcla como sitios como Facebook, WBHomes y Balupton.com, ¡entonces comenzará 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 se 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 quiere 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 de 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 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 puedo mantener el sitio web para usuarios que no tienen habilitado JS? Tal que se degrada graciosamente y aún es indexable por los motores de búsqueda.

El único de código abierto y el proyecto fiable que conozco que trata de resolver todos esos problemas extremadamente difíciles mencionadas 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 alguna duda entonces sólo publicar un comentario en esta respuesta y voy a llegar a ella lo antes posible :-)

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

Answer 2

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; 
}​ 

Answer 3

Creo que se puede hacer muy fácilmente usando el onhashchange caso presente en HTML5 o el uso de una biblioteca JavaScript que emula el comportamiento que "control" en los navegadores que no tienen soporte completo de HTML 5. 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 solo use:

window.sethash("#newsection");

para cambiar a algo nuevo desde javascript, y/o una devolución de llamada a ese evento enHashChange para interceptarlo, dependiendo de su uso escenarios de casos.

Answer 4

CorMVC Jquery Framework se hace de esa manera, es de código abierto, 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

PS siento no puede publicar segundo enlace bc soy un nuevo usuario.

Answer 5

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

primero que se necesita es el núcleo de jQuery, que es gratuito en jquery.com

A continuación, tendrá el cambio de hash jQuery Plugin incluso por Ben Alman donde puede encontrar aquí: http://benalman.com/projects/jquery-hashchange-plugin/ Usted no necesita esto para versiones más nuevas de navegadores que admiten el evento hashchange html5, pero lo hará para versiones anteriores de navegadores. no tiene que hacer nada más que incluir este script en su página, maneja el resto.

ahora para sus enlaces que se necesitan para construirlos de manera cadena de consulta de este modo:

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

ahora tienen enlaces que van a las páginas y se pueden manejar en php en el caso JavaScript 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 que necesitará hacer que sus enlaces desencadenen 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 la hashchange, lo único que queda por hacer es obligar a la hashchange a una función que hace algo. Esto se puede hacer de manera muy sencilla con jQuery así:

$(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 sólo tiene que añadir lo que nunca código que hace para manejar su ajax y contenido.

ahora sólo tiene una última poco de javascript para desencadenar la hashchange en caso de que la página se ha cargado con un hash para comenzar con lo que sólo se llama a la función ventanas gatillo cuando se carga la página

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

Esperemos que este es lo suficientemente claro, si no, no dude en ponerse en contacto conmigo para hacer más preguntas.

Answer 6

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. Ben Almans jQuery hashchange event le 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 el mismo 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, se puede analizar cualquier combinación de caracteres.

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 artículos.color = red

en las siguientes JavaScript Object:

objeto {company = indefinido, page = "elementos", color = "red"}

entonces es sólo una 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.

Answer 7

Lo que desea es una forma de admitir la historia en AJAX que se puede hacer usando muchas bibliotecas existentes. Yo recomendaría leer YUI 3 page on history.