Is there a way to AJAX load a page and change URL in URL bar without hashing?

Question

This is probably going to get a resounding no, but I am wondering if it possible to have the URl change dynamically with using hashing, and without invoking a http request from the browser?

My client is keen on using AJAX for main navigation. This is fine, when the end user goes to the front page first, but when they want to use the deep linking, despite it working, it forces an extra load time as the page loads the front page, then invokes the AJAX from the hash.

UPDATE: Could it be possible, given that what I want to avoid is the page reload (the reason is that it looks bad) to stem the reload by catching the hash with PHP before the headers are sent, and redirecting before the page load. This way only one page loads, and the redirect is all but invisible to the user. Not sure how to do this, but seems like it is possible?

Answer 1

It's not a great answer, but you can offer a different link in the page itself; e.g., if the address bar shows /#xyz you include a link to /xyz somewhere in the page. You could also add a link or button that uses script to bookmark the page, which would again use the non-AJAX form of the link.

Answer 2

Yes, this is possible. I often do this to store state in the hash part of the URL. The result is that the page doesn't reload, but if the user does reload, they're taken to the right page.

Using this method, the URL will look like: "/index#page=home" or "/index#page=about"

You'll need to write a JavaScript function that handles navigation, and you'll need a containing div that gets rewritten with the contents fetched from AJAX.

<a href="javascript:void(0);" onClick="link('home')">Home</a>
<a href="javascript:void(0);" onClick="link('about')">About</a>
<a href="javascript:void(0);" onClick="link('questions')">Questions</a>
<div id="content"></div>

<script type="text/javascript">
   function link(page) {
      location.hash = "page="+page;
      loadPage(page);
   }

   // NOTE: This is using MooTools.  Use the AJAX method in whatever
   // JavaScript framework you're using.
   function loadPage(page) {
       new Request.HTML({
           url: "/ajax/"+page+".html",
           onSuccess: function(tree, elements, html) {
               document.id('content').setProperty('html', html);
           }
       }).get();
    }
</script>

Now, you'll also need to have something that checks the hash on page load to load the right content initially. Again, this is using MooTools, but use whatever onLoad method your JavaScript framework provides.

<script type="text/javascript">
    document.addEvent('domready', function() {
        parts = location.hash.split('=');
        loadPage(parts[1]);
    }
</script>

Answer 3

Ok, the problem is that opening an AJAX link of the form http://example.com/#xyz results in a full page being downloaded to the browser, and then the AJAX-altered content is changed once the page has loaded and checked the hash part of its URL. The user has a diconcerting experience.

You can hugely improve this by making a page that just contains the static elements - menus, etc. - and a loading GIF in the content area. This page checks its URL upon loading and dynamically fetches the content specified by the hash part. The page can have any URL you want; we'll use http://example.com/a. Links to this page (http://example.com/a#xyz) now provide a good user experience for users with scripting enabled.

However, new users won't come to the site by fetching http://example.com/a; they'll fetch http://example.com. This is fine - serve the full page, including the home page content and links that don't require scripting to work (e.g., http://example.com/xyz). A script run on loading this page should alter the href of AJAXable links to their AJAX form (http://example.com/a#xyz); thus the first link a user clicks on will result in a full page load but subsequent ones won't.

The only remaining problem is is a no-script user gets sent an AJAX link. You can add a noscript block to the AJAX page that contains a message explaining the problem and provides a link back to the homepage; you could include instructions on how to enable scripting or even how to modify the link by removing a# and pressing enter.