pjax

1. 개요2. 원리

1. 개요

PJAX는 AJAX 기술과 HTML5 pushState API를 활용하여 페이지를 로딩하는 기술을 말한다. AJAX만 사용하면 주소가 바뀌지 않아 페이지를 로딩하는데는 적합하지 않고 Form 등에 주로 쓰인다. 하지만 여기에 pushState API를 적용하게 되면 주소가 바뀌어 히스토리 관리가 가능해진다.

2. 원리

자세한 내용은 AJAX 문서 참고하십시오.
기본적인 코드는 AJAX와 같다. 하지만 여기에 pushState API를 적용하면 이렇게 된다.[1]

[ 클라이언트측 예제 코드 펼치기 / 접기 ]

#!syntax html
<!DOCTYPE html>
<html>
    <head>
        <title>PJAX example</title>
        <script>
            /*jshint esversion:6*/
            function moveto(a,b){
                "use strict";
                var request=new XMLHttpRequest();//AJAX 요청 열기
                history.pushState(null,null,a);//함수로 받아온 값으로 주소 바꾸기
                request.open('GET','//api.example.com/?PAGE='+a,true);//함수로 받아온 값을 api.example.com/값 으로 GET으로 보냄
                request.send();//전송
                request.onload=()=>{
                    if(request.status==200){//성공할시
                        document.querySelector(b).innerHTML=request.response;//함수로 받아온 CSS 선택자로 처음 발견된 곳에 응답을 뿌림
                    }
                    else{//서버가 4xx, 5xx 반환시
                        document.querySelector(b).innerHTML='서버에서 에러를 반환했습니다.';
                    }
                };
            }
        </script>
    </head>
    <body>
        <a onclick="moveto('hello','article')">Hello!</a> <a onclick="moveto('world','article')">World!</a>
        <article></article>
    </body>
</html>

[ 서버측 예제 ( PHP ) 코드 펼치기 / 접기]

#!syntax php
if($_GET['PAGE']=='hello'){
?>
hello!
<?php
}
elseif($_GET['PAGE']=='world'){
?>
world!
<?php
}
else{}

[1] 단, 여기서 주소는 클라이언트에서 설정해야 한다. 저 위의 코드를 바로 쓸 시 api.example.com으로 요청을 보낸다.

pjax

1. 개요

2. 원리

분류