현재 상태와 일치하도록 AJAX 앱의 주소 표시줄 URL 수정

현재 상태와 일치하도록 AJAX 앱의 주소 표시줄 URL 수정

AJAX 앱을 작성하고 있습니다만, 유저가 앱을 이동할 때, 페이지를 새로고침하지 않아도 주소창의 URL을 갱신해 주었으면 합니다.기본적으로는 언제든지 북마크를 할 수 있기 때문에 현재 상태로 돌아가고 싶습니다.

사람들은 AJAX 앱에서 RESTfulness를 어떻게 관리하고 있습니까?

입니다.location.hashAJAX URL 입니다. URL을 사용하다

http://example.com/

클라이언트 측 함수가 이 코드를 실행한 경우:

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

location.hash = 'foo';

그러면 브라우저에 표시되는 URL이 다음과 같이 업데이트됩니다.

http://example.com/ #foo

이를 통해 사용자는 페이지의 "foo" 상태를 북마크하고 브라우저 기록을 사용하여 상태 사이를 이동할 수 있습니다.

이 메카니즘을 도입하면, 클라이언트측의 URL 의 해시 부분을 JavaScript 를 사용해 해석해, 적절한 초기 상태를 작성해 표시할 필요가 있습니다.이것은, fragment 식별자(# 이후의 부분)가 서버에 송신되지 않기 때문입니다.

jQuery를 사용하는 경우 Ben Alman의 해시 변경 플러그인은 후자를 쉽게 만듭니다.

book.cakephp.org 같은 사이트를 보세요.이 사이트는 해시를 사용하지 않고 URL을 변경하고 AJAX를 사용합니다.정확히 어떻게 하는지는 모르겠지만 알아내려고 노력 중이야.아는 사람 있으면 알려주세요.

또한 특정 프로젝트 내에서 탐색하는 경우 github.com를 참조하십시오.

필자가 Ajax를 사용할 때 방문자를 다시 로드하거나 리디렉션할 가능성은 거의 없습니다.HTML5를 은 어떨까요?pushState/replaceState

원하는 만큼 주소 표시줄을 수정할 수 있습니다.AJAX를 사용하여 자연스러운 URL을 얻을 수 있습니다.

최신 프로젝트의 코드를 확인해 주세요.http://iesus.se/

이것은 케빈이 말한 것과 비슷하다.클라이언트 상태를 javascript 개체로 설정할 수 있으며 상태를 저장하려면 개체를 직렬화합니다(JSON 및 base64 인코딩 사용).다음으로 href의 fragment를 이 문자열로 설정할 수 있습니다.

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

첫 번째 방법은 새 상태를 새 위치로 처리합니다(따라서 뒤로 버튼을 누르면 이전 위치로 이동합니다).후자는 그렇지 않다.

SWAddress는 Flash & Javascript 프로젝트에서 동작하며, 북마크 가능한 URL(상기 해시 방식 사용)을 작성할 수 있을 뿐만 아니라 Back-button을 지원할 수 있습니다.

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

window.location.hash method는 권장되는 작업 방법입니다.그 방법에 대해서는, 「Ajax Patterns - Unique URLs 」를 참조해 주세요.

YUI는 이 패턴을 모듈로서 실장하고 있습니다.이러한 모듈에는 해시를 사용하여 주소를 다시 쓰는 것과 함께 뒤로 버튼을 작동시키기 위한 IE 고유의 작업이 포함됩니다.YUI 브라우저 이력 매니저.

다른 프레임워크도 마찬가지로 구현되어 있습니다.중요한 점은 주소 재작성과 함께 이력을 작동시키려면 브라우저마다 다른 처리 방법이 필요하다는 것입니다(이 내용은 첫 번째 링크 문서에 자세히 나와 있습니다).

IE는 iframe 기반의 해킹이 필요하며, 파이어폭스는 같은 방법으로 이중 이력을 생성한다.

OP 등이 브라우저 이력을 변경하여 상태를 활성화하는 방법을 찾고 있는 경우 IESUS에서 권장하는 바와 같이 pushState 및 replaceState를 사용하는 것이 현재 '올바른' 방법입니다.위치보다 더 큰 장점입니다.해시는 해시뿐만 아니라 실제 URL을 생성하는 것으로 보입니다.해시를 사용한 브라우저 이력을 저장한 후 JavaScript를 비활성화하여 다시 방문하면 해시가 서버로 전송되지 않기 때문에 앱이 작동하지 않습니다.다만, pushState 가 사용되고 있는 경우는, 루트 전체가 서버에 송신되어 루트에 적절히 응답하도록 구축할 수 있습니다.서버와 클라이언트 양쪽에서 동일한 콧수염 템플릿을 사용한 예를 보았습니다.클라이언트가 JavaScript를 유효하게 했을 경우, 서버로의 왕복은 회피해, 신속한 응답을 얻을 수 있었습니다만, 앱은 JavaScript 없이도 정상적으로 동작합니다.따라서 JavaScript가 없을 경우 앱의 성능이 저하될 수 있습니다.

또, history.js와 같은 이름의 프레임워크가 있다고 생각합니다.HTML5를 지원하는 브라우저에서는 pushState를 사용하지만 브라우저가 지원하지 않으면 자동으로 해시 사용으로 돌아갑니다.

URL 바를 클릭하면 JavaScript가 페이지를 벗어났다고 표시됩니다.URL 바를 변경하고 그 안에 '#' 기호가 있는 'ENTER'를 누르면 마우스 커서가 있는 페이지를 수동으로 클릭하지 않고 다시 페이지로 이동하며 키보드 이벤트 명령(문서)을 누릅니다.JavaScript의 onkeypress)를 사용하여 JavaScript가 리다이렉트용으로 입력 및 활성화되었는지 확인할 수 있습니다.window.onfocus를 사용하여 사용자가 페이지에 있는지 확인하고 window.onblur를 사용하여 사용자가 아웃되었는지 확인할 수 있습니다.

네, 그럴 수도 있어요.

;)

언급URL : https://stackoverflow.com/questions/1457/modify-address-bar-url-in-ajax-app-to-match-current-state