Downloaded 32 times
Uploaded bySyd Lawrence
Making AJAX User Friendly, Google Friendly, Friendly Friendly using the History API
The document discusses using the HTML5 History API to make AJAX applications feel more like regular web pages by modifying the URL bar and allowing the back button to work properly. It describes how pushing state objects to the history maintains page states, and listening for popstate events allows handling back button clicks. Browser support is covered, with all major browsers supporting it except older Internet Explorers. Examples of sites that use this technique include Flickr, Google, and GitHub.
![[BDD 2025 - Full-Stack Development] PHP in AI Age: The Laravel Way. (Rizqy Hi...](https://cdn.slidesharecdn.com/ss_thumbnails/fs-phpinaiagethelaravelway-251125012602-ef9d330e-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Full-Stack Development] The Modern Stack: Building Web & AI Appli...](https://cdn.slidesharecdn.com/ss_thumbnails/fs-themodernstackbuildingwebaiapplicationswithserverless-251124030844-388cf04f-thumbnail.jpg?width=640&height=640&fit=bounds)
Making AJAX User Friendly, Google Friendly, Friendly Friendly using the History API
- 1. MAKING AJAX USER FRIENDLY,GOOGLE FRIENDLY, FRIENDLY FRIENDLY USING THE HISTORY API Winchester Studio. 6061 High Street. Winchester. Hampshire. SO23 9BX. SIT BACK / SIT BACK London Studio. 1 The StableYard. 16a Balham Hill. London. SW12 9EB. LISTENUP LISTEN UP T. +44 (0) 20 3137 1469 F. +44 (0) 845 862 0706 info@marmaladeontoast.co.uk www.marmaladeontoast.co.uk
- 2. HI, I’M SYDLAWRENCE I’M AFRAIDOF HEIGHTS sydlawrence.com @sydlawrence github.com/sydlawrence fb.com/sydlawrence tumblr.com/sydlawrence SIT BACK / SIT BACK skype:sydlawrence LISTENUP LISTEN UP you get the picture
- 3. WHAT IS IT? SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/pixelthing/2555047998/
- 4. HTML5 SIT BACK / SIT BACK LISTENUP LISTEN UP
- 5. JAVASCRIPT OBJECT SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/hamsters/37012321/
- 6. WHAT IS THE PROBLEM? SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/benjibot/4803751040/
- 7. AJAX LOADS NEW CONTENT SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/elstruthio/2761267024/
- 8. BACK BUTTON SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/executionsinfo/4573848874/
- 9. COPY PASTA SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/anwoodward/3341609205/
- 10. SURELY, THIS ISN’T NEW SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/9422878@N08/4898524174/
- 11. LOCATION.HASH SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/spodzone/1172282130/
- 12. IF IT AIN’T BROKE SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/trojanguy/3251306440/
- 13. ALWAYS FELT LIKE AHACK SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/stevedinn/180630463/
- 14. REQUIRES JAVASCRIPT ON RELOAD SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/23516192@N08/3418663794/
- 15. EXAMPLE www.example.com/old/#/new SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/grimages/3854628417/
- 16. WHAT DOES IT DO? SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/doggo/2618699311/
- 17. ADDS TO THE HISTORYBOOKS SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/namealus/3676208219/
- 18. BACK TO THE FUTURE SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/boltron/2670777828/
- 19. WHEN WOULD THIS BEUSEFUL? SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/jeffwerner/386367076/
- 20. LIGHTBOXES SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/nielsprovos/252176710/
- 21. POPUP LOGINS SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/seasidebear/3409308888/sizes/l/
- 22. COMMENTS SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/geishaboy500/541493823/
- 23. PAGINATION SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/davidecassenti/4335607637/
- 24. BROWSER SUPPORT SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/annagaycoan/3750144703/
- 25. FIREFOX SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/kevenlaw/2784262431/
- 26. CHROME SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/professorbop/3872715381/
- 27. SAFARI SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/vickispix/296076348/
- 28. OPERA SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/sacharules/1441899883/
- 29. INTERNET EXPLORER as of ie9b2 SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/celebdu/10200825/
- 30. HOW? SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/cayusa/2194119780/
- 31. CLICK EVENT ON LINK SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/8829172@N02/2880158998/
- 32. RENDER DIFFERENTLY ON AJAXREQUEST SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/shannonmary/187131727/
- 33. history.pushState (stateObj,title,url); SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/fras/3800547100/
- 34. LISTEN FOR EVENT SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/bernhardbenke/2370811833/
- 35. window.onpopstate = fn(evt) SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/pascalbovet/4657125857/
- 36. SITES THAT USE IT SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/mattknoth/520009619/
- 37. FLICKR SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/brandoncwarren/4209735621/
- 38. GOOGLE http://www.20thingsilearned.com/ SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/katphotos/1030473901/
- 39. GITHUB SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/entropy1138/173848032/
- 40. SYDLAWRENCE.COM SIT BACK / SIT BACK LISTENUP LISTEN UP Victorian Times
- 41. USER FRIENDLY SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/emdot/22081098/
- 42. GOOGLE FRIENDLY SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/donsolo/2189108384/
- 43. FRIENDLY FRIENDLY SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/scottkinmartin/478136767/
- 44. WANT TO KNOW MORE https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history- MDN http://dev.w3.org/html5/spec/Overview.html - HTML5 Spec IS IT / SIT BACK LISTEN UP PINT TIME? https://github.com/sydlawrence/fancy-box - My Fancy-box Fork
- 45. ANY QUESTIONS? IS IT / SIT BACK LISTEN UP PINT TIME? http://www.flickr.com/photos/dexxus/4158928239/
- 46. THANKS I’VE BEEN SYDLAWRENCE sydlawrence.com @sydlawrence github.com/sydlawrence fb.com/sydlawrence tumblr.com/sydlawrence IS IT / SIT BACK skype:sydlawrence LISTEN UP PINT TIME? you get the picture
Editor's Notes
- #2 \n
- #3 I’m sydlawrence\n afraid of heights\n lead developer at Marmalade\n part time lecturer at Winchester Uni on the Digital Media Development Course\n love the future\n Going to talk about the new History API available in all decent browsers\n will also cover mistakes made by developers with ajax\n\n
- #4 What is it?\n You, you guessed it, it is part of the ‘html5’ spec\n\n
- #5 HTML5\n but of course it is javascript... That discussion is certainly for another time...\n One of the many new javascript toys available in the HTML5 spec\n DeviceOrientation\n GeoLocation\n LocalStorage\n\n
- #6 Javascript Object\n basically window.history is a javascript object\n It has been available for a long time\n window.history.back\n a couple of NEW tools\n\n
- #7 What is the problem?\n Why do we need window.history\n\n
- #8 Ajax loads new content\n out with the old, in with the new... \n that content is dynamically generated.. \n google doesnt see that content... \n unless you use a link for google to spider.\n\n
- #9 Back button\n People press the back button all the time... \n Much more than I ever thought... \n The amount of times I have seen people get confused by pressing back, and then leaving a site..\n One of the horrendous issues with Flash...\n USER FRIENDLY\n\n
- #10 Copy & Paste\n Same, same\n People like to share urls...\n GOOGLE FRIENDLY\n They will share the wrong url!\n think ow.ly\n Dont make people confused the first time they click on a link to get to your site...\n First time visitors...\n Treat them with honour, with diginity, intice them back for more...\n\n
- #11 Surely this isn’t new\n This isn’t a new problem.. this wasn’t a problem first discovered in the last six months\n Nope\n People like to find solutions\n\n
- #12 location.hash\n There has been an interesting solution, using location.hash\n javascript can modify the hash location of the url...\n i.e. adding a # on the end followed by a string..\n\n
- #13 if it ain’t broke\n don’t fix it\n BUT there are issues\n\n
- #14 always felt like a hack\n always was a hack... location.hash was not meant for that kind of thing (with regards to ajax, hidden content maybe, but not modified content)\n\n
- #15 requires javascript on reload\n If you send a link to someone with the hash location... the new user needs javascript for that to take affect...\n OK, ignore lack of javascript...\n What about Google... Your javascript on reload is to populate with the new ajaxed content\n\n
- #16 run through example\n www.example.com/old/#/new\n visit old\n www.example.com/old/\n click something\n www.example.com/old/#/new\n share link\n www.example.com/old/#/new\n old static content, then javascript needs to get the new\n\n
- #17 What does it do?\n History stack, that behaves in the same way a simple array would\n\n
- #18 Adds to the history books\n push on to the stack\n\n
- #19 Back to the Future\n popstate event when they press forwards\n\n
- #20 When Would This be useful\n When the content changes...\n When someone might want to share the content\n back button\n copy paste\n\n
- #21 Lightboxes\n Images..\n videos\n\n
- #22 Popup logins\n more and more sites use this\n what if they fail to login and want to try again\n\n
- #23 Comments\n pages\n\n
- #24 Pagination\n pages\n\n
- #25 Browser Support\n Remember, this is still bleeding edge\n\n
- #26 Firefox\n introduced in gecko 2\n firefox 4 \n\n
- #27 Chrome\n WebKit 528\n Live version \n\n
- #28 Safari\n Also uses webkit\n Live version \n\n
- #29 Opera\n Not as yet\n\n
- #30 Internet Explorer\n Not as yet\n\n
- #31 How do you use this wonderful thing?\n run through workflow\n same ajax mistaked\n\n
- #32 Click event on link\n Always do this for ajax content... to the same url that you would without javascript\n ALWAYS\n\n
- #33 render differently on ajax requests\n Don’t have different urls..\n\n
- #34 history.pushState\n this is used to add to the history\n history.pushState(StateObj,title,url)\n local domain url\n StateObj is anthing you might want to retreive later\n \n There is also replaceState that operates in the same way, but it replaces the current state\n
- #35 listen for event\n when someone presses back or forward..\n\n
- #36 window.onpopstate\npopstate event\nwindow.onpopstate = function(event)\npasses data\ndata.state = StateObj\n\n
- #37 sites that use it\n\n
- #38 flickr\nfor their lightboxes\n
- #39 google\n20 things i learned about the web ebook\n
- #40 github\nfile browsing\n
- #41 sydlawrence.com\n\nME!\n
- #42 USER Friendly\n\nBack / forward button\nSharing Links\n
- #43 Google Friendly\n\n\nindexable content\n
- #44 Friendly friendly\n\nIts not even hard to do!\n
- #45 Want to know more\n\nMozilla Developer Network\nHTML5 Spec\nMy Fancy-box fork on github\n
- #46 Any Questions?\n\n\n\nHow to check in browsers\ncheck to see if the pushstate function exists\n\nwindow.onpopstate = function (evt) {}\nhistory.pushState(StateObj,title,url);\n
- #47 Thanks, I’v been sydlawrence\n