how to make a webpage that seems to not 'reload'

Question

I was looking at this website http://bountii.com/search.php?item=router

and I've looked at other sites which work in similar manner.

The page has many filters provided for example: price range, popularity etc. But when these filters are performed it looks like only some section of the webpage is loaded rather than the whole page. This doesnt seem to be using ajax as it is sending the whole request back to the server (search.php page).

It doesnt seem to be using technique mentioned on this page http://nettuts.s3.amazonaws.com/196_jquery/index.htm where they are just editing the CSS to not display some links.

I am curious as to how this works. Any thoughts?

Answer 1

It's just reloading very fast. There is not any Javascript on that entire page. The HTML is well formed and the page is very simplistic.

Answer 2

If you want to see what's going on, do this:

1. Install firefox if you're not already using it
2. Install the firebug extension
3. Go to the website you're interested in, and click the little firebug icon (in the status-bar at the bottom right, it's a small bug), and enable all the firebug options for that site
4. Reload the webpage and click around
5. Look at the different firebug panels. It will trace all the network requests (XHR or otherwise) and you can snoop around and have a look.

Answer 3

It might be requesting new data through Ajax, populating a hidden <div> element, and then replacing the visible <div> with the hidden one.

Answer 4

it is probably using the Javascript XMLhttprequest. Facebook and a lot of other websites use this. It makes a trip to the server without reloading the whole page.

Here is an example from w3schools.com:

<script type="text/javascript">

var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
  {// code for all new browsers
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code for IE5 and IE6
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=state_Change;
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
}

function state_Change()
{
if (xmlhttp.readyState==4)
  {// 4 = "loaded"
  if (xmlhttp.status==200)
    {// 200 = OK
    // ...our code here...
    }
  else
    {
    alert("Problem retrieving XML data");
    }
  }
}
</script>

Answer 5

Possibly browser optimization and cache plays a role in addition to just loading fast. I've got it to look like it did a page load a few times by alternating page refreshes with clicking on links.

Just tried it in IE and every click I can see a visible reload. In Chrome it doesn't look like there's any refresh, I'm guessing because of browser optimization. I know in Chrome if you switch between 2 tabs with the same content it doesn't even redraw anything.