html5 pushState 를 활용한 pjax
link : https://github.com/defunkt/jquery-pjax
안녕하세요.
공부하다 혼자알기 아까워 공유합니다.
pjax 는 쉽게말해 ajax의 history 관리 때문에 hash (#) 등을 활용해서 작업하던걸
똑똑한 외국인이 HTML5 에서 지원하는 pushState 를 활용하여 합쳐진기술 입니다.
친절하게 github 에도 있네요.
블로그에 적어놓은거 수정해서 글좀 다듬었으니 천천히 읽으세요~
틀린거 있으면 알려주세요.
넵 ㄳ
[초보를 위한 간단설명]
ajax = 비동기 자바스크립트 + XML
hash bang = ajax 사용시 history 관리가 안되는 문제를 해결하기 위해 썼던 수단.
pushState = html5 에서 지원하는 history 관리용도의 API (pushState, replaceState )
pjax = pushState + ajax
[상세설명]
##AJAX
Asynchronous Javascript And XML (비동기 자바스크립트와 XML)
기존 기술을 효율적으로 사용하도록 표준화 한것.
핵심은 재로드 하지않고 일부만 갱신하여 웹서버와 데이터를 교환하는것. (대역폭의 낭비를 최소화 한다)
설명
- 인터넷 표준을 기반으로 함.
- javascript/DOM (정보의 상호작용)
- CSS (데이터 스타일)
- XML, XSLT (데이터 전송포맷으로 사용), XMLhttpRequest 객체 (서버와 비동기적으로 데이터를 교환), JSON
JSON RPC로 데이터를 교환/조작함.
이를 활용한 프레임워크
- prototype , jQuery, jQuery UI, dojo, YUI 등
##Hash-Bang (#!)
페이지 갱신없이 URL 을 변경하기위해 사용됨. (주로 SPA 를 만들기위해 사용됨.)
twitter 에서 한때 사용된 기술.
# 뒤의 부분을 fragment identifier 라고 부름. (#!dfdsafasdf)
문제점 및 오류.
- javascript app 이기에, 스크립트에 오류 발생시 전혀 이용할 수 없음.
- 검색엔진.
- 구글링 가능 (_escaped_fragment_ 변환)
- SEO 불가.
- 크롤러는 HTTP 1.1 과 URL스펙 (RFC-2396)을 따름.
- 페이지 내의 스크립트를 실행하지 않기에 사이트의 컨텐츠를 가져갈 수 없음.
- 이는 Zombie , PhantomJS 등을 활용하여 크롤러 요청시 미리 Static 한 HTML 페이지를 리턴하여 적용 할 수 있다.
- 이는 서버측 코딩부담도 줄여주고, 오래된 브라우저에서도 대처가 가능하다.
- 참고 : http://funnygangstar.tistory.com/183
- 캐시문제.
- 중계서버가 이를 다룰 방법이 없기에 모든 트래픽을 다뤄야함.
- 리퍼러에 fragment identifier 가 넘어오지 않기에, 리퍼러를 보고 방문자 원글 추적이 불가능함.
##PushState ?
HTML5 의 History API. ( http://html5.clearboth.org/history.html )
사파리 크롬 파폭 등 크로스브라우징 지원.
참고링크 : http://www.slipp.net/wiki/display/SLS/pushstate
- history.pushState 를 이용하여 페이지의 성격과 명칭지정. 이동값 전달 및 내용변경이 가능하다.
- 다시 페이지로 오게 됐을때엔 history.replaceState 를 활용하여 함수 설정 가능하다.
##PJAX ( https://github.com/defunkt/jquery-pjax )
- HTML5 의 pushState + AJAX .
- 뒤로가기, 검색인덱스생성 불가능한 ajax 의 한계를 극복함.
- hash bang 의 URL hack 을 쓰지않고 URL 전환처리 가능.
- jQuery 버전으로 만들어져 있음.
- jQuery 1.8 이상부터 지원함.
- $(document).pjax(select , object)
- $(document).pjax(select , container ,object)
- EVENT 로는 click, submit, beforeSend, success, timeout, error, complete 등
ajax 에서 쓰이는 기능 외에 일부 요소를 갖고있음.
- meta tag 내에 pjax 버전등을 명시하여 검색엔진에도 활용 가능함.
- html5 가능 브라우져 : pjax 형태로 페이지 전환가능.
- 기타 브라우져 : 일반 페이지 이동하듯 처리됨.