pjax: ajax와 pushState를 결합한 js 라이브러리

나중에 사용할 수 있도록 ajax와 pushState를 캡슐화하는 것이 매우 유용합니다. 이 글은 pjax(ajax+pushState)에 대한 소개입니다.

소개

pjax는 ajax + pushState를 캡슐화한 것으로 pushState 기술을 매우 편리하게 사용할 수 있습니다.

캐싱과 로컬 저장을 모두 지원합니다. 다음 방문 시 다시 방문할 필요 없이 로컬 데이터를 직접 읽을 수 있습니다.

그리고 표시 방식은 애니메이션 기술을 지원하며, 시스템 고유의 애니메이션 방식을 사용하거나 애니메이션 표시 방식을 맞춤 설정할 수 있습니다.

현재는 jquery 기반 버전만 제공되며, 향후 qwrap, tangram 등 기타 버전도 추가될 예정입니다.

을 사용하여 jquery.pjax.js를 페이지에 배포하는 방법 바인딩을 위해 pjax 링크를 사용해야 합니다(외부 도메인의 URL은 바인딩할 수 없습니다).

$('a').pjax({
    container: '#container', //内容替换的容器
    fx: 'fade', //展现的动画，支持默认和fade, 可以自定义动画方式。
    cache: true, //是否使用缓存
    storage: true, //是否使用本地存储
    titleSuffix: '' //标题后缀
})

이벤트

일반적으로 ajax를 사용하여 데이터를 얻을 때 우리 모두는 Pjax 자체가 이 기능을 제공하지 않지만 2개의 관련 이벤트를 제공하기를 바랍니다. . 이러한 기능이 필요한 경우 이벤트에서 구현할 수 있습니다.

start.pjax는 pjax ajax가 요청을 보내기 전에 호출됩니다.

end.pjax는 phax ajax의 끝에서 호출됩니다

start.pjax 이벤트. 로딩은 end.pjax 이벤트에 숨겨져 있습니다. 예:

$('#container').bind('start.pjax', function(){
    $('#loading').show();
})
$('#container').bind('end.pjax', function(){
    $('#loading').hide();
})

브라우저 지원

history.pushState 인터페이스를 제공하는 브라우저만이 이 기능을 지원합니다. $.support.pjax는 브라우저가 이를 지원하는지 확인하는 데 사용됩니다.

브라우저가 이 기능을 지원하지 않고 pjax 메서드를 호출하는 경우 실제로는 아무 작업도 수행되지 않으며 기본 링크 응답 메커니즘이 계속 사용됩니다.

백엔드에서 수행해야 할 작업

Ajax와 마찬가지로 백엔드는 비동기 요청 중에 공개 콘텐츠를 반환할 수 없습니다.

따라서 pjax 요청이 이루어졌는지 확인하는 인터페이스가 필요합니다. 예: PHP는 다음 구현에서 배울 수 있습니다

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

소스 코드 다운로드

pjax는 오픈 소스였으며 코드는 https://github.com/welefen에 있습니다. /pjax. 누구나 방문하여 다운로드할 수 있습니다.

기타

실제로 이 클래스의 캡슐화는 https://github.com/defunkt/jquery-pjax에서 빌려왔습니다

캐싱, 로컬 저장소 및 애니메이션이 추가되었습니다. 그것과 다른 기능 및 일부 매개 변수가 최적화되었습니다.