Ajax를 사용하여 새로 고치지 않고 페이지 콘텐츠 및 주소 표시줄 URL 변경

이 글에서는 ajax와 window.history.pushState를 사용하여 새로고침 없이 페이지 내용과 주소 표시줄 URL을 변경하는 방법을 주로 자세히 소개합니다. 도움이 필요한 친구는 참고하면 됩니다

지금 인기 있는 Google Plus를 방문할 때 주의깊은 사용자는 페이지 간 클릭이 ajax를 통해 비동기적으로 요청되고 동시에 페이지의 URL이 변경되는 것을 확인하세요. 그리고 브라우저의 앞으로 및 뒤로 매우 잘 지원할 수 있습니다. 사람들은 궁금해하지 않을 수 없습니다. 그토록 강력한 기능을 가진 것이 무엇일까요?

HTML5는 새로운 API, 즉history.pushState 및history.replaceState를 참조합니다. 이 인터페이스를 통해 페이지 URL을 새로 고치지 않고도 변경할 수 있습니다.

기존 AJAX와의 차이점

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

ajax는 새로 고침 없이 페이지 내용을 변경할 수 있지만 페이지 URL을 변경할 수는 없습니다

둘째, 접근성을 높이기 위해 내용이 변경됩니다. 마지막으로 변경합니다. URL의 해시입니다. 하지만 해시 방식은 브라우저의 정방향 및 역방향 문제를 잘 처리하지 못합니다

일부 브라우저에서는 onhashchange 인터페이스를 도입했으며 이를 지원하지 않는 브라우저에서는 해시가 정기적으로 변경되었는지 여부만 판단할 수 있습니다

또한 ajax를 사용하는 것은 스파이더가 크롤링하는 영역은 비어 있는 경우가 많습니다.

기존 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. 도메인 간은 불가능하므로 이는 불가피합니다. 인터넷에서 본 격언을 인용하자면: "자바스크립트가 도메인을 넘을 수 있다면 정말 놀라운 일이 될 것입니다!"

2. 상태 객체는 많은 사용자 정의 속성을 저장할 수 있지만 값은 객체가 될 수 없습니다.

백엔드에서 일부 처리에 해당합니다

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

1. setRequestHeader('PJAX', 'true')와 같은 특수 헤더를 pushState와 결합하여 ajax로 보낼 수 있습니다.

2. 백엔드가 PJAX=true인 헤더를 얻으면 페이지의 공통 부분이 출력되지 않습니다. 예를 들어, PHP는 다음과 같은 판단을 내릴 수 있습니다

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

인터페이스에는 pushState, replacementState, onpopstate만 있지만 사용 시 여전히 많은 처리가 필요합니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

Google Chrome 브라우저에서 ajax 오류를 해결하는 방법

ajax를 기반으로 클릭하여 새로 고침 없이 추가 항목을 로드하고 이 페이지로 로드

Ajax 교차 도메인 문제에 대한 두 가지 솔루션

위 내용은 Ajax를 사용하여 새로 고치지 않고 페이지 콘텐츠 및 주소 표시줄 URL 변경의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!