How to load a page without reloading it?

Possible Duplicate:
Modify the URL without reloading the page

I know the subject is a little bit odd.

When I go to http://www.heroku.com/how/relax and click other menus (Deploy, Connect, and...so on), I see that the browser changes its url, but it feels like Ajax.

What is this technique called?

---

This technique is called using javascript & DOM to change the content of the page with fadeIn() and [fadeOut()][2] animations (for jQuery).

For page location change:

You have to use HTML5's pushState() method to change browser history.

window.history.pushState(data, "Title", "/new-url");

Doc says:

pushState() takes three parameters: a state object, a title (which is currently ignored), and (optionally) a URL.

The last argument is the new URL. For security reasons you can only change the path of the URL, not the domain itself. The second argument is a description of the new state. And the first argument is some data that you might want to store along with the state.

---

It's likely using the pushState() API to handle the browser URL change to "fake" navigation. The new content can be preloaded or fetched over AJAX.

---

The offending code:

historyAPISupported : function(){
  return (typeof window.history.pushState !== 'undefined')
},

clickTab : function(tab){
  var humanTab = tab.replace('js-', '')
  var newUrl = document.location.pathname.replace(//(how.*)/, '/how/' + humanTab)
  this.activateTab(tab)
  if (this.historyAPISupported()){
    window.history.pushState({ path: newUrl }, null, newUrl)
  }else{
    if (document.location.pathname != newUrl){
      document.location.href = document.location.href.replace(//(how.*)/, '/how/' + humanTab)
    }
  }
},

Best I can tell it still uses anchors, but takes advantage of the browser history to make changes (You can quickly see your "progress" bar show a hash of the location, yet browser url changes).

Besides all of this, the contents are loaded right from the start and the contents are just faded in and out of view.

Regarding the actual question, I don't think there's a specific name for it. AJAX is loading content behind-the-scenes, transitions makes the visual effects, and some crafty JS makes the link appear to change.

链接地址: http://www.djcxy.com/p/70296.html

上一篇: 如何更改网址而无需重新加载？

下一篇: 如何加载页面而不重新加载？