How to make a loadable block through ajax with a change in the page address?

Question

JavaScript

Hello, there is a page that consists of information about the company, and at the top there is a menu with services.
So when you click on a service, only one block on the site should change. But at the same time, it is necessary that the address of the page also changes, so that when people go to this address, they see the necessary block.
Here is a simple example, but the address does not change
pjax - but I don’t understand how it works.
I also found this option - but here I don’t like it, it turns out 3 pages on the server (in demo), which just differ in this block, and already when you click this block is loaded.

And I would also like to know the opinion of SEOs about this approach.

Tell me which way to dig, thanks in advance.

Answer 1

google history api

Answer 2

swfaddress googled