Endre adresselinjen URL i AJAX App til Match Current State

stemmer
161

Jeg skriver en AJAX app, men som brukeren beveger seg gjennom app, vil jeg gjerne URL i adresselinjen for å oppdatere tross for mangelen på siden lastes på nytt. I utgangspunktet vil jeg gjerne for dem å være i stand til å bokmerke når som helst og dermed gå tilbake til den nåværende tilstand.

Hvor er folk håndtering opprettholde restfulness i AJAX apps?

Publisert på 04/08/2008 klokken 17:53
kilden bruker
På andre språk...                            


8 svar

stemmer
116

Måten å gjøre dette på er å manipulere location.hashnår AJAX oppdateringer resultere i en tilstand endring som du ønsker å ha en diskret URL. For eksempel, hvis siden din url er:

http://example.com/

Hvis en klient side funksjon utført denne koden:

// AJAX code to display the "foo" state goes here.

location.hash = 'foo';

Deretter vil webadressen som vises i nettleseren bli oppdatert til:

http://example.com/#foo

Dette tillater brukere å bokmerke "foo" state of the page, og bruke nettleserens historikk for å navigere mellom stater.

Med denne mekanismen på plass, vil du da trenger å analysere ut hash del av nettadressen på klientsiden ved hjelp av Javascript for å opprette og vise den aktuelle opprinnelig tilstand, som fragment identifikatorer (den delen etter #) blir ikke sendt til server.

Ben Almanakken er hashchange plugin gjør sistnevnte en lek hvis du bruker jQuery.

Svarte 04/08/2008 kl. 18:04
kilden bruker

stemmer
18

Se på nettsteder som book.cakephp.org. Dette nettstedet endrer URL uten å bruke hasj og bruke AJAX. Jeg er ikke sikker på hvordan den gjør det akkurat, men jeg har prøvd å finne ut av det. Hvis noen vet, gi meg beskjed.

Også github.com når man ser på et navigere innenfor et bestemt prosjekt.

Svarte 13/02/2011 kl. 19:47
kilden bruker

stemmer
17

Det er usannsynlig at forfatteren ønsker å laste eller omdirigere besøkende hans ved bruk av Ajax. Men hvorfor ikke bruke HTML5 er pushState/ replaceState?

Du vil være i stand til å endre adressefeltet i så mye du vil. Få naturlige webadresser, med AJAX.

Sjekk ut koden på mitt siste prosjekt: http://iesus.se/

Svarte 27/04/2011 kl. 08:09
kilden bruker

stemmer
12

Dette ligner på hva Kevin sa. Du kan ha din klient tilstand som noen javascript objekt, og når du vil spare staten, serial du objektet (ved hjelp av JSON og base64 koding). Du kan deretter sette fragment av href til denne strengen.

var encodedState = base64(json(state));
var newLocation = oldLocationWithoutFragment + "#" + encodedState;

document.location = newLocation; // adds new entry in browser history
document.location.replace(newLocation); // replaces current entry in browser history

Den første måten vil behandle den nye staten som en ny plassering (slik at tilbake-knappen vil ta dem til forrige plassering). Den sistnevnte ikke.

Svarte 04/08/2008 kl. 18:02
kilden bruker

stemmer
3

Hvis OP eller andre er fortsatt på utkikk etter en måte å gjøre endre nettleserens historikk for å muliggjøre staten, ved hjelp av pushstate og replaceState, som foreslått av Jesus, er den 'riktige' måten å gjøre det nå. Det viktigste fordelen over location.hash synes å være at det skaper faktiske webadresser, ikke bare hashes. Hvis nettleseren historie ved hjelp av hashes er lagret, og deretter gjensyn med javascript deaktivert, vil programmet ikke fungerer, siden hashes ikke blir sendt til serveren. Men hvis pushstate har blitt brukt, hele ruten vil bli sendt til serveren, som du deretter kan bygge for å reagere riktig på rutene. Jeg så et eksempel hvor de samme barten maler ble brukt både på server og klientsiden. Dersom kunden hadde javascript aktivert, ville han få irritabel svar ved å unngå rundtur til serveren, men app ville fungere helt greit uten javascript. Dermed kan programmet elegant nedbrytes i fravær av javascript.

Dessuten tror jeg det er noe rammeverk der ute, med et navn som history.js. For nettlesere som støtter HTML5, den bruker pushstate, men hvis nettleseren ikke støtter den automatisk faller det tilbake til å bruke hashes.

Svarte 23/06/2011 kl. 09:20
kilden bruker

stemmer
3

Den window.location.hash metoden er den foretrukne måten å gjøre ting på. For en forklaring på hvordan du gjør det, Ajax Patterns - Unike URLer .

YUI har en implementering av dette mønsteret som en modul, som omfatter IE bestemt arbeid arounds for å få tilbake-knappen jobbe sammen med omskrivninger adressen ved å bruke hasj. YUI Browser History Manager .

Andre rammer har lignende implementeringer også. Det viktige poenget er hvis du vil at historien til å arbeide sammen med omskrivninger adressen, de ulike nettlesere trenger ulike måter å håndtere det. (Dette er detaljert i den første linken artikkelen.)

IE trenger en iframe basert hack, hvor Firefox vil produsere dobbelt historie ved hjelp av samme metode.

Svarte 31/03/2009 kl. 05:54
kilden bruker

stemmer
3

SWFAddress arbeider i Flash og Javascript prosjekter og lar deg lage bokmerker nettadresser (som bruker hasj metoden nevnt ovenfor), samt gi deg tilbake-knappen støtte.

http://www.asual.com/swfaddress/

Svarte 01/09/2008 kl. 13:43
kilden bruker

stemmer
2

Sjekk om bruker er 'in' på siden når du klikker på url bar, javascript sier at du er ute av siden. Hvis du endrer url feltet og trykk 'Enter' med symbolet '#' innen det da du går inn på siden igjen, uten klikk på siden manuelt med musepekeren, deretter en keyboad hendelsen kommando (document.onkeypress) fra Javascript vil kunne sjekke om det er fyll og aktiv javascript for omdirigering. Du kan sjekke om brukeren er på siden med window.onfocus og sjekk om han er ute med window.onblur.

Ja, det er mulig.

;)

Svarte 13/10/2010 kl. 23:18
kilden bruker

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more