Deep Linking in JavaScript and Ajax Applications

Last week I posted a tutorial that demonstrated using a simple application how to implement progressive enhancement into your Ajax projects. The one major flaw in the final Ajax-driven page from that tutorial is the lack of deep linking when JavaScript is enabled.

Although the resulting code is clean, works well, and is easy to maintain, the lack of deep linking is enough to cause a client to balk at the use of progressive enhancement in such a circumstance. So, in this brief tutorial, I’ll describe how to incorporate deep linking into that page.

If you haven’t already gone through the previous tutorial, doing so might help you get up to speed — but it’s not absolutely necessary, since the code we’ll be using is pretty straightforward.

Step 1: Review the Primary Function From the Previous Tutorial

The final JavaScript code from the previous tutorial included a function called getEmployeeInfo, which is the primary piece of code we’ll be working with in this tutorial. Here is that function:

function getEmployeeInfo() {

  var myLinksCollection = document.getElementsByTagName("a");
  
  for (i=0;i<myLinksCollection.length;i++) {
    myLinksCollection[i].onclick = function() {
      if (this.href.indexOf("view=") !== -1) {
        var clickedHREF = this.href;
        var clickedView = clickedHREF.split("view=");
        ajaxInitiate(clickedView[1]+'.html');
        return false;
      }
    }
  }

}

We’ll be adding a few lines of code to the above function in order to implement deep linking into this application.

Step 2: Add the Hash Character to the URL

In order to deep link to a particular state in the application, we want to utilize the hash character (#), using it to append an identifier to the URL of the page. JavaScript lets us access the current hash using the following line of code:

location.hash = "identifier";

That line can be added anywhere inside the anonymous function, and that will add a hash to the current URL, followed by the word “identifier”, without reloading the page. If a hash already exists, the text following the hash will be changed to “identifier”. The hash character makes the link internal, preventing a page refresh, the same way this would occur in an href value of an anchor tag. Of course, we don’t want to just put any old text in there, but place some text that will help us identify the state of the Ajax application.

In the anonymous function, the current state is identified by the clickedView array, so we can use that to append an identifier to the current URL, like this:

location.hash = clickedView[1];

Let’s take a look at how the page works after adding that line to the code:

Demo Page #1

Now the content is loading correctly, and each time a link is clicked, the value following the hash character in the URL is changed, helping us identify what state the application is in.

Step 3: Change Content According to the Current State

Now that the application is appending a state identifier to the current URL, we need to check to see if that identifier exists, and display the correct information. Here’s the code that will accomplish this:

if (location.hash) {
    ajaxInitiate(location.hash.replace("#","")+'.html');
  }

It’s pretty simple: We check to see if the “hash” character exists. If it does, then we call the ajaxInitiate function with the hash text as the file name that’s passed as an argument. Since the location.hash property includes the actual hash symbol (#), we’re using the replace method to strip out the hash and get a clean file name.

The above code is added before the loop in the getEmployeeInfo function, so the complete function now looks like this:

function getEmployeeInfo() {

  if (location.hash) {
    ajaxInitiate(location.hash.replace("#","")+'.html');
  }

  var myLinksCollection = document.getElementsByTagName("a");

  for (i=0;i<myLinksCollection.length;i++) {
    myLinksCollection[i].onclick = function() {
      if (this.href.indexOf("view=") !== -1) {
        var clickedHREF = this.href;
        var clickedView = clickedHREF.split("view=");
        ajaxInitiate(clickedView[1]+'.html');
        location.hash = clickedView[1];
        return false;
      }
    }
  }

}

Drawbacks to this Method

There are two drawbacks to this method. One small drawback is that the content does not change if the URL is manually altered after the initial page view. The hash character will only affect the page’s content on the first page view, when the entire page is initially loaded. But that’s not a big deal, since the content can easily be changed by clicking any of the links after the initial page view. The only time we’re really concerned about the state of the hash tag is on the initial page load, so it works fine in that respect.

The other drawback is that this method does not preserve the back button. You’ll notice that if you use the back button to try to visit a previous state, the URL will change, but the content is not affected. This happens because the URL change is only internal, and does not initiate a full page refresh. Preserving the back button in Ajax applications is a more complicated process that is beyond the scope of this simple tutorial.

Conclusion

And that’s it, our application now has deep linking, and works in virtually the same way as the PHP-only version, aside from the drawbacks mentioned above.

Use the links below to view the final demo page, or download the complete code, including the code from the previous tutorial. The link to the demo page includes a hash identifier, so you can see how the code works.