HTML5 PushState + AJAX                 =PJAX             박준태 (알케이준)              Twitter : @rkjun        HTML5JS공부모임 3회오프
about.me이름: 박준태 (Park, Juntai)닉네임: rkJun (알케이준)Freelance Web Developer (java)트위터 : twitter.com/rkjun블로그 : rkjun.wordpress....
오늘의 주제pjax 공부하기(pushState + ajax = pjax)
pjax 공부하기 전에pjax = pushState + ajaxwhat is ajax?what is pushState?
일반적인 웹페이지 이동1.웹 브라우저2.서버호출3.데이터 가져올 때까지 기다림4.가져온 후 화면 표시 (동기통신)
Ajax 의 등장Asynchronous JavaScript and XML페이지이동없이, 빠른 화면전환서버처리를 기다리지 않고, 비동기 요청 가능수신 데이터량 감소 (데이터만 수신..)
Ajax 사용하기new XMLHTTPRequest();$.ajax(); //jQuerynew Ajax.request(); //prototype.js
Ajax의 한계?BACK 버튼 이전페이지 이동 불가HTML 소스보기로 사이트의 내용을알기 어렵다.구글링 불가
hashbang 의 등장hash (#), bang(!)https://twitter.com/#!/rkJun (트위터)2~3년전부터 등장 (twitter, facebook,filickr...)hashchange event
hashbang 옳지 않아?Back 버튼에 의해 이전 페이지 이동은 가능검색엔진 검색불가 (SEO불가)   SEO (Search Engine Optimization : 검색엔진 최적화)구글링 가능 (#!을 ?_escap...
HTML5HTML5 history APIpushStatehistory.pushState(data, title, url);
pjaxajax, hashbang 의 한계를 뛰어넘음Back 버튼 OKJavaScript independency
pjaxHTML5 history.pushState + ajaxpjax (jQuery Plugin)URL 을 가짐뒤로가기 OKSEO OKCURL OK
pjax<a href=/explore data-pjax=#main>Explore</a>$(.js-pjax).pjax(#main)
pjax call$.pjax({ url: /authors, container: #main})========================================$.ajax({ url: /authors, dataTyp...
pjax on the server sideRequest Header “X-PJAX:true”X-PJAX 값에 의한 layout 분기
samplehttp://padrino-pjax.heroku.com/http://rkjun.github.com/pjax
참고사이트위키백과 http://ko.wikipedia.org/wiki/AjaxGoogle Developers Making AJAX Applications Crawlable Full Specificationhttps://d...
Upcoming SlideShare
Loading in...5
×

pjax

939

Published on

html5jsstudy

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
939
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "pjax"

    1. 1. HTML5 PushState + AJAX =PJAX 박준태 (알케이준) Twitter : @rkjun HTML5JS공부모임 3회오프
    2. 2. about.me이름: 박준태 (Park, Juntai)닉네임: rkJun (알케이준)Freelance Web Developer (java)트위터 : twitter.com/rkjun블로그 : rkjun.wordpress.comgithub : github.com/rkjunabout.me : about.me/rkjun
    3. 3. 오늘의 주제pjax 공부하기(pushState + ajax = pjax)
    4. 4. pjax 공부하기 전에pjax = pushState + ajaxwhat is ajax?what is pushState?
    5. 5. 일반적인 웹페이지 이동1.웹 브라우저2.서버호출3.데이터 가져올 때까지 기다림4.가져온 후 화면 표시 (동기통신)
    6. 6. Ajax 의 등장Asynchronous JavaScript and XML페이지이동없이, 빠른 화면전환서버처리를 기다리지 않고, 비동기 요청 가능수신 데이터량 감소 (데이터만 수신..)
    7. 7. Ajax 사용하기new XMLHTTPRequest();$.ajax(); //jQuerynew Ajax.request(); //prototype.js
    8. 8. Ajax의 한계?BACK 버튼 이전페이지 이동 불가HTML 소스보기로 사이트의 내용을알기 어렵다.구글링 불가
    9. 9. hashbang 의 등장hash (#), bang(!)https://twitter.com/#!/rkJun (트위터)2~3년전부터 등장 (twitter, facebook,filickr...)hashchange event
    10. 10. hashbang 옳지 않아?Back 버튼에 의해 이전 페이지 이동은 가능검색엔진 검색불가 (SEO불가) SEO (Search Engine Optimization : 검색엔진 최적화)구글링 가능 (#!을 ?_escaped_fragment_ 로 처리)https://twitter.com/?_escaped_fragment_/rkjunJavaScript dependency
    11. 11. HTML5HTML5 history APIpushStatehistory.pushState(data, title, url);
    12. 12. pjaxajax, hashbang 의 한계를 뛰어넘음Back 버튼 OKJavaScript independency
    13. 13. pjaxHTML5 history.pushState + ajaxpjax (jQuery Plugin)URL 을 가짐뒤로가기 OKSEO OKCURL OK
    14. 14. pjax<a href=/explore data-pjax=#main>Explore</a>$(.js-pjax).pjax(#main)
    15. 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. 16. pjax on the server sideRequest Header “X-PJAX:true”X-PJAX 값에 의한 layout 분기
    17. 17. samplehttp://padrino-pjax.heroku.com/http://rkjun.github.com/pjax
    18. 18. 참고사이트위키백과 http://ko.wikipedia.org/wiki/AjaxGoogle Developers Making AJAX Applications Crawlable Full Specificationhttps://developers.google.com/webmasters/ajax-crawling/docs/specification?hl=ko해쉬뱅(#!) 에 대해서 http://blog.outsider.ne.kr/698w3.org history http://www.w3.org/TR/html5/history.html#historyHTML5とか勉強会-PJAX http://b.hatena.ne.jp/entry/www.slideshare.net/KensakuKOMATSU/19html5jquery-pjax https://github.com/defunkt/jquery-pjax
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×