집 > 기사 > 웹 프론트엔드 > pushState+Ajax는 새로 고침 없이 페이지 전환을 실현합니다.

pushState+Ajax는 새로 고침 없이 페이지 전환을 실현합니다.

php中世界最好的语言원래의: 2018-04-03 10:08:151942검색

이번에는 페이지 새로고침 없이 페이지 전환이 가능한 pushState+Ajax를 소개하겠습니다. pushState+Ajax에서 페이지 새로고침 없이 구현하는 주의사항은 무엇인지 살펴보겠습니다.

머리말

이러한 요구는 매우 일반적입니다. 페이지 번호를 클릭하여 페이지를 부분적으로 업데이트하고(전체를 새로 고치는 것이 아님) 기록 관리를 생성합니다. 부분 새로 고침은 구현하기 쉽습니다. Ajax는 우리의 요구 사항을 충족할 수 있지만 다행히도 HTML5는 이 문제를 해결하는 데 유용한 몇 가지 API를 제공합니다. 아래를 참조하세요.

Text

1.API

1.pushState

pushState()에는 상태 개체, 제목(현재 무시됨) 및 선택적 URL 주소의 세 가지 매개 변수가 있습니다.
state: 점프할 URL에 해당하는 상태 정보입니다.
title: 비어 있음 string(나중에 유용할 수 있음)
url: 이동할 URL 주소이며 도메인을 넘을 수 없습니다.

기능: 현재 URL과 History.state를 기록에 추가하고 현재 URL을 새 상태와 URL로 바꿉니다. 페이지가 새로 고쳐지지는 않습니다.

2.replaceState

history.replaceState() 작업은replaceState() 메서드가 새 항목을 생성하는 대신 현재 기록 항목을 수정한다는 점을 제외하면 History.pushState()와 유사합니다.

3. window.onpopstate

history.go 및 History.back(사용자가 브라우저 기록 앞으로 및 뒤로 버튼을 누르는 경우 포함)이 트리거되고 페이지가 새로 고쳐지지 않으면(기록이 pushState를 사용하여 수정되기 때문에) popstate event가 발생하면 브라우저는 기록에서 URL과 해당 상태 개체를 꺼내고 현재 URL과 기록.상태를 바꿉니다. History.state는 event.state를 통해서도 얻을 수 있습니다.

장면 구현은 매우 간단합니다. 버튼 아래의 p를 클릭하면 다양한 사진과 제목이 표시되고, ajax를 사용하여 새로고침하고, 기록 관리를 생성할 수 있습니다.

<p class="page">
  <a href="javascript:;">[ <span>1</span> ]</a>
  <a href="javascript:;">[ <span>2</span> ]</a>
  <a href="javascript:;">[ <span>3</span> ]</a>
  <a href="javascript:;">[ <span>4</span> ]</a>
</p>
<p>
  <img />
  <p class="title"></p>
</p>

Core code

  function setUrl(page){
    var url = location.pathname + '?page=' + page;
    history.pushState({
      url : url
    },'',url);
  }
//每次点击按钮的时候就往历史记录里面增加一个条目

처음 로딩시 히스토리 기록을 로드하고 교체해야 한다는 점 주의하세요

  (function(){
    //默认显示第一页
    var url = location.pathname + '?page=1';
    //修改当前的历史记录
    history.replaceState({
      url : url
    },'',url); 
  })()

창의 팝스테이지 이벤트를 듣고, 이벤트가 발생하면 현재 히스토리에 해당하는 페이지 번호를 얻어옵니다.

  window.addEventListener('popstate',function(){
    var page = getPage();
    xhr(page);
  })

믿거나 말거나 이 기사의 사례를 읽은 후, 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!