Let's learn how Fetch works

Click one button below. Each button element contains a data attribute that can be used by JavaScript.

The Fetch API is likely going to replace Ajax as the JavaScript way to communicate with the server, access a file or a database there, and come back to our page and alter its contents without reloading the page.

Each time you click any button here, the Fetch code accesses the file states.html on the server.

Side notes:

  1. Learn more about Fetch. Also here and here.
  2. Learn more about data attributes and accessing their values with jQuery.
  3. Here is this same example done with Ajax instead of Fetch.