Vă mulțumim pentru susținere

Modificați adresa URL a barei de adrese în aplicația AJAX pentru a se potrivi cu starea curentă

Scriu o aplicație AJAX, dar pe măsură ce utilizatorul trece prin aplicație, aș dori ca adresa URL din bara de adrese să se actualizeze, în ciuda lipsei reîncărcării paginilor. Practic, aș vrea ca ei să poată să marcheze în orice moment și, astfel, să revină la starea actuală.

Cum manipulează menținerea RESTfulness în aplicațiile AJAX?

0
adăugat editat
Am editat răspunsul pentru a face abordarea pushState proeminentă.
adăugat autor jasonjwwilliams
window.history.pushState (null, 'hi', 'id page1? = 32')
adăugat autor Omu
Acesta este folosit pentru a menține starea aplicațiilor dvs., dar nu are nimic de a face cu "RESTfulness".
adăugat autor Mohamed
răspunsul acceptat a fost scris acum 5 ani și, între timp, am primit window.history.pushState, la fel cum a spus @Omu. location.hash a adus numeroase probleme și este cel mai bine să o eviți.
adăugat autor peteroak

6 răspunsuri

Modalitatea de a face acest lucru este de a manipula location.hash atunci când actualizările AJAX au ca rezultat o schimbare de stat pe care doriți să aveți o adresă URL discretă. De exemplu, dacă adresa URL a paginii dvs. este:

http://example.com/

Dacă o funcție de client a executat acest cod:

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

location.hash = 'foo';

Apoi, adresa URL afișată în browser va fi actualizată la:

http://exemplu.ro/#foo

Acest lucru permite utilizatorilor să marcheze starea "foo" a paginii și să utilizeze istoricul navigatorului pentru a naviga între state.

Cu ajutorul acestui mecanism, va trebui apoi să analizați porțiunea hash a adresei URL de pe partea clientului utilizând JavaScript pentru a crea și a afișa starea inițială corespunzătoare, deoarece identificatorii de fragmente (partea de după #) nu sunt expediate la Server.

Ben Alman's hashchange plugin makes the latter a breeze if you're using jQuery.

0
adăugat
@buymeasoda Vă mulțumim pentru editare; Nu sunt sigur ce mă gândeam atunci când am scris acea parte.
adăugat autor Dave Ward
@Neil: Am folosit în mod intenționat structura / întrebări / pagină la momentul respectiv, dar nu sunt sigur de ce. Probabil că aveți dreptate că păstrarea ei este mai simplă. Am actualizat răspunsul în consecință.
adăugat autor Dave Ward
@Pascal Puteți, dar numai în browserele care acceptă pushState pentru HTML5. Informații utile despre asta aici: diveintohtml5.info/history.html
adăugat autor Dave Ward
Se pare că ai dreptate. Aceasta este singura abordare. Aceasta pare a fi o explicație detaliată detaliată a sfaturilor dvs.:
adăugat autor jasonjwwilliams
Wow, acest răspuns a fost foarte util. Deși exemplele de adrese URL sunt puțin confuz, SO ar putea înlocui automat linkurile cu titlurile. Ce inseamna a inlocui pe cei cu ceva de genul example.com si example.com/#foo, astfel incat sa putem vedea intregul URL in textul plaintext.
adăugat autor Neil
Am ajuns să fiu un mare fan al istoriei.js pentru a acoperi bazele compatibilității browserului github.com/andreasbernhard /history.js
adăugat autor jocull
@Dave vreau #foo fără hash-char este posibil?
adăugat autor Pascal

Dacă OP sau alții caută în continuare o modalitate de a modifica istoricul browserului pentru a activa starea, folosind pushState și replaceState, după cum sugerează IESUS, este modul "potrivit" de a face acest lucru acum. Este avantajul principal față de locație. Se pare că acesta creează adrese URL reale, nu numai hashes. Dacă istoricul browserului care utilizează hashes este salvat și apoi revizuit cu javascript dezactivat, aplicația nu va funcționa, deoarece hash-urile nu sunt trimise către server. Cu toate acestea, dacă a fost folosit pushState, întregul traseu va fi trimis către server, pe care apoi îl puteți construi pentru a răspunde corespunzător rutelor. Am văzut un exemplu în care aceleași șabloane de mușchi au fost utilizate atât pe server, cât și pe partea clientului. Dacă clientul ar fi activat javascript, ar primi răspunsuri rapide evitând călătoria dus-întors la server, dar aplicația ar funcționa perfect fără javascript. Astfel, aplicația se poate degrada grațios în absența javascript-ului.

De asemenea, cred că există un cadru acolo, cu un nume precum history.js. Pentru browserele care acceptă HTML5, folosește butonul pushState, dar dacă browserul nu acceptă acest lucru, acesta revine automat la utilizarea hash-urilor.

0
adăugat

Acest lucru este similar cu ceea ce a spus Kevin. Puteți avea statutul dvs. de client ca un obiect javascript și atunci când doriți să salvați statul, serializați obiectul (utilizând codarea JSON și base64). Apoi puteți seta fragmentul href la acest șir.

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

Prima modalitate va trata noua stare ca o locație nouă (așa că butonul din spate îl va duce la locația anterioară). Acesta din urmă nu.

0
adăugat
face document.location.replace va redirecționa, de asemenea, browser-ul la acea url (tocmai a încercat-o în consola cromată)
adăugat autor Omu
Există o modalitate de a adăuga o intrare în istoricul marcajelor fără a reîmprospăta pagina? Setarea locației (ca în primul exemplu) va provoca o reîmprospătare, nu-i așa?
adăugat autor Drew Noakes

Verificați dacă utilizatorul este "în" pagina, când faceți clic pe bara url, javascript spune că sunteți în afara paginii. Dacă schimbați bara url și apăsați "ENTER" cu simbolul "#" în ea, atunci intrați din nou în pagină fără să faceți clic manual pe pagină cu cursorul mouse-ului, apoi o comandă de eveniment de tastatură (document.onkeypress) din javascript va să fie capabil să verifice dacă este activ și javascript pentru redirecționare. Puteți verifica dacă utilizatorul este IN pagina cu window.onfocus și verificați dacă este afară cu window.onblur.

Da, este posibil.

;)

0
adăugat
Acesta este modul în care am văzut elegant pentru a schimba pagina când utilizatorul editează bara de url cu simbolul #.
adăugat autor Marcelo

Uită-te la site-uri cum ar fi book.cakephp.org. Acest site modifică adresa URL fără a utiliza hash-ul și utilizează AJAX. Nu sunt sigur cum o face exact, dar am încercat să-mi dau seama. Dacă cineva știe, dați-mi voie să știu.

De asemenea, github.com când se uită la o navigare într-un anumit proiect.

0
adăugat
Am observat asta cu GitHub cu o săptămână în urmă. Ce fac pe pământ asta? Trebuie să se întoarcă și să verifice.
adăugat autor Drew Noakes
Mulțumesc pentru asta, exact ceea ce căutam. M-am întrebat cum a făcut-o Github. La început am crezut că trebuie să se reîncarce, dar au fost doar cereri AJAX. În Opera, a reîncărcat pagina.
adăugat autor kamranicus
Tehnica similară este utilizată de fb în timpul navigării prin pagini din diferite grupuri. Aveți o coloană stânga nav în care sunt menționate diferite grupuri. Când faceți clic pe numele unui anumit grup, urlul se modifică și numai conținutul principalului panou de conținut se modifică împreună cu url (fără hash). Deci, atunci când utilizatorul reîncarcă pagina, acestea nu sunt redirecționate către pagina de pornire, ci către pagina grupurilor.
adăugat autor Madeyedexter
Se pare că folosesc funcția javascript pushState (). Acest lucru se adaugă la istoricul browserului dvs. Uită-te în ea; este destul de interesant și de rece.
adăugat autor daniel.wright

Este puțin probabil ca scriitorul să vrea să-și reîncărca sau să-și redirecționeze vizitatorul când îl folosește pe Ajax. Dar de ce să nu folosiți pushState / replaceState ?

You'll be able to modify the addressbar as much as you like. Get natural looking urls, with AJAX.

Check out the code on my latest project: http://iesus.se/

0
adăugat