AJAX - The Complete Reference

460 Part II: Developing an Ajax Library^

But what do you do about the user who hits the bookmark or just copies and pastes the

URL? This solution doesn’t work for them. Of course those might be considered not-so-

bright users, but don’t forget the least bright user of all: the search bot. If we want a search

bot to come into our Ajaxified site or application, we have to acknowledge two facts. First,

the bot will likely not run JavaScript so we will need to embrace a traditional pattern to fall

back to. Second, the bot needs to record a URL so whatever we fall back to has to have

uniquely changing URLs for recording.

With all these problems, it seems like we should just stop trying to change the atomic

principles of Web architecture and embrace allowing the URL to change. However, if

JavaScript is used to change the URL, won’t we incur the full page screen refresh that Ajax

developers are working so hard to rid the Web of? Yes, unless all that is changed in our

application is the fragment identifier; in other words, the part after the filename proceeded

by the hash symbol like so:

http://ajaxref.com/ch9/photoviewer.html#Kids

http://ajaxref.com/ch9/photoviewer.html#crab_shack.jpg

http://ajaxref.com/ch9/photoviewer.html#the_boys.jpg

You could consider using a directory separator on the right side of the # symbol like so:

http://ajaxref.com/ch9/photoviewer.html#Kids

http://ajaxref.com/ch9/photoviewer.html#Kids/crab_shack.jpg

http://ajaxref.com/ch9/photoviewer.html#Pets/the_boys.jpg

Which way you choose is up to you. Certainly there are arguments for both, short and

sweet versus more directory path–like. The solution we present will allow you to choose

whichever scheme you like.

NNOT EOTE By using the # symbol as the selector, we run into the problem of obscuring or even taking

away the intended use of the symbol to jump to locations within document.

To change the URL hash in JavaScript, you can do so quite easily just using:

window.location.hash = "newState";

which will then set the location to:

http://ajaxref.com/ch9/photoviewer.html#newState

We could imagine changing the hash mark every time that we issue a request then, but

that might not be such a good idea. For example, consider the search suggestion widget at

the start of the chapter. We wouldn’t want to add each individual keystroke as a history

entry, would we?

Before reading the next few pages, we should issue a stern warning: you are about to

see a lot of nasty code with workarounds and browser oddities. If you would rather just get

the idea of how the history system works conceptually and then examine some applications

that use it, skip forward to Figure 9-10.

After the warning, are you still here? We guess you figured out that just changing the

hash mark won’t be enough to solve our history problems. First, understand that while