html5jsstudy

1. HTML5 PushState + AJAX
=PJAX
박준태 (알케이준)
Twitter : @rkjun
HTML5JS공부모임 3회오프

2. about.me
이름: 박준태 (Park, Juntai)
닉네임: rkJun (알케이준)
Freelance Web Developer (java)
트위터 : twitter.com/rkjun
블로그 : rkjun.wordpress.com
github : github.com/rkjun
about.me : about.me/rkjun

3. 오늘의 주제
pjax 공부하기
(pushState + ajax = pjax)

4. pjax 공부하기 전에
pjax = pushState + ajax
what is ajax?
what is pushState?

5. 일반적인 웹페이지 이동
1.웹 브라우저
2.서버호출
3.데이터 가져올 때까지 기다림
4.가져온 후 화면 표시 (동기통신)

6. Ajax 의 등장
Asynchronous JavaScript and XML
페이지이동없이, 빠른 화면전환
서버처리를 기다리지 않고, 비동기 요청 가능
수신 데이터량 감소 (데이터만 수신..)

7. Ajax 사용하기
new XMLHTTPRequest();
$.ajax(); //jQuery
new Ajax.request(); //prototype.js

8. Ajax의 한계?
BACK 버튼 이전페이지 이동 불가
HTML 소스보기로 사이트의 내용을
알기 어렵다.
구글링 불가

9. hashbang 의 등장
hash (#), bang(!)
https://twitter.com/#!/rkJun (트위터)
2~3년전부터 등장 (twitter, facebook,
filickr...)
hashchange event

10. hashbang 옳지 않아?
Back 버튼에 의해 이전 페이지 이동은 가능
검색엔진 검색불가 (SEO불가)
SEO (Search Engine Optimization : 검색엔진 최적화)
구글링 가능 (#!을 ?_escaped_fragment_ 로 처리)
https://twitter.com/?_escaped_fragment_/rkjun
JavaScript dependency

11. HTML5
HTML5 history API
pushState
history.pushState(data, title, url);

12. pjax
ajax, hashbang 의 한계를 뛰어넘음
Back 버튼 OK
JavaScript independency

13. pjax
HTML5 history.pushState + ajax
pjax (jQuery Plugin)
URL 을 가짐
뒤로가기 OK
SEO OK
CURL OK

14. pjax
<a href='/explore' data-pjax='#main'>Explore</a>
$('.js-pjax').pjax('#main')

15. pjax call
$.pjax({
url: '/authors',
container: '#main'
})
========================================
$.ajax({
url: '/authors',
dataType: 'html',
beforeSend: function(xhr){
xhr.setRequestHeader('X-PJAX', 'true')
},
success: function(data){
$('#main').html(data)
history.pushState(null, $(data).filter('title').text(), '/authors')
})

16. pjax on the server side
Request Header “X-PJAX:true”
X-PJAX 값에 의한 layout 분기

17. sample
http://padrino-pjax.heroku.com/
http://rkjun.github.com/pjax

18. 참고사이트
위키백과 http://ko.wikipedia.org/wiki/Ajax
Google Developers Making AJAX Applications Crawlable Full Specification
https://developers.google.com/webmasters/ajax-crawling/docs/specification?
hl=ko
해쉬뱅(#!) 에 대해서 http://blog.outsider.ne.kr/698
w3.org history http://www.w3.org/TR/html5/history.html#history
HTML5とか勉強会-PJAX http://b.hatena.ne.jp/entry/www.slideshare.net/
KensakuKOMATSU/19html5
jquery-pjax https://github.com/defunkt/jquery-pjax