Experience creating a navigation system on Ajax

I was always wondering why Ajax is used in the navigation system when developing websites so rarely? After all, the benefits in my opinion are obvious! The site on Ajax works many times faster than any ordinary site, and even if we take into account the browser cache, this is noticeable.

I decided to dig deeper, and figure out what pitfalls await me, and what is actually all the complexity. When I studied the issue in more detail, I encountered some difficulties, but not to say that they were significant. Everything is solved and very simple, and now I want to share with you my experience in creating full-fledged Ajax-navigation.

Where do we start? Theory

What do we want to get as a result? We want to get a full-fledged site, which can be indexed by search engines, with a normal navigation system, and most importantly - fast.
')
I chose the following solution: the site was ordinary (without Ajax), with regular links (/ news / or / contacts /), all I did was add an interceptor for navigation. When you click on the link, the program simply sent a POST request to the same page, only with the ajaxLoad parameter, which told the server that you only need to give part of the page (without header, styles, scripts, etc.), and this piece just put in the right place.

As an example, you can look at the site for which I implemented this system: wicegoal.com . (the site is still under development, so I recommend simply walking along the navigation links, and by country at the very top).

I chose jQuery as the JavaScript library. The first question that needed to be resolved was the links, and the browser navigation. It is necessary to intercept button presses of the browser back and forth, and of course, make sure that the user can bookmark the site. There are two options, and each has its own drawbacks:

• Hash links. They are good because they are compatible with all browsers, but have a big disadvantage - you cannot work with them in PHP, and this results in a number of problems, such as the inability to determine the page after it has been reloaded. In fact, you can come up with several perverted methods to solve this problem, like this: when a user clicks on the / # page = / news / link, simply redirect it to the / news / page, but the option is clearly not the best, but nevertheless, there is a place to be.
• HTML5 History API. This option is much better. It does not make sense to present it, it has already been done for me , only this option has one big BUT: no version of IE supports it.

Of course, you can find a solution, for example, to do this: for modern browsers, select the History API, and for IE - hash links. Plus, there must be a version of the site, without Ajax, with which search engines can work.

I decided to restrict myself to the History API and the version without Ajax, so as not to create unnecessary problems for myself.

Development of the navigation engine

The first thing I did was create a file navigator.js , which should handle links, and put an event there:

if (history.pushState) { $('.navigation-menu').live("click", function(){ setPage($(this).attr('href')); return false; }) } 

Here, for starters, we check whether the Browser supports the History API, if so, then hang the handler for all links, with the navigation-menu class, the handler will call the setPage function:

 function setPage(page) { $.post(page, { ajaxLoad: true }, function(data){ $('#content-inner').html(data); NavigationCache[page] = data; history.pushState({page: page, type: "page"}, document.title, page); }) } 

This function sends a post-request to the page we need. It is worth paying attention to the ajaxLoad parameter. This parameter is necessary for the server script, which will give us the page. If there is ajaxLoad parameter, the server will give us only the necessary part of the page, if it is not there, the server will give the whole page, along with the header, basement, navigation, etc.
This is necessary in order to directly visit the site.com/news/ page, for example, we received the whole page, and if we go to this page, for example, from the main via ajax-link, then we only need to get its part and insert into the # content-inner block, because we don’t need the whole page, it’s pointless to drag a whole bunch of extra code.

There is also one more thing that you are surely interested in, I am talking about this line:

 NavigationCache[page] = data; 

This line writes the page we received to the cache. The question of why this is needed, disappears by itself when it comes to browser navigation. After all, it will be much better if, when you press the button back, we get an instant response from the cache, than we wait until the page starts loading again. For the cache to work, at the very beginning of the file, you need to add the following code:

 var NavigationCache = new Array(); $(document).ready(function(){ NavigationCache[window.location.pathname] = $('#content-inner').html(); history.pushState({page: window.location.pathname, type: "page"}, document.title, window.location.pathname); }); 

When the site loads, an array of pages will be created. As you may have noticed, the html-code of the current page is initially added to it. Each time you click on an ajax link, the page code will be written to this array.

Now you need to hang the handler on the browser navigation. The History event onpopstate event is responsible for this, here we will use the cache:

 window.onpopstate = function(event) { if (event.state.type.length > 0) { if (NavigationCache[event.state.page].length>0) { $('#content-inner').html(NavigationCache[event.state.page]); } } } 

This event will be triggered by clicking the buttons back and forth in the browser, all that is required of it is to insert the content from the cache into the # content-inner block when the user returns to the previous page.

What came out of all this?

So, our program, intercepts navigation by links with the class navigation-menu , loads only part of the page, writing it to the cache. Due to the fact that we do not reload the entire page, the site will simply work at lightning speed, and in order to return to the previous page, you don’t have to load anything at all. All that we do - just intercept clicks on the links, and load the right.

The entire navigator.js file looks like this:

 var NavigationCache = new Array(); $(document).ready(function(){ NavigationCache[window.location.pathname] = $('#content-inner').html(); history.pushState({page: window.location.pathname, type: "page"}, document.title, window.location.pathname); }); function setPage(page) { $.post(page, { ajaxLoad: true }, function(data){ $('#content-inner').html(data); NavigationCache[page] = data; history.pushState({page: page, type: "page"}, document.title, page); }) } $(document).ready(function(){ if (history.pushState) { window.onpopstate = function(event) { if (event.state.type.length > 0) { if (NavigationCache[event.state.page].length>0) { $('#content-inner').html(NavigationCache[event.state.page]); } } } $('.navigation-menu').live("click", function(){ setPage($(this).attr('href')); return false; }) } }) 

To translate a website to such an approach is quite simple. It is only necessary to work with the server part, and teach it to give a part or page as a whole, when the ajaxLoad parameter is and when it is not. Whether it is worth using ajax or not is a matter of thinking, but so far I have not seen a single minus in this approach.