우리는 Ajax가 브라우저에 비동기로로드 할 수있는 능력을 가져와 데이터 검증, 로컬 새로 고침 등의 사용자 경험을 향상시킬 수 있지만 다음과 같은 문제가 있습니다.
1. 새로 고침없이 페이지 컨텐츠를 변경할 수 있지만 페이지 URL을 변경할 수는 없습니다.
2. 해시 메소드는 브라우저의 전진, 뒤로 및 기타 문제를 처리 할 수 없습니다.
전통적인 AJAX로 인한 문제를 해결하기 위해 HTML5는 History API를 강화하고 Pushstate, Explacestate Interface 및 PopState 이벤트를 추가합니다. 여기서 자세히 소개하지 않을 것입니다. 이 지식이없는 학생들은 먼저 관련 정보를 보는 것이 좋습니다.
Pjax 플러그인은 Pushstate 및 Ajax 작업을 캡슐화하여 이러한 웹 응용 프로그램을 개발할 수있는 간단한 방법을 제공합니다. 특정 단계는 다음과 같습니다.
로컬 업데이트가 필요한 컨테이너를 정의하십시오
<div id = "컨테이너"> </div>
pjax를 초기화하고 URL을 듣습니다
코드 사본은 다음과 같습니다.
$ (function () {
// pjax
$ (문서) .pjax ( 'a', '#container');
$ .pjax.reload ( '#컨테이너');
})
백엔드는 pjax 요청을 처리합니다
백엔드의 처리 로직은 먼저 PJAX 요청 여부를 결정하는 것입니다. 그렇다면 요청 매개 변수에 따라 로컬 컨텐츠를 반환하고 레이아웃을 반환 한 다음`$ .pjax.reload ( '#container');`에 의해 pjax 요청을 시작하십시오. 위의 논리에 따르면 다음 코드를 작성할 수 있습니다.
코드 사본은 다음과 같습니다.
var pjaxfilter = function (req, res, next) {
if (req.get ( 'x-pjax')) {
다음();
반품;
}
// pjax 요청이 아닌 경우 레이아웃 템플릿으로 직접 돌아갑니다.
res.render ( '레이아웃', {제목 : 'pjax simple demo'});
};
router.get ( '/', pjaxfilter, function (req, res) {
Res.Render ( 'index');
});
router.get ( '/poem/: id', pjaxfilter, function (req, res) {
var poemid = req.params.id;
Res.Render ( '시/' + 시드);
})
전체 코드 : pjax-demo
이것은 PJAX의 가장 기본적인 기능 일뿐입니다. PJAX는 풍부한 API를 제공합니다. JQuery-Pjax를 방문하십시오