새로 고치지 않고 ajax 및 html5 변경 페이지 URL

성능

크롬이나 파이어폭스 및 기타 브라우저를 사용하여 이 블로그, github.com, plus.google.com 및 기타 웹사이트를 방문하시면 주의하시면 페이지 간 클릭이 발생하는 것을 확인하실 수 있습니다. ajax 요청을 통해 비동기화되고 동시에 페이지의 URL이 변경되었습니다. 그리고 브라우저의 앞뒤를 매우 잘 지원할 수 있습니다.

무엇이 이렇게 강력한 기능을 가지고 있는 걸까요?

HTML5는 새로 고치지 않고 페이지 URL을 변경하는 데 사용되는 새로운 API인 History.pushState 및 History.replaceState를 참조합니다.

기존 AJAX와의 차이점

기존 Ajax에는 다음과 같은 문제점이 있습니다.

1. 페이지 내용은 새로 고침 없이 변경할 수 있으나, 페이지 URL은 변경할 수 없습니다

2. 접근성을 높이기 위해 콘텐츠 변경 후 URL의 해시가 변경되는 경우가 많습니다

3. 해시 방식은 브라우저의 정방향 및 역방향 문제를 잘 처리하지 못합니다

4. 게다가 브라우저는 onhashchange 인터페이스를 도입했습니다. 이를 지원하지 않는 브라우저는 해시가 변경되었는지 여부만 주기적으로 확인할 수 있습니다

5. 그러나 이 방법은 검색 엔진에 매우 비우호적입니다

6. Twitter와 Google은 #!xxx(즉, 해시의 첫 번째 문자는!)를 사용하기로 합의했으며 검색 엔진에서는 이를 지원합니다.

기존 Ajax로 인해 발생하는 문제를 해결하기 위해 HTML5에 새로운 API가 도입되었습니다. 즉,history.pushState,history.replaceState

pushState를 통해 브라우저 기록을 조작할 수 있으며 replacementState 인터페이스 및 현재 페이지의 URL을 변경합니다.

pushState는 지정된 URL을 브라우저 기록에 추가하는 것이고, replacementState는 현재 URL을 지정된 URL로 바꾸는 것입니다.

사용 방법

var state = {
    title: title,
    url: options.url,
    otherkey: othervalue
};
window.history.pushState(state, document.title, url);

제목과 URL 외에도 상태 객체에 다른 데이터를 추가할 수도 있습니다. 예를 들어 Ajax 전송을 위한 일부 구성을 저장하려고 합니다. .

replaceState와 pushState는 유사하므로 여기서는 소개하지 않겠습니다.

브라우저의 앞으로 및 뒤로 작업에 응답하는 방법

onpopstate 이벤트는 window 개체에서 제공됩니다. 위에서 전달된 상태 개체는 이벤트의 하위 개체가 되므로 저장된 제목과 URL을 얻을 수 있습니다.

window.addEventListener('popstate', function(e){
    if (history.state){
        var state = e.state;
        //do something(state.url, state.title);
    }
}, false);

이러한 방식으로 Ajax와 pushState를 결합하여 새로 고침 없이 완벽하게 탐색할 수 있습니다.

일부 제한 사항

1. 전달된 URL은 동일한 도메인에 있어야 하며 도메인을 교차할 수 없습니다

2. 상태 개체는 많은 사용자 정의 속성을 저장할 수 있지만 개체입니다. DOM 객체와 같이 직렬화할 수 없는 객체는 저장할 수 없습니다.

백엔드에서 일부 처리에 해당

이 모드에서는 ajax를 사용하여 새로 고침 없이 탐색하는 것 외에도 변경된 URL을 직접 요청한 후 정상적으로 탐색할 수 있는지 확인하는 것도 필요합니다. 따라서 백엔드는 이러한 처리를 받아야 합니다.

1. pushState를 사용하여 ajax에 setRequestHeader('PJAX', 'true')와 같은 특수 헤더를 보냅니다.

2. 백엔드가 PJAX=true인 헤더를 얻으면 페이지의 공통 부분이 출력되지 않습니다. 예를 들어, PHP는 다음

function is_pjax(){
    return array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX'] === 'true';
}

을 통해 판단할 수 있습니다. 인터페이스에는 pushState, replacementState, onpopstate만 있지만 사용 시 많은 처리가 필요합니다.

이를 위해 jquery 기반 플러그인이 작성되었으며, ajax+history.pushState가 pjax에 캡슐화되었습니다. 프로젝트 주소: https://github.com/welefen/pjax. qwrap, Kissy 3개 버전

또한 HTML4 및 HTML5의 효과를 고려하고 싶다면 History.js를 참조할 수 있으며 프로젝트 주소는 https://github.com/browserstate/history입니다. .js .

참고자료:

1. HTML5 History API 소개

2. 브라우저 기록 조작

3. 🎜>