Navigating to pushState URL

Question

I am using window.history.pushState to set friendly-links for articles. For example there are different categories with articles and links become like this myweb.com/category/java/variables .

The problem with pushState is that you cant bookmark them, getting 404 not found when navigating to a pushState generated URL like the one above.

Im using java as server-side without any frameworks, and I woudnt like to use any if possible, doing most things in javascript and heavy use of AJAX with jQuery.

To solve this, I used http://tuckey.org/urlrewrite/ url-rewrite library setting up as following:

<urlrewrite>
<rule>
    <from>^/intro</from> 
    <to type="redirect">http://localhost:8084/myweb.com/w?uri=intro</to>  
</rule>


<rule>
    <from>^/category/(.*)/(.*)</from> 
    <to type="redirect">http://localhost:8084/myweb.com/w?uri=category:$1:$2</to> 
</rule>
</urlrewrite>

The servlet w does a very simple thing, it just redirects to index:

request.getRequestDispatcher("/index.jsp").forward(request, response);

So when a user navigates to myweb.com/category/java/variables the URL will get rewriten to http://localhost:8084/myweb.com/w?uri=category:java:variables , now at this point we are on index.jsp, not on the page we bookmarked.

To solve this I run a script when the page loads:

href = window.location.href;
href = href.replace(/:/g,'/');
if(contains(href, "w?uri=")){
    pageRequest = href.split("=")[1];
    urlMap(pageRequest);
}

This gets the page of interest and forwards it to urlMap which handles all urls (i simplified the next method, it is however more generic):

function urlMap(href){
    if(href==="category/java/variables"){
    //here we do an ajax request to the server to get the content of the article. 
    //and also update the navbar url 
    window.history.pushState(state, title, "category/java/variables");

This works correctly but there is a slight flash in the browser navbar, when writing category/java/variables after pressing enter the url turns w?uri=category:java:variables for like 100 miliseconds then turns back to category/java/variables ... Is there a better way of doing this?

And few other questions that could make this easier:

1. Is it possible to catch category/java/variables in javaScript instead of server, or how to pass it in a better way ?

2. Is it possible to make rules without redirection loop? Something like this:

    <rule> <from>^/intro</from> <to type="redirect">http://localhost:8084/myweb.com/intro</to> </rule> 

   or

    <rule> <from>^/category/(.*)/(.*)</from> <to type="redirect">http://localhost:8084/myweb.com/category/$1/$2</to> </rule> 

Answer 1

I could successfully map the urls as I wanted, without flashes and strange url changes, so for this i did the next:

1- Change the rules to this:

<rule>
    <from>^/intro</from> 
    <to>w?page=intro</to>  
</rule>

<rule>
    <from>^/([a-z]+)/([a-z]+)$</from>
    <to>/w?category=$1&amp;article=$2</to>
</rule>

Removed the type="redirect" as this would change the navbar url. As it is now it passes the <to> url as a ghost request.

2- In the servlet set a cookie like category=java and another cookie like post=variables . Assuming the from is like myweb.com/java/variables . Then forward to index.

3- The first thing when website loads is tell javaScript to check the cookie and get the url reference like /java/variables then pushState the new url, even tough its not necessary.