html - what is the # symbol in the url

Question

I went to some photo sharing site, so when I click the photo, it direct me to a url like

www.example.com/photoshare.php?photoid=1234445

. and when I click the other photo in this page the url become

www.example.com/photoshare.php?photoid=1234445#3338901

and if I click other photos in the same page, the only the number behind # changes. Same as the pretty photo like

www.example.com/photoshare.php?album=holiday#!prettyPhoto[gallery2]/2/

.I assume they used ajax because the whole page seems not loaded, but the url is changed.

Answer 1

The portion of a URL (including and) following the # is the fragment identifier. It is special from the rest of the URL. The key to remember is "client-side only" (of course, a client could choose to send it to the server ... just not as a fragment identifier):

The fragment identifier functions differently than the rest of the URI: namely, its processing is exclusively client-side with no participation from the server — of course the server typically helps to determine the MIME type, and the MIME type determines the processing of fragments. When an agent (such as a Web browser) requests a resource from a Web server, the agent sends the URI to the server, but does not send the fragment. Instead, the agent waits for the server to send the resource, and then the agent processes the resource according to the document type and fragment value.

This can be used to navigate to "anchor" links, like: http://en.wikipedia.org/wiki/Fragment_identifier#Basics (note how it goes the "Basics" section).

While this used to just go to "anchors" in the past, it is now used to store navigatable state in many JavaScript-powered sites -- gmail makes heavy use of it, for instance. And, as is the case here, there is some "photoshare" JavaScript that also makes use of the fragment identifier for state/navigation.

Thus, as suspected, the JavaScript "captures" the fragment (sometimes called "hash") changing and performs AJAX (or other background task) to update the page. The page itself is not reloaded when the fragment changes because the URL still refers to the same server resource (the part of the URL before the fragment identifier).

Newer browsers support the onhashchange event but monitoring has been supported for a long time by various polling techniques.

Happy coding.