h5 기반 history 개선 ajax 목록 요청 체험

정보 가 비교적 풍부 한 사 이 트 는 보통 페이지 별로 표시 되 는데'다음 페이지'를 누 를 때 많은 사이트 들 이 동적 요청 방식 을 사용 하여 페이지 가 새로 고침 되 지 않도록 한다.모두 ajax 이지 만 작은 디 테 일 로 우열 을 구분 할 수 있 습 니 다.작은 디 테 일 은 브 라 우 저'후퇴'와'전진'키 를 지원 할 수 있 는 지 여부 입 니 다.본 고 는 브 라 우 저가 후퇴 하고 전진 할 수 있 도록 하 는 두 가지 방법 을 토론 하고 자 한다.또는 aax 가 새로운 페이지 로 다시 방향 을 바 꾸 는 것 처럼 이전 페이지 로 돌아 가 거나 다음 페이지 로 전진 할 수 있 도록 한다.
      데이터 가 페이지 를 나 누 어 표시 하 는 가장 간단 한 방법 은 사이트 뒤에 여러 페이지 의 당 수 를 추가 하고'다음 페이지'를 누 를 때 페이지 를 페이지+1 의 새로운 주소 로 바 꾸 는 것 이다.예 를 들 어 시 나 닷 컴 의 뉴스 네트워크 는 이렇게 하 는 것 이다.인터넷 주 소 를 바 꾸 어 index1、index_2、index_3……。그러나 이 목록 이 페이지 의 주체 부분 이 아니 거나 페이지 의 다른 부분 에 많은 그림 등 풍부 한 요소 가 있다 면 예 를 들 어 네 비게 이 션 은 매우 큰 slider 이다.이런 방식 을 사용 하면 전체 페이지 가 심하게 반 짝 이 고 많은 자원 을 다시 불 러 와 야 한다.그래서 ajax 요청 을 사용 하여 DOM 을 동적 으로 변경 합 니 다.
      그러나 일반적인 동적 요청 은 사이트 주 소 를 변화 시 키 지 않 습 니 다.사용자 가 다음 페이지 를 누 르 거나 몇 페이지 를 누 르 면 이전 페이지 로 돌아 가 려 고 할 때 브 라 우 저의 반환 키 를 누 를 수 있 습 니 다.그러면 원래 보 았 던 페이지 가 아니 라 이전 사이트 로 돌아 갈 수 있 습 니 다.예 를 들 어 중앙 방송국 의 뉴스 망 은 바로 이렇다.다음은 ajax 요청 부터 완전한 사례 로 분석 하 겠 습 니 다.
      데모 하나 했 어 요.

   우선,요청 을 하나 쓰 십시오.

 //     
  var pageIndex = 0;
  //    
  function makeRequest(pageIndex){
    var request = new XMLHttpRequest();
    request.onreadystatechange = stateChange;
    //       ，        ，           
    request.open("GET", "/getBook?page=" + pageIndex + "&limit=4", true);
    request.send(null);
    function stateChange(){
      //    4，  loaded，    
      if(request.readyState !== 4 ){
        return;
      }
      //    
      if(request.status >= 200 && request.status < 300 || request.status === 304){
        var books = JSON.parse(request.responseText);
        renderPage(books); 
      }
    }
  }

     데 이 터 를 받 은 후 렌 더 링:

  function renderPage(books){
    var bookHtml = 
      "<table>" +
      "  <tr>" +
      "    <th>  </th>" +
      "    <th>  </th>" +
      "    <th>  </th>" +
      "  </tr>";
    for(var i in books){
      bookHtml += 
        "<tr>" +
        "  <td>" + books[i].book_name + "</td>" +
        "  <td>" + books[i].author + "</td>" +
        "  <td>" + books[i].edition + "</td>" +
        "</tr>";
    }
    bookHtml += "</table>";
    bookHtml += 
      "<button>   </button>" + 
      "<button onclick='nextPage();'>   </button>";
    var section = document.createElement("section");
    section.innerHtml = bookHtml;
    document.getElementById("book").appendChild(section); 
  }

이러한 기본 적 인 ajax 요청 을 연결 한 다음"다음 페이지"단추 에 응답 합 니 다.

  function nextPage(){
    //    index 1
    pageIndex++;
    //          
    makeRequest(pageIndex);
  }

여기 서 아무런 처리 도 하지 않 으 면 브 라 우 저 복귀,전진 버튼 의 역할 을 발휘 할 수 없습니다.
      사용자 가 후퇴,전진 버튼 을 눌 렀 는 지 확인 할 수 있다 면 글 을 쓸 수 있 습 니 다.h5 는 이러한 이벤트 window.onpopstate 를 추가 한 것 입 니 다.사용자 가 그 두 단 추 를 누 르 면 이 사건 을 촉발 합 니 다.그러나 이 사건 만 으로 는 부족 하고 인 자 를 전달 할 수 있어 야 합 니 다.즉,이전 페이지 로 돌아 갈 때 그 페이지 의 pageIndex 를 알 아야 합 니 다.history 의 pushstate 방법 을 통 해 이 목적 을 달성 할 수 있 습 니 다.pushstate(pageIndex)는 현재 페이지 의 pageIndex 를 저장 하고 이 페이지 로 돌아 갈 때 이 pageIndex 를 얻 을 수 있 습 니 다.pushstate 의 매개 변 수 는 다음 과 같 습 니 다.

window.history.pushState(state, title, url);

      그 중에서 state 는 object{}로 현재 페이지 의 데 이 터 를 저장 합 니 다.title 제목 은 큰 역할 을 하지 않 습 니 다.url 은 현재 페이지 의 url 입 니 다.이 url 이 바 뀌 면 브 라 우 저 주소 표시 줄 의 주소 도 달라 집 니 다.
      따라서 다음 페이지 의 데 이 터 를 요청 하 는 nextPage 함수 에 한 단계 더 많은 작업 을 추가 합 니 다.

  function nextPage(){
    pageIndex++;
    makeRequest(pageIndex);
    //         
    window.history.pushState({page: pageIndex}, null, window.location.href); 
  }

그리고 popstate 사건 을 감청 합 니 다.

  //              
  window.addEventListener("popstate", function(event){
    var page = 0;
    //       pushState，                 ，       
    if(event.state !== null){
      page = event.state.page;
    }
    makeRequest(page); 
    pageIndex = page;
  });

     state 데 이 터 는 이벤트 로 들 어 옵 니 다.그러면 pageIndex 를 얻 을 수 있 습 니 다.

그러나 이렇게 실현 하 는 데 문제 가 있 습 니 다.두 번 째 페이지 에서 페이지 를 새로 고 칠 때 오류 가 발생 할 수 있 습 니 다.다음 과 같 습 니 다.먼저 다음 페이지 를 두 번 째 페이지 로 누 른 다음 에 페이지 를 새로 고 칩 니 다.첫 번 째 페이지 가 나 오고 다음 페이지 를 누 르 면 두 번 째 페이지 가 나 옵 니 다.다시 누 르 면 문제 가 발생 합 니 다.

 오른쪽 도구 모음 에서 처음 되 돌 아 왔 을 때 가 져 온 pageIndex 는 여전히 1 임 을 알 수 있 습 니 다.이러한 상황 에 대해 history 모델 을 분석 해 야 한다.다음 과 같다.

 history 에 대한 작업 으로 이해 할 수 있 습 니 다.브 라 우 저 는 방문 기록 을 저장 하 는 대기 열 이 있 습 니 다.방문 하 는 모든 사이트 와 state 데 이 터 를 포함 합 니 다.처음에 대기 열의 첫 번 째 지침 은 page=0 의 위 치 를 가리 키 고 다음 페이지 를 누 를 때 push State 를 실 행 했 습 니 다.이 대기 열 에 요 소 를 삽입 하 는 동시에 push State 작업 을 통 해 이 요소 의 url 과 state 데 이 터 를 기록 하 였 습 니 다.여기 서 알 수 있 듯 이 push State 의 작업 에서 가장 중요 한 역할 은 역시 history 대기 열 에 요 소 를 삽입 하 는 것 입 니 다.그러면 브 라 우 저의 후퇴 단 추 는 회색 상태 가 아니 라 위 에서 말 한 데 이 터 를 저장 하 는 것 입 니 다.점 이 후퇴 할 때 팀 의 첫 번 째 지침 은 페이지=0 의 위 치 를 가리 키 고 점 이 전진 할 때 페이지=1 의 위 치 를 가리킨다.
페이지=1 의 위치 에서 페이지 를 새로 고침 하면 모델 은 다음 과 같 습 니 다.

두 번 째 단계 가 새로 고침 되 었 을 때 페이지 의 pageIndex 는 기본 값 0 으로 복원 되 었 기 때문에 page=0 은 첫 페이지 의 데 이 터 를 표시 하지만 history 에 사용 되 는 대기 열 은 변 하지 않 았 습 니 다.그리고 다음 페이지 를 눌 렀 을 때 이 대기 열 에 push 요 소 를 주 었 습 니 다.이 대기 열 에는 두 개의 pageIndex 가 1 인 요소 가 있 기 때문에 두 번 을 되 돌려 야 page=0 의 위치 로 돌아 갈 수 있 습 니 다.즉,위 에서 말 한 어 지 러 운 상황 입 니 다.
위의 분석 에 따 르 면 이러한 실현 은 문제 가 있 습 니 다.그러나 사용자 가 page=0 의 위치 에서 페이지 를 새로 고침 하지 않 으 면 여러 번 의 반환 단 추 를 눌 러 야 원래 의 페이지 로 돌아 갈 수 있 습 니 다.
따라서 새로 고침 할 때 현재 페이지 의 state 데 이 터 를 업데이트 해 야 합 니 다.replace State 로 줄 의 첫 번 째 포인터 데 이 터 를 교체 해 야 합 니 다.즉,현재 페이지 의 데이터 입 니 다.방법 은 페이지 초기 화 시 replace 입 니 다:
window.history.replace State({page:pageIndex/*여 기 는 0*/},null,window.location.href);
이렇게 모형 은:

그러나 사용자 가 새로 고침 할 때 가장 원 하 는 것 은 첫 페이지 로 돌아 가 는 것 이 아니 라 현재 페이지 를 표시 하 는 것 입 니 다.하나의 해결 방법 은 현재 페이지 의 window.history.state 데 이 터 를 사용 하 는 것 입 니 다.이 속성 브 라 우 저 는 비교적 늦게 지원 합 니 다.페이지 초기 화 시 pageIndex 를 설정 할 때 history.state 에서 가 져 옵 니 다:
 

var pageIndex = window.history.state === null ? 0 : window.history.state.page; 

      safari 에 있 는 history.state 는 최근 push State 에서 들 어 온 데 이 터 를 실행 하기 때문에 이 방법 은 chrome/fireforx 에서 통 하지만 safari 는 통 하지 않 습 니 다.
      두 번 째 방법 은 h5 의 localStorage 를 통 해 현재 페이지 수 를 저장 하 는 것 입 니 다.

 //     ，        localStorage 
  var pageIndex = window.localStorage.pageIndex || 0;

  function nextPage(){
    //    index 1，     localStorage
    window.localStorage.pageIndex = ++pageIndex;
    //          
    makeRequest(pageIndex);
    window.history.pushState({page: pageIndex}, null, window.location.href); 
  }

  window.addEventListener("popstate", function(event){
    var page = 0;
    if(event.state !== null){
      page = event.state.page;
    }
    makeRequest(page); 
    //        ，   page  localStorage
    window.localStorage.pageIndex = page;
  });

      페이지 의 모든 pageIndex 를 바 꾸 는 곳 을 localStorage 에 두 십시오.이렇게 페이지 를 새로 고 칠 때 현재 페이지 의 pageIndex 를 찾 을 수 있 습 니 다.
      위의 방법 은 모두 pageIndex 를 state 매개 변수 에 넣 었 고 세 번 째 매개 변수 url 에 넣 는 방법 도 있 습 니 다.즉,현재 페이지 의 주 소 를 바 꾸 는 방법 입 니 다.pageIndex 사이트 에서 가 져 오기:

 //     
   var pageIndex = window.location.search.replace("?page=", "") || ;
   function nextPage(){
     //    index 
     ++pageIndex;
     //          
     makeRequest(pageIndex);
     window.history.pushState(null, null, "?page=" + pageIndex);
   }

      8 번 째 줄 의 push State 를 실행 하면 현재 사이트 주소 가 달라 집 니 다.
      한 가지 주의해 야 할 것 은 window.history.length 는 현재 대기 열의 요소 개 수 를 되 돌려 주지 만 history 자체 가 그 대기 열 이라는 것 은 아 닙 니 다.서로 다른 브 라 우 저 를 통 해 history[i]에 대한 출력:

   history 는 하나의 배열 로 사용자 에 게 history.length 를 가 져 다 주 는 역할 을 하지만 채 워 진 내용 은 확실 하지 않 습 니 다. 
      history 를 사용 하 는 것 외 에 hash 를 이용 하 는 방법 도 있 습 니 다.왕 이 뉴스 는 바로 이런 방법 을 사 용 했 습 니 다.

   //     
   var pageIndex = window.location.hash.replace("#page=", "") || ;
   function nextPage(){ 
     makeRequest(pageIndex);
     window.location.hash = "#page=" + pageIndex;
   }
   window.addEventListener("hashchange", function(){
     var page = window.location.hash.replace("#page=", "") || ;
     makeRequest(page);
   });

      지원 성에 대해 서 는 caniuse 사이트:history IE 10 및 이상 지원,hashchange 의 지원 이 좋 고 IE8 및 이상 이 지원 합 니 다.
      hashchange 의 지원 성 은 좋 지만 history 의 장점 은 데 이 터 를 전달 할 수 있다 는 것 입 니 다.일부 복잡 한 응용 에 큰 역할 을 할 수 있 고 history 는 back/go 작업 을 지원 합 니 다.
이상 본 고 는 h5 의 history 개선 ajax 목록 에 대해 체험 을 요청 합 니 다.여러분 이 좋아 하 시 기 를 바 랍 니 다.