Verander Adres Bar URL in AJAX App om Huidige Staat Pas

Question

Ek skryf 'n AJAX app, maar as die gebruiker deur middel van die app beweeg, wil ek graag die URL in die adres bar te werk ten spyte van die gebrek aan bladsy herlaadt. Basies, wil ek graag vir hulle om in staat wees om boekmerk by enige punt en sodoende terug te keer na die huidige stand.

Hoe word mense hanteer die handhawing van rustigheid in AJAX programme?

Answer 1

Die manier om dit te doen, is om location.hash manipuleer wanneer AJAX updates lei tot 'n toestand verandering wat jy wil 'n strategies URL het. Byvoorbeeld, as jou bladsy se URL is:

  

http://example.com/

As 'n kliënt kant funksie uitgevoer word hierdie kode:

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

location.hash = 'foo';

Dan sal die URL vertoon in die leser word opgedateer om:

  

http://example.com/#foo

Dit laat gebruikers toe om boekmerk die "cat" state of the page, en gebruik die leser geskiedenis te navigeer tussen state.

Met hierdie meganisme in plek is, sal jy dan nodig het om te ontleed uit die hash gedeelte van die URL op die kliënt kant met behulp van JavaScript om die toepaslike aanvanklike toestand te skep en vertoon, as fragment identifiseerders (die deel na die #) is nie gestuur om die bediener.

Ben Alman se hashchange plugin maak laasgenoemde 'n briesie as jy die gebruik van jQuery .

Answer 2

Kyk na plekke soos book.cakephp.org. Hierdie webwerf verander die URL sonder die gebruik van die hash en gebruik AJAX. Ek is nie seker hoe dit presies beteken dit, maar ek het al probeer om dit uit te vind. As iemand weet, laat my weet.

Ook github.com wanneer jy soek na 'n navigasie-binne 'n sekere projek.

Answer 3

Dit is onwaarskynlik dat die skrywer wil herlaai of herlei sy besoeker by die gebruik van Ajax. Maar hoekom nie HTML5 se pushState / replaceState gebruik?

Jy sal in staat wees om die addressbar soveel as wat jy wil verander. Kry natuurlike soek urls, met AJAX.

Check uit die kode op my nuutste projek: http://iesus.se/

Answer 4

Dit is soortgelyk aan wat Kevin gesê. Jy kan jou kliënt staat het as 'n paar javascript voorwerp, en wanneer jy wil die staat te red, jy die voorwerp (met behulp van into en base64) afleveringen. Jy kan dan stel die fragment van die href om hierdie string.

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

Die eerste manier sal die nuwe staat te behandel as 'n nuwe plek (so die terug knoppie sal hulle neem om die vorige plek). Laasgenoemde doen nie.

Answer 5

SWFAddress werk in Flash & Javascript projekte en kan jy geboekmerk URLs (met behulp van die bogenoemde hash metode) te skep, asook gee jy terug-knoppie ondersteuning.

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

Answer 6

Die window.location.hash metode is die voorkeur-manier van dinge doen. Vir 'n verduideliking van hoe om dit te doen, Ajax Patrone -. Unieke URLs

Yui het 'n implementering van hierdie patroon as 'n module wat IE spesifieke werk arounds sluit vir die kry van die terug knoppie werk saam met re-skryf die adres behulp van die hash. Yui Browser History Manager .

Ander raamwerke het 'n soortgelyke implementering sowel. Die belangrike punt is as jy wil die geskiedenis om saam te werk met die re-skryf die adres, die verskillende blaaiers nodig verskillende maniere van hantering daarvan. (Dit is uiteengesit in die eerste skakel artikel.)

Internet Explorer moet 'n iframe gebaseer hack, waar Firefox dubbel geskiedenis sal produseer met behulp van dieselfde metode.

Answer 7

As OP of ander is nog op soek na 'n manier om dit te doen te verander leser geskiedenis te staat stel, met behulp van pushState en replaceState, soos voorgestel deur Jesus, is die "reg" manier om dit nou te doen. Dis grootste voordeel oor location.hash blyk te wees dat dit skep werklike URL's, nie net hashes. As die leser geskiedenis met behulp van hashes is gered, en dan hersien met Javascript afgeskakel, sal die app nie werk nie, aangesien die twee velde nie aan die bediener gestuur. Maar as pushState is gebruik, die hele roete sal aan die bediener, wat jy dan kan bou om toepaslik te reageer op die roetes gestuur. Ek het gesien hoe 'n voorbeeld waar dieselfde snor templates gebruik op beide die bediener en die kliënt se kant. Indien die kliënt JavaScript het aangeskakel, sou hy pittig antwoorde kry deur die voorkoms van die retour na die bediener, maar die app sal werk heeltemal fyn sonder die javascript. Dus, kan die jeug grasieus verneder in die afwesigheid van JavaScript.

Ook, ek glo daar is 'n paar raamwerk daar buite, met 'n naam soos history.js. Vir blaaiers wat HTML5 ondersteun, dit maak gebruik van pushState, maar as die blaaier ondersteun nie dat dit val automaties val terug na die gebruik van hashes.

Answer 8

Kyk of gebruiker is 'in' die bladsy, as jy klik op die url bar, javascript sê jy is uit bladsy. As jy die url bar en druk "Enter" met die simbool '#' binne dit dan gaan jy weer in die bladsy, te verander sonder klik op die bladsy met die hand met die muis wyser, dan 'n sleutelbordinvoer gebeurtenis opdrag (document.onkeypress) van JavaScript in staat wees om te kyk of dit betree en aktief die javascript vir verwysing. Jy kan kyk of gebruiker is IN die bladsy met window.onfocus en kyk of hy uit met window.onblur.

Ja, dit is moontlik.

;)