AjaxAjax和pushState

众所周知,Ajax可以实现网页的有的刷新,但同时,Ajax将损坏浏览器历史之进步与滞后。为了让Ajax能够支持浏览器的向上与落后,HTML5的历史
API中定义了平组方法,其中pushState用于缓解是问题。

看望这些API

  1. history.pushState(state,title,url)
    pushState的
    手动插入历史记录并修改地址栏。此时,虽然改了地址栏,但它不会见硌页面跳转。换句话说,它是若瞧底。第一个参数是一个靶,可以输入所用的参数。第二独标题名称,第三个是网址。这是地点栏中形的情。
  2. Window.onpopstate
    用户单击浏览器历史记录前进与滞后按钮,当页面无刷时(由于应用pushState修改了历史记录),将触发popstate事件。当事件有常,浏览器将于历史记录中检索URL和相应的状态对象,以替换当前的URL和历史记录。 。州。
  3. history.replaceState(州,标题,URL)
    于是新状态和URL替换当前。不见面造成页面刷新。
    状态:与如跳反至之URL对应之状态信息。
    标题:标题
    Url:要超越反到的网址,不可知跨域。

推行规范如下:

  • 老是启动Ajax请求时,Ajax地址之询问内容(在?后面)都见面增大到HTML页面地址,而history.pushState用于粘贴到浏览器历史记录中。
  • 浏览器的提高与倒退将触发window.onpopstate事件。通过绑定popstate事件,可以根据目前URL地址被之询问内容,使用Ajax加载相应的菜系,并且可兑现Ajax前为同后朝着效应。
  • 首软加载页面时,如果无询问地址,或询问地址不配合,则运用第一个菜单的Ajax地址的查询内容,并采取history.replaceState更改当前浏览器历史记录,然后Ajax操作让点。

另外,单页应用程序处理路由于还得监听onhashchange事件,只要哈希值更改为点发事件即可。 Angular的路由机制下了马上半只挑选。


迎关注本身之博客:http://voidman.xyz

相关文章