Create modern website that loads content without refresh

Question

I'm trying to find useful tutorials about how to create modern websites that loads content without refreshing the page.

I have tried all kinds of words in Google, but I don't get any useful hits. Perhaps it's because I'm not sure what I should be searching for.

Tips and links to tutorials would be appreciated!

Thanks!

Answer 1

tl;dr: Googling ajax website tutorial or jquery address tutorial is a good start.

---

As has been noted, the key here is AJAX.

AJAX alone, however, is not the answer. It's pivotal to a non-page-reload site, but there are also a lot of other things to consider.

Luckily for us all, the Internet is great, and lots of developers have an open-source is awesome mindset.

Suffice to say, this type of site has been done before, and there are people out there who have made developing a site like this easier.

Ignoring the back-end & server-side setup, the way I would recommend starting a site like this is to use the following:

• HTML5 BoilerPlate
• jQuery
• jQuery Address plugin.

Use the plugin from the start; from experience, it's difficult to implement it after you've completed the site.

Answer 2

You'll want use ajax. There are also ways to poll the server for updates as well. You can use a setInterval call to periodically retrieve a URL; but this is only required if you're polling. If you're doing this action based on a user event, you can just use that to trigger the retrieval/update. I'd suggest looking at jQuery, it'll make this kind stuff much easier.