My website (temporarily here if you're curious, W.I.P.) uses AJAX to navigate between pages.

 

I'm not an experienced web developer and I'm now wondering if using AJAX to navigate around the site was a good call. Personally, I like the idea of avoiding full page reloads every time I click a link. However when I look around the net it seems to me most websites don't use this sort of navigation.

 

I tried Google to find an answer but so many of the answers are dated a few years back that I don't know if they're still relevant.

 

I've heard it's bad for SEO. Is this really the case? Even if each page can have a unique URI and you're pushing the new URI into the history each time? Even if each page features tags and links to other articles (for the spiders to crawl?)

 

Are there other reasons to avoid it? What are the pros and cons of using AJAX for navigating on a site like I've done in the site above?

AJAX is rapidly becoming an integral part of several websites,
several well established brands online now use AJAX to handle their web
applications because it provides better interactivity to their users,
this is due to the fact that implementing AJAX on a website, does not
require a page to be reloaded for dynamic content on web pages. While
there are numerous reasons to switch to AJAX there are quite a few
matters that would make you reconsider using this combination of
technologies as well. Below are some of the advantages and disadvantages
of using AJAX.

 

Pros

• Better interactivity
  
  This is pretty much the most striking benefit behind why several
  developers and webmasters are switching to AJAX for their websites. AJAX
  allows easier and quicker interaction between user and website as pages
  are not reloaded for content to be displayed.
  
• Easier navigation
  
  AJAX applications on websites can be built to allow easier navigation to
  users in comparison to using the traditional back and forward button on
  a browser.
  
• Compact
  
  With AJAX, several multi purpose applications and features can be
  handled using a single web page, avoiding the need for clutter with
  several web pages.
  For our use of AJAX
  on
  goedkope-zomervakantie.com, it took just a few lines of code!
  
• Backed by reputed brands
  
  Another assuring reason to use AJAX on your websites is the fact that
  several complex web applications are handled using AJAX, Google Maps is
  the most impressive and obvious example, other powerful, popular scripts
  such as the vBulletin forum software has also incorporated AJAX into
  their latest version.

Cons

• The back and refresh button are rendered useless
  
  With AJAX, as all functions are loaded on a dynamic page without the
  page being reloaded or more importantly a URL being changed (except for a
  hash symbol maybe), clicking the back or refresh button would take you
  to an entirely different web page or to the beginning of what your
  dynamic web page was processing. This is the main drawback behind AJAX
  but fortunately with good programming skills this issue can be fixed.
  
• It is built on javascript
  
  While javascript is secure and has been heavily used by websites for a
  long period of time, a percentage of website surfers prefer to turn
  javascript functionality off on their browser rendering the AJAX
  application useless, a work around to this con is present as well, where
  the developer will need to code a parallel non-javascript version of
  the dynamic web page to cater to these users.

I use AJAX wherever possible there are a few drawbacks that DaisyOntas pointed out but these can be easily fixed.

 

Over the past year or so i am using JavaScript for most of the web applications i build, i just find it alot more flexible and easier to work with.

I use AJAX wherever possible there are a few drawbacks that DaisyOntas pointed out but these can be easily fixed.

 

Over the past year or so i am using JavaScript for most of the web applications i build, i just find it alot more flexible and easier to work with.

 

Please explain in more detail how exactly you propose 'easily fixing' the problem of one not enabling javascript? Dear sir, you would unequivocally have to code the standard method anyway therefore rendering the expended time on AJAX pointless.

 

For more scenarios, a standard navigation system would work splendidly and using AJAX is an unnecessary specification.

The usual condiderations about AJAX is to implement history and to make the content available (and indexable) for non js users (including most search engines and screen readers). On your site it looks like there is problems with both issues. But AJAX can really optimize the whole user experience. So if you can solve the problems then go for it

Please explain in more detail how exactly you propose 'easily fixing' the problem of one not enabling javascript? Dear sir, you would unequivocally have to code the standard method anyway therefore rendering the expended time on AJAX pointless.

 

For more scenarios, a standard navigation system would work splendidly and using AJAX is an unnecessary specification.

You can add a small script like this to replace all HTML links with AJAX links, if JS is disabled it will fall back on the default browser actions.

$(document).bind("click", "a", function (e) {
  e.preventDefault();
  $("#ajaxLoader").load($(this).attr("href")); // You could pass a GET variable here to determine that the page is loaded via AJAX
});

$("form").bind("submit", function (e) {
  e.preventDefault();

  var postData = {};

  $("input, select, textarea").each(function () {
    postData[$(this).attr('name')] = $(this).val();
  });

  if ($(this).attr("method") == "post") {
    $.post($(this).attr("action"), postData, function () {
      // Do something here maybe have a attribute something like data-ajax-action on the form tag that would be eval'd
    });
  } else if ($(this).attr("method") == "get") {
    $.get($(this).attr("action"), postData, function () {
      // Do something here maybe have a attribute something like data-ajax-action on the form tag that would be eval'd
    });
  }
});

Yes you would have to make a standard site, but it really isn't that much effort to add AJAX to a site to greatly improve the speed and usability of a website.

Edited July 10, 201412 yr by D4Y0