AJAX 호출 시 URL을 업데이트하시겠습니까?

AJAX 호출 시 URL을 업데이트하시겠습니까?

지금 제가 AJAX를 사용할 때 가장 큰 문제는 페이지에서 AJAX를 사용할 경우 다른 페이지로 이동한 후 브라우저의 뒤로 버튼을 사용하여 AJAX에서 변경된 내용이 모두 사라졌다는 것입니다.

jQuery Addresses 플러그인을 사용하여 그 문제를 해결하려고 생각해 보았지만 URL을 완전히 변경하지 않고 "#whathever.html"로만 수정하는 방식이 마음에 들지 않습니다.

이상적으로 제가 원하는 것은 관련 AJAX 전화를 걸 때 URL을 "www.example.com/p:2/ "에서 "www.example.com/p:3/ "로 이동하는 것입니다.

가능한 일입니까?

HTML5로 가능합니다. GitHub이나 Vkontakte 사이트의 예시로 테스트 할 수 있습니다.

가장 좋은 답은 다음과 같습니다. 자바스크립트를 사용하여 새 페이지를 로드하지 않고 브라우저에서 URL을 변경합니다.

그런 목적으로 history.pushState 기능을 사용할 수 있다고 나와 있습니다.그러나 이 솔루션은 HTML5 호환 브라우저에서만 작동합니다.그렇지 않으면 해시 메서드를 사용해야 합니다.

아니요, 이건 불가능합니다.업데이트: 이제 HTML5 History API를 통해 가능합니다 - 라즈바코프의 답변 참조.

나는 당신이 극도로 어려운 문제를 해결하기 위해 노력하고 있다는 것을 깨닫기를 바랍니다.

당신의 url은 다음과 같이 보입니다.

http://example.com/mypage/

창 위치를 다음으로 프로그래밍 방식으로 변경하는 경우

http://example/mypage/1/

브라우저가 해당 페이지로 이동합니다. 멋진 에이잭스 코드가 사라집니다!

그럼 대안이 뭘까요?URL fragment를 사용합니다.

예를 들어 이런 URL이 있다고 가정해 보겠습니다.

http://example.com/anotherpage/#section

브라우저가 먼저 http://example.com/anotherpage/ 을 로드하고 '섹션'이라는 이름의 앵커를 찾아 해당 위치로 스크롤합니다.이 동작은 'Addresses' 플러그인에 의해 공격됩니다.이는 'Scroll To Top' 링크의 작동 방식과 유사합니다.

그래서 만약 당신이 그 페이지에 있다면.

http://example.com/mypage/

URL을 다음으로 변경합니다.

http://example.com/mypage/#1

브라우저가 새 페이지를 로드하지 않고 '1'이라는 이름의 앵커를 찾아 해당 앵커로 스크롤합니다.

URL에 조각을 추가했다고 해도 작업이 완료된 것은 아닙니다.사용자가 뒤로 버튼을 누르면 DOM이 재설정되며 이러한 fragment를 파싱하고 DOM을 다시 만들어야 합니다.분명 사소한 일이 아닙니다.

이 문제는 history.js를 사용하여 해결할 수 있습니다.https://github.com/browserstate/history.js

pjax는 현대 브라우저에서 이를 우아하게 처리합니다.

AJAX 호출 후 history.pushState를 사용하여 클라이언트 URL을 업데이트 할 수 있습니다.아래 구문과 예제를 찾으십시오.

구문: history.pushState(obj, obj).제목, obj.Url);

예:

var url = "http://example.com/mypage/" + "newParameter=newValue"
history.pushState(undefined, '', url);

언급URL : https://stackoverflow.com/questions/1134280/update-url-on-ajax-call