Hash navigation in AJAX sites

If you build ajax-site, then sooner or later, you encounter the problem “the back and forth buttons in the browser do not work”. Because ajax is asynchronous, it does not perform the transition to other pages, but it only changes a certain part of the content to the current one.

The second problem that all developers are struggling with - the project just before delivery to production simply abounds in heaps of javascript (ajax) code. All this code is in its essence - just requests for pages from the north "without a template", i.e., the pure content of the page.

If the first problem is a problem for users, then the second is for developers. Below I will try to describe how both problems are solved in a very elegant way. By a very similar method of building links to facebook and twitter.

Of course, the developer wants him not to think about ajax, but his project was full-ajax :-) Therefore, if the developer writes a link:
')

 <a href="/contacts/">Contacts</a> 

then it should automatically be replaced by ajax-ovuyu. But in order to control ajax / non_ajax, it is better to add a special class to all links in the code, for example:

 <a href="/contacts/" class="EngineAJAX">Contacts</a> 

After loading the DOM model (the dom: loaded event), you need to find all the links — remove the EngineAJAX class from them and add them to the href "#!". As a result, the link will look like:

 <a href="#!/contacts/">Contacts</a> 

Ie, now our link is “anchor”. When you click on such a link, the browser does not overload the page, but tries to find the element with the specified ID and position itself on it.
I think it is clear that the ajax request must be executed exactly when switching to this kind of link. Unfortunately, it is impossible to catch the document.location.hash onChange event, so the entire document will have to hang up the onClick handler and “listen” on which element was clicked.

Half of the puzzle is solved: when you click on a link, you go to the anchor, the click is caught, and ajax is executed. In order for the buttons to work back and forth in the browser, you need to check in the perpetual loop whether document.location.hash has changed, and if it has changed, then perform an ajax request. Problem # 1 for the user - solved.

Now a little about the problem # 2, or about the same ajax'e, which should get “pure page content” from the server. It all depends on the engine or CMS that you use. In the engine in any way you like to add this possibility: if a certain parameter is passed (for example, the GET parameter notemplate = 1), then the engine should display the contents of the page “without a template”. Ie, for the example above, the ajax request just hits the URL:

/contacts/?notemplate=1

And so, problems # 1 and # 2 are almost solved. Almost because there was a problem # 3: after executing any ajax, the html-code of the entire document changes, and new links may appear in it with the EngineAJAX class, which need to be converted into anchors. The problem is further aggravated by the fact that events like dom: changed do not exist. The only “head on” option that I came up with is to check 10 times per second whether the content of the body tag (+1 perpetual cycle) has changed - and if it has changed - go through all the links and try to convert them (that's why we cleaned the class EngineAJAX from the processed links - in order not to go over them again).

PS: in jQuery there is an onHashChanged event and it seems to be onDomChanged, but in jQuery, I think, catching such events will still be reduced to perpetual loops.