현재 상태와 일치하도록 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의 해시 부분을 구문 분석하여 조각 식별자 (# 다음 부분)가 섬기는 사람.

Ben Alman의 hashchange 플러그인 은 jQuery를 사용하는 경우 후자를 산들 바람으로 만듭니다.

book.cakephp.org와 같은 사이트를보십시오. 이 사이트는 해시를 사용하지 않고 URL을 변경하고 AJAX를 사용합니다. 정확히 어떻게되는지 확실하지 않지만 알아 내려고 노력했습니다. 아는 사람이 있으면 알려주세요.

또한 특정 프로젝트 내에서 탐색을 볼 때 github.com.

작가가 Ajax를 사용할 때 방문자를 다시로드하거나 리디렉션하려고하지는 않습니다. 그러나 HTML5를 사용하지 않는 이유 pushState/replaceState ?

주소 표시 줄을 원하는만큼 수정할 수 있습니다. AJAX로 자연스럽게 보이는 URL을 얻으십시오.

최신 프로젝트에서 코드를 확인하십시오 : http://iesus.se/

이것은 Kevin이 말한 것과 유사합니다. 클라이언트 상태를 일부 자바 스크립트 객체로 가질 수 있으며 상태를 저장하려는 경우 객체를 직렬화합니다 (JSON 및 base64 인코딩 사용). 그런 다음 href 조각을이 문자열로 설정할 수 있습니다.

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

첫 번째 방법은 새로운 상태를 새로운 위치로 취급하므로 뒤로 버튼은 이전 위치로 이동합니다. 후자는 그렇지 않습니다.

SWFAddress는 Flash 및 Javascript 프로젝트에서 작동하며 위에서 언급 한 해시 방법을 사용하여 책갈피 가능한 URL을 만들 수 있으며 뒤로 버튼 지원을 제공 할 수 있습니다.

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

window.location.hash 메소드는 선호되는 작업 방법입니다. 이를 수행하는 방법에 대한 설명은 Ajax Patterns-Unique URLs 입니다.

YUI에는이 패턴을 모듈로 구현 한 것으로, 여기에는 해시를 사용하여 주소를 다시 쓰면서 뒤로 단추가 작동하도록하는 IE 관련 해결 방법이 포함되어 있습니다. YUI 브라우저 기록 관리자 .

다른 프레임 워크도 비슷한 구현을 가지고 있습니다. 중요한 점은 주소를 다시 쓰는 것과 함께 기록이 작동하도록하려면 브라우저마다 다른 방법으로 처리해야합니다. (이것은 첫 번째 링크 기사에 자세히 나와 있습니다.)

IE는 iframe 기반 해킹이 필요합니다. Firefox는 동일한 방법으로 이중 기록을 생성합니다.

OP 또는 다른 사람들이 여전히 상태를 활성화하기 위해 브라우저 기록을 수정하는 방법을 찾고 있다면 IESUS에서 제안한대로 pushState 및 replaceState를 사용하는 것이 현재 올바른 방법입니다. location.hash에 비해 주요 이점은 해시뿐만 아니라 실제 URL을 생성하는 것 같습니다. 해시를 사용한 브라우저 기록을 저장 한 다음 자바 스크립트를 비활성화 한 상태로 다시 방문하면 해시가 서버로 전송되지 않으므로 앱이 작동하지 않습니다. 그러나 pushState가 사용 된 경우 전체 라우트가 서버로 전송되며, 라우트에 적절하게 응답하도록 빌드 할 수 있습니다. 서버와 클라이언트 모두에서 동일한 콧수염 템플릿이 사용 된 예를 보았습니다. 클라이언트가 자바 스크립트를 사용하도록 설정 한 경우 서버로의 왕복을 피함으로써 빠른 응답을 얻을 수 있습니다. 그러나 응용 프로그램은 자바 스크립트없이 완벽하게 작동합니다. 따라서 자바 스크립트가없는 경우 앱이 정상적으로 저하 될 수 있습니다.

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

사용자가 페이지에 있는지 확인하고 URL 표시 줄을 클릭하면 javascript가 페이지 외부에 있다고 말합니다. URL 표시 줄을 변경하고 그 안에 '#'기호가있는 'ENTER'를 누르면 마우스 커서로 수동으로 페이지를 클릭하지 않고 페이지로 다시 이동하면 javascript의 keyboad 이벤트 명령 (document.onkeypress)이 리디렉션을 위해 자바 스크립트를 입력하고 활성화했는지 확인할 수 있습니다. window.onfocus를 사용하여 페이지에 사용자가 있는지 확인하고 window.onblur를 사용하지 않는지 확인할 수 있습니다.

네 가능합니다.

;)