Why is the hash part of the URL not available on the server side?

For example if I type in the URL:

http://www.foo.com/page.php?parameter=kickme#MOREURL

Then on the server there is no part: #MOREURL

Is possible to send or get these part to the server without jQuery AJAX?.

Answers:

Answer

No, it is available to the browser only, so you have to deal it with Javascript. The server can not read it.

Explanation:
Basically the hash component of the page URL (the part following the # sign) is processed by the browser only - the browser never passes it to the server. This sadly is part of the HTML standard and is the same whether or not you are using IE or any other browser (and for that matter PHP or any other server side technology).

Here's what Wikipedia says about it:

The fragment identifier functions differently than the rest of the URI: namely, its processing is exclusively client-side with no participation from the server. 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 fragment value. In the most common case, the agent scrolls a Web page down to the anchor element which has an attribute string equal to the fragment value. Other client behaviors are possible

Answer

http://tools.ietf.org/html/rfc2396#section-4

When a URI reference is used to perform a retrieval action on the identified resource, the optional fragment identifier, separated from the URI by a crosshatch ("#") character, consists of additional reference information to be interpreted by the user agent after the retrieval action has been successfully completed. As such, it is not part of a URI, but is often used in conjunction with a URI.

Answer

I would like to extend the answer on the reason WHY the fragment is not sent to the server. Because it is intentional and desired behavior. Let's look at URL string in whole.

/path/to/element?query=string&for=server#?optional=fragment&for=browser <----- URI ----> <---- QUERY STRING ---> <----- FRAGMENT STRING ------>

URI uniquely specifies resource fetched from a server

QUERY defines operations to be performed by the server on the resource

FRAGMENT controls browser (application) behavior. Fragment should be used to store application state which should be visible to the user so the user can send link to another user to get the same application state.

Fragment is the only part of URL free for you to transparently implement single-page web applications (which can run offline on your mobile phone for example). Therefore it must not be sent to the server.

Answer

As the browser does not send the hash to the server by default, the only way to do it is to use some Javascript:

  1. When the form submits, grab the hash (window.location.hash) and store it in a server-side hidden input field Put this in a DIV with an id of "urlhash" so we can find it easily later.

  2. On the server you can use this value if you need to do something with it. You can even change it if you need to.

  3. On page load on the client, check the value of this this hidden field. You will want to find it by the DIV it is contained in as the auto-generated ID won't be known. Yes, you could do some trickery here with .ClientID but we found it simpler to just use the wrapper DIV as it allows all this Javascript to live in an external file and be used in a generic fashion.

  4. If the hidden input field has a valid value, set that as the URL hash (window.locaion.hash again) and/or perform other actions.

We used jQuery to simplify the selecting of the field, etc... all in all it ends up being a few jQuery calls, one to save the value, and another to restore it.

Before submit:

$("form").submit(function() {
  $("input", "#urlhash").val(window.location.hash);
});

On page load:

var hashVal = $("input", "#urlhash").val();
if (IsHashValid(hashVal)) {
  window.location.hash = hashVal;
}

IsHashValid() can check for "undefined" or other things you don't want to handle.

Also, make sure you use $(document).ready() appropriately, of course.

Answer

The hash component is not passed on to the server but it is extensively used on the client side. Specifically, in single page applications, the text following a hash is used to represent state of the application as different routes. Thus, what happens is: following an initial request to the server which serves the 'home' page along with additional js files which include client-side routing logic such as the router, whenever the user navigates anywhere on the page by clicking an anchor tag, only the part of the URL following the hash component is changed. This prevents a GET request to the server and in response to this 'onhashchange' event, the content of the single page application can be updated depending on the exact route.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.