pjax 를 사용 하여 ajax 의 전진 후퇴 역 사 를 처리 합 니 다.

pjax 가 뭐 예요?
현재 많은 사이트 ( facebook,  트 위 터) 이러한 탐색 방식 을 지원 합 니 다. 한 사이트 의 링크 를 클릭 할 때 페이지 를 돌 리 는 것 이 아니 라 사이트 내 페이지 를 새로 고침 하 는 것 입 니 다.이러한 사용자 체험 은 전체 페이지 가 반 짝 이 는 것 보다 훨씬 좋다.그 중에서 중요 한 구성 부분 이 있 습 니 다. 이 사이트 들 의 ajax 리 셋 은 브 라 우 저 역 사 를 지원 합 니 다. 페이지 를 리 셋 하 는 동시에 브 라 우 저 주소 표시 줄 위의 주소 도 변경 되 고 브 라 우 저의 리 턴 기능 으로 이전 페이지 로 되 돌아 갈 수 있 습 니 다.그렇다면 우리 가 이런 기능 을 실현 하려 면 어떻게 해 야 할 까?나 는 pjax 가 이러한 기능 을 지원 하 는 스 크 립 트 를 제공 하 는 것 을 발견 했다.pjax 프로젝트 주소  https://github.com/defunkt/jquery-pjax 。 실제 효과:  http://pjax.heroku.com/ pjax 를 선택 하지 않 았 을 때 링크 를 클릭 하면 점프 합 니 다.선택 하면 링크 가 ajax 새로 고침 으로 변 합 니 다.
pjax 를 왜 써 요?
pjax 는 여러 가지 장점 이 있 습 니 다.

사용자 체험 향상.페이지 가 돌 때 사람들의 눈 은 전체 페이지 를 재인 식 해 야 하고 일부 페이지 를 새로 고 칠 때 그 중의 한 구역 만 다시 식별 해 야 한다.내 홈 페이지 에서 GuruDigger 위 에서 pjax 기술 을 채택 한 후, 나 도 모 르 게 페이지 만 뛰 는 다른 사 이 트 를 방문 하 는 것 이 많이 힘 들 었 다.또한 일부 페이지 를 새로 고 칠 때 loading 알림 을 제공 하고 새로 고 칠 때 오래된 페이지 가 브 라 우 저 에 표시 되 기 때문에 사용 자 는 더 긴 페이지 로 딩 시간 을 용인 할 수 있 습 니 다.

대역 폭 소모 와 서버 소 모 를 크게 줄인다.일부 페이지 만 새로 고침 하기 때문에 대부분의 요청 (css / js) 은 다시 가 져 오지 않 습 니 다. 사이트 에 사용자 로그 인 정보 가 있 는 외곽 부분 은 다시 생 성 할 필요 가 없습니다.비록 저 는 이 부분의 소 모 를 구체 적 으로 통계 하지 않 았 지만 적어도 40% 이상 의 요청 이 있 고 30% 이상 의 서버 소 모 는 절약 되 었 을 것 이 라 고 생각 합 니 다.

나 쁜 점도 있다 고 생각한다.

IE6 등 역사 브 라 우 저의 지원 은 실제 테스트 는 하지 않 았 지만 pjax 가 새로운 기준 을 이 용 했 기 때문에 오래된 브 라 우 저 호환성 에 문제 가 있 을 수 있 습 니 다.그러나 pjax 자체 가 fallback 을 지원 합 니 다. 브 라 우 저가 이 기능 을 지원 하지 않 는 다 는 것 을 발견 하면 원본 페이지 로 돌아 가 위로 이동 합 니 다.

복잡 한 서버 측 지원 서버 측은 요청 에 따라 전체 페이지 렌 더 링 을 하 는 지 일부 페이지 렌 더 링 을 하 는 지 판단 해 야 하 며 상대 적 으로 시스템 복잡 도가 커 졌 다.그러나 잘 설 계 된 서버 코드 에 대해 서 는 이런 기능 을 지원 하 는 데 큰 문제 가 없 을 것 이다.

종합 하면 사용자 체험 과 자원 이 용 률 의 향상 으로 인해 나 쁜 점 은 완전히 보완 할 수 있다.  
여러분 이 사용 하 시 는 것 을 강력 추천 합 니 다.
pjax 를 어떻게 사용 합 니까?직접 보다   공식 문서 됐 습 니 다.나 는 기술 을 하 는 사람 은 기술 자 료 를 보 는 습관 을 길러 야 한다 고 생각한다.라 일 스 가 pjax 를 겨냥 한   gem 플러그 인 직접 사용 가능 합 니 다.있다   django 지원 。
pjax 의 원리
문 제 를 처리 할 수 있 도록 pjax 의 운영 방식 을 이해 할 수 있어 야 합 니 다.pjax 코드 는 파일 이 하나 밖 에 없습니다: https://github.com/defunkt/jquery-pjax/blob/master/jquery.pjax.js 만약 능력 이 있다 면, 스스로 가서 한 번 볼 수 있다.원 리 를 설명 하 겠 습 니 다.우선, 우 리 는 html 에서 pjax 의 링크 내용 이 무엇 인지 지정 하고 클릭 한 후에 업데이트 해 야 할 부분 (data - pjax 속성 에 넣 기) 을 지정 합 니 다. 

$('a[data-pjax]').pjax()

pjax 스 크 립 트 를 불 러 오 면 이 링크 의 이 벤트 를 차단 하고 ajax 요청 으로 포장 하여 서버 에 보 냅 니 다. 

$.fn.pjax = function( container, options ) {
  return this.live('click.pjax', function(event){
    handleClick(event, container, options)
  })
}

functionhandleClick(event, container, options) {
  $.pjax($.extend({}, defaults, options))
  ...
  event.preventDefault()
}
var pjax = $.pjax = function( options ) {
  ...
  pjax.xhr = $.ajax(options)
}

이 요청 은 X - PJAX 의 HEADER 표 지 를 가지 고 있 으 며, 서버 는 이러한 요청 을 받 았 을 때 일부 페이지 를 렌 더 링 해서 되 돌려 주면 된다 는 것 을 알 수 있다. 

xhr.setRequestHeader('X-PJAX', 'true')
xhr.setRequestHeader('X-PJAX-Container', context.selector)

pjax 는 되 돌아 오 라 는 요청 을 받 은 후 데이터 - pjax 가 지정 한 영역 을 업데이트 하 는 동시에 브 라 우 저의 주 소 를 업데이트 합 니 다.

options.success = function(data, status, xhr){
  var container = extractContainer(data, xhr, options)
  ...
  if (container.title) document.title = container.title
  context.html(container.contents)
}

브 라 우 저의 후퇴 를 지원 하기 위해 history api 를 이용 하여 해당 하 는 정 보 를 기록 합 니 다. 

pjax.state = {
  id: options.id || uniqueId(),
  url: container.url,
  container: context.selector,
  fragment: options.fragment,
  timeout: options.timeout
}

if (options.push || options.replace) {
  window.history.replaceState(pjax.state, container.title, container.url)
}

브 라 우 저가 후퇴 할 때 이 벤트 를 차단 하고 기 록 된 역사 정보 에 따라 새로운 aax 요청 을 생 성 합 니 다. 

$(window).bind('popstate', function(event){
  var state = event.state
  if (state && state.container) {
    var container = $(state.container)
    if (container.length) {
      ...
      var options = {
        id: state.id,
        url: state.url,
        container: container,
        push: false,
        fragment: state.fragment,
        timeout: state.timeout,
        scrollTo: false
      }

      if (contents) {
        // pjax event is deprecated
        $(document).trigger('pjax', [null, options])
        container.trigger('pjax:start', [null, options])
        // end.pjax event is deprecated
        container.trigger('start.pjax', [null, options])

        container.html(contents)
        pjax.state = state

        container.trigger('pjax:end', [null, options])
        // end.pjax event is deprecated
        container.trigger('end.pjax', [null, options])
      } else {
        $.pjax(options)
      }
      ...
    }
  }
}

fallback 을 지원 하기 위해 하 나 는 불 러 올 때 브 라 우 저가 history push state API 를 지원 하 는 지 판단 하 는 것 입 니 다.

// Is pjax supported by this browser?
$.support.pjax =
  window.history && window.history.pushState && window.history.replaceState
  // pushState isn't reliable on iOS until 5.
  && !navigator.userAgent.match(/((iPod|iPhone|iPad).+\bOS\s+[1-4]|WebApps\/.+CFNetwork)/)

  
다른 하 나 는 요청 이 한동안 답장 이 없 는 것 을 발 견 했 을 때 (파라미터 timeout 을 설정 할 수 있 음) 페이지 를 직접 돌 릴 수 있 습 니 다.
 

options.beforeSend = function(xhr, settings){
  if (settings.timeout > 0) {
    timeoutTimer = setTimeout(function(){
      if (fire('pjax:timeout', [xhr, options]))
        xhr.abort('timeout')
    }, settings.timeout)

    // Clear timeout setting so jquerys internal timeout isn't invoked
    settings.timeout = 0

결론 은 여기까지 봤 는데 왜 pjax 를 실제로 사용 하지 않 았 어 요?그렇게 많은 장점 이 있 는데, 나 는 거의 모든 사이트 가 pjax 를 사용 해 야 한다 고 생각한다.빨리 써!
원본 주소:http://blog.linjunhalida.com/blog/pjax/