|
Using URL hashes to control AJAX requests |
||||||||
Following on from my previous article here (http://www.mccran.co.uk/index.cfm/2011/10/17/Adding-hash-values-into-URLs--The-basics) this article deals with injecting Hash values into URL's and using them to power AJAX requests.
Starting with the code of the previous article I'll expand it to include an AJAX request based on the Hash inserted into the URL.
As in the code used previously I'll start off with a list of items. Each of these items is attached to a JQuery selector but also still has a normal hyperlink. This ensures that the link will still work if the user is not using JavaScript.
2 <li><a href="home.cfm" class="ajax-link" id="home">Home</a></li>
3 <li><a href="about.cfm" class="ajax-link" id="about">About</a></li>
4 <li><a href="buy.cfm" class="ajax-link" id="buy">Buy</a></li>
5 <li><a href="contact.cfm" class="ajax-link" id="contact">Contact</a></li>
6</ul>
Next create a JQuery selector that is watching for click events on anything with a class of 'ajax-link'. The function below will pull out the id attribute of the clicked object, then push that value into the URL as a hash value.
Next we stop the default behaviour of the hyperlink (IE stop it moving the user to the page) and perform some simple manipulation. All I'm doing here is adding a 'cfm' string to the end of the value.
Lastly push this value into a standard AJAX request, this will basically fetch the page and handle the response by injecting the returned page content into the designated div element.
2 $(document).ready(function() {
3
4 // click event listener
5 $('.ajax-link').click(function(event) {
6
7 // get the id
8 var clickedLink = $(this).attr('id');
9
10 // push it into the url
11 location.hash = clickedLink;
12
13 // debugging alert
14 //alert(clickedLink);
15
16 // stop the regular href
17 event.preventDefault();
18
19 var remoteurl = clickedLink + '.cfm';
20
21 $.ajax({
22 url: remoteurl,
23 success: function(data, textStatus){
24 $('#injected-content').html(data);
25 }
26 });
27
28 });
29
30 });
31</script>
32<div id="injected-content" class="injected-content-holder"></div>
There is an example of this working here: http://www. mccran/examples/jquery-url-hashes-ajax-request/
Is there a specific reason why to add hash to the url?
Also, is there a reason why you append .cfm to the ajax url when you could get the value from the href.
Adding hash values to urls can be handy for a number of reasons, you could use them as in this case to denote a string separator, where the right hand side is a variable to be used in other JavaScript functions, this is handy for analytics tracking as well. The other point with them is that they inform the browser not to cause a page load. Ie the user isn't actually pushed to a new url they stay where they are.
I'm appending '.cfm' here just to demonstrate that you can manipulate the value easily. Where I've used this in recent real world projects I've performed much more complicated regex pattern matching here to retrieve content from a more elaborate folder structure.
I'm treating this very much like a client side way of coding SES urls using javascript instead of a server side htaccess file.
If using ajax, the browser wouldn't refresh anyway. As for SES, nope just can't see how this would help if relying on Javascript, since robots don't do ajax.
If I don't create a unique URL in some way users cannot bookmark the current state of the page.
You are right about the fact that emulating SES in JavaScript isn't valid for Search engines or Robots.txt files. What it is valid for though is showing users where they are.
The idea here is to build ULR's that actually show users where they are. Doing it this way ensures that there is a clear heirarchy present in the URL and that users can see it.
Anyway, that aside, there is a newer method of doing this now (although the hash method acts as a fallback for older browesers) - I suggest you get up to speed with "window.history.pushState".
You are right, I probably could have explained the logic behind the post a little more, I plan on doing that in the next post about this subject, where I ditch this approach altogether and build JavaScript watcher functions to monitor URL changes.
In terms of the newer methods of doing this I've assessed them, there was a fair bit of research into this technology before myself and my team started the project where this is used. Unfortunately there are too many issues about browser compatibility and technology compliance.
Both of these links sum up some of the html 5 issues nicely.
http://www.battlehorse.net/page/2011/02/12/html5hi...
http://www.adequatelygood.com/2010/7/Saner-HTML5-H...
http://www.facebookentrardiretoagora.com/facebook-... | http://www.facebookenespanoldescargar.com/facebook...