Your SlideShare is downloading. ×
  • Like
pjax
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply
Published

html5jsstudy

html5jsstudy

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
801
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
5
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Transcript

  • 1. HTML5 PushState + AJAX =PJAX 박준태 (알케이준) Twitter : @rkjun HTML5JS공부모임 3회오프
  • 2. about.me이름: 박준태 (Park, Juntai)닉네임: rkJun (알케이준)Freelance Web Developer (java)트위터 : twitter.com/rkjun블로그 : rkjun.wordpress.comgithub : github.com/rkjunabout.me : about.me/rkjun
  • 3. 오늘의 주제pjax 공부하기(pushState + ajax = pjax)
  • 4. pjax 공부하기 전에pjax = pushState + ajaxwhat is ajax?what is pushState?
  • 5. 일반적인 웹페이지 이동1.웹 브라우저2.서버호출3.데이터 가져올 때까지 기다림4.가져온 후 화면 표시 (동기통신)
  • 6. Ajax 의 등장Asynchronous JavaScript and XML페이지이동없이, 빠른 화면전환서버처리를 기다리지 않고, 비동기 요청 가능수신 데이터량 감소 (데이터만 수신..)
  • 7. Ajax 사용하기new XMLHTTPRequest();$.ajax(); //jQuerynew 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_/rkjunJavaScript dependency
  • 11. HTML5HTML5 history APIpushStatehistory.pushState(data, title, url);
  • 12. pjaxajax, hashbang 의 한계를 뛰어넘음Back 버튼 OKJavaScript independency
  • 13. pjaxHTML5 history.pushState + ajaxpjax (jQuery Plugin)URL 을 가짐뒤로가기 OKSEO OKCURL 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 sideRequest Header “X-PJAX:true”X-PJAX 값에 의한 layout 분기
  • 17. samplehttp://padrino-pjax.heroku.com/http://rkjun.github.com/pjax
  • 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