Avoid full page reloads(!?) while navigation by updating only relevant sections in a set of webpages

I have a 3 column layout in my webpages and in my left most column, I have a list of pages which is consistent in all the pages.

Thus I was thinking i开发者_如何学Cf it would be preferable to prevent full page loading and update only the neccessary sections of the page when the user tries to switch to different page selecting fromt the left panel list. Should I prevent the default behavior of links using preventDefault() from jquery and update the address bar url & sections of page using ajax?

I guess facebook also does the same thing when you try to switch between different group pages from the left panel on profile page !?

This is a perfectly reasonable optimization, yes—though the links should continue to work without JavaScript, for the benefit of crawlers and NoScripters and various other edge cases.

You can even make the effect seamless if you update the address bar with pushState. (The API is a bit new and slightly glitchy across browsers, but history.js promises to smooth out the differences.) Browse the tree in a project on github to see how this can work.

I believe github uses a jQuery plugin called pjax for their effect. Maybe you can drop it in with minimal effort.

Add return false to onclick handlers at links. These will prevent the links from being followed.

About updating the contents of the page: You should use Ajax indeed. Do you have any other specific questions?