Ajax采用HTML5的History API

  HTML5 History
API提供了一致种植效应,能叫开发人员在未刷新整个页面的状态下修改站点的URL。这个效应特别有因此,例如通过平等段子JavaScript代码局部加载页面的内容,你期望经过变更目前页面的URL来影响出页面内容之别,这时该意义可派上用场。

  举个例子,当用户从首页上帮助页面时,我们通过Ajax来加载帮助页面的情节。然后这个用户同时转移至产品页面,我们需要更同不好经过Ajax请求来替换页面的情。当用户想分享页面的URL时,通过History
API,我们可以改变页面的URL来反应内容的改,这样不管是用户享受要封存之URL都能及页面的情对应起来。

基本知识

  要翻看此API提供了如何职能非常简单,打开浏览器的Developer
Tools工具面板,然后以console中输入history。如果您的浏览器支持History
API,你将会晤看是目标下附带了过多办法。

Ajax 1

  注意其中的pushStatereplaceState立即半只章程。我们得以当console中开展一些大概的测试,来探视当我们使用即时点儿只方法时URL会发生啊变动。稍后咱们将分析这有限单点子被之具备参数,现在我们仅待关怀最终一个参数:

history.replaceState(null, null, 'hello');

  上面代码中之replaceState计改变了当前页面的URL,在后头加加了一个’/hello’。不过并不曾生出任何request请求,当前窗口还是留于前头的页面。不过这里发出个问题,当您点击浏览器的落后按钮时,页面并无见面回退到我们透过replaceState艺术修改前的酷URL,而是径直回退到了高达一个页面(即我们进到这个页面之前的慌页面)。这是坐replaceState术无见面改浏览器的history,它只是略地更迭了地址栏中之URL。

  要缓解此问题我们要利用pushState方法:

history.pushState(null, null, 'hello');

  现在再次点击浏览器的后退按钮,你见面发觉她同公预想的意义等同。因为pushState计以我们传给它的URL添加到浏览器的history中,从而改变了浏览器的history。假如我们用另外一个完的站点URL传递让它们会生出啊动静吗?例如我们在baidu.com的首页进行测试,然后在console中输入下面的内容。

history.pushState(null, null, 'https://twitter.com/hello');

  浏览器会报错。因为传递给pushState办法的URl必须同目前页面的URL属于同一个源于(即未可知跨域),否则会起非常挺之安全漏洞,开发人员可能会见借该功能来欺骗用户,让她们以为自己是于拜访一个了两样的站点,而真相并非如此。

  来探视传递让pushState主意的享有参数:

history.pushState([data], [title], [url]);
  1. 首先单参数用来传递我们要之数目,当页面的状态发生变化时我们得接过至该数量。如用户点击浏览器的滞后和前进按钮。需要专注的是在Firefox中独允许传递最多640K的数目。
  2. 老二个参数title是一个字符串,不过了至眼前,几乎所有的浏览器还忽略该参数。
  3. 末尾一个参数是咱们纪念要替换的URL。

简易回顾一下

  这些History
API最要的功能就是勿又加载页面。以往咱们只能通过转window.location的值来窜时页面的URL,不过就会招整个页面被再度加载。如果你改改的不过是URL中之hash,则非见面招致页面被刷新。 

  使用初的hashbang艺术好转移页面的URL而无刷新页面。著名的Twitter就是使用的欠方式,不过为广受诟病,毕竟hash在location中连无让当一个真正的资源来比。

  作为History
API的头支持者,Twitter后来委了传统的hashbang方式。在2012年,Twitter的集团介绍了他们的新方法,并列出了里的局部问题而还详细地介绍了各级浏览器应该如何实现该专业。

一个行使pushState和Ajax的例子

https://css-tricks.com/examples/State/

  以该示例中,我们意在用户通过我们的网站找到电影捉鬼敢死队(一管辖美国影片)中之艺人。当用户挑选一个图时,我们要以人间显示该演员对应之文字描述,同时让该图一个为入选的作用。当点击后低落按钮时,页面应该切换至上一个受入选的图状态,同时图片下方的字吗要平等并切换。当点击前进按钮时为同。

  这里来一个效应图:

Ajax 2

  这个示例的HTML代码非常简单:div.gallery中包含了拥有的链接,每个链接里发生一个图。接下来我们放了一个空的div.content,用来存放在当艺人图片被点击时展示在放的契。

<div class="gallery">
  <a href="https://cdn.css-tricks.com/peter.html">
    <img src="bill.png" alt="Peter" class="peter" data-name="peter">
  </a>
  <a href="https://cdn.css-tricks.com/ray.html">
    <img src="ray.png" alt="Ray" class="ray" data-name="ray">
  </a>
  <a href="https://cdn.css-tricks.com/egon.html">
    <img src="egon.png" alt="Egon" class="egon" data-name="egon">
  </a>
  <a href="https://cdn.css-tricks.com/winston.html">
    <img src="winston.png" alt="Winston" class="winston" data-name="winston">
  </a>
</div>

<p class="selected">Ghostbusters</p>
<p class="highlight"></p>

<div class="content"></div>

  如果没JavaScript该页面还可健康办事,点击图片可以跨反至对应之页面,然后点击后回落按钮也可返回之前的页面。这是为考虑页面的可访问行和雅降级。

  接下我们而填补加JavaScript代码了。我们由此event
propagation
为div.gallery元素中的各一个link添加一个事件处理程序,像这样:

var container = document.querySelector('.gallery');

container.addEventListener('click', function(e) {
  if (e.target != e.currentTarget) {
    e.preventDefault();
    // e.target is the image inside the link we just clicked.
  }
  e.stopPropagation();
}, false);

  于if语句中,我们得到到让入选图片的data-name属性的价,然后将’.html’添加到后拼成一个只要拜访的页面地址,并拿其看成第三个参数传递给pushState道(不过当实的例证中我们可能会见以Ajax请求成功之后才见面失掉修改URL)。

var data = e.target.getAttribute('data-name'),
url = data + ".html";
history.pushState(null, null, url);

// 此处更改当前的classes样式
// 然后使用data变量的值更新
// 并通过Ajax请求.content元素的内容
// 最后再更新当前文档的title

(当然,此处我们吧得以一直行使link的href属性的值)

  我拿忠实代码中之始末都替换成注释了,这样我们得独自关注pushState措施的利用。

  现在我们点击图片,URL和Ajax请求的始末会吃自动更新,但是当我们点击后下降仍钮时连无见面回退到前入选的扮演者图片。这里我们还需以用户点击后下降以及发展按钮时利用另外一个Ajax请求来更新内容,并再度同涂鸦用pushState主意来更新页面的URL。

  我们利用pushState术吃之首先独参数(其中的state)来保存状态信息:

history.pushState(data, null, url);

  上面代码中之data参数在popstate事件触发时可以给获到。当浏览器的落伍和升华按钮被点击时见面接触popstate事件。

window.addEventListener('popstate', function(e) {
  // e.state表示上一个被点击的图片的data-attribute
});

  我们好透过该参数传递一些我们要的信,例如当该示例被我们以事先入选的捉鬼敢死队的艺人作为参数传递给requestContent方法,在拖欠方法被,我们运用jQuery的load方法开展同样差Ajax请求。

function requestContent(file) {
  $('.content').load(file + ' .content');
}

window.addEventListener('popstate', function(e) {
  var character = e.state;

  if (character == null) {
    removeCurrentClass();
    textWrapper.innerHTML = " ";
    content.innerHTML = " ";
    document.title = defaultTitle;
  } else {
      updateText(character);
      requestContent(character + ".html");
      addCurrentClass(character);
      document.title = "Ghostbuster | " + character;
  }
});

  如果用户点击了演员Ray的图,event
listener会被点,然后在pushState事件备受保留图片的data属性的价值。当用户点击另外一个图形,并点击了浏览器的向下按钮,此时popstate事件会被触发,从而再次加载ray.html页面。

  这代表什么为?当我们点击一个优的图然后以于重新改之URL分享出去,用户访问是URL时对应之HTML文件会为自动加载进来。这会带来一些复好的用户体验,并包了URL和页面内容的一致性从而减少了用而带为用户的部分困惑。

  上面的以身作则只是简短地经过jQuery来动态加载内容,我们自然也得以pushState计吃传递一些更错综复杂的目标。不过这事例已经会足够说明问题并帮我们开读书如何运用History
API的效力。我们先要学会走,然后才会跑。

下一步

  如果我们怀念煞范围地动用这种技能,我们当考虑采取部分专有的家伙,例如pjax。 它是一个jQuery的插件,使用其好大大提高我们同时以Ajax和pushState方进行付出之快慢,不过她只是支持那些以History
API接口的现代浏览器。

  History
JS
好兼容旧浏览器,对于无支持History
API接口的浏览器,它依旧采取原来的URL hash的章程来兑现平等的意义。

有关URLs

  这里我特意引用了Kyle Neath有关URLs的证实:

URLs是一个通用的定义,它好干活于Firefox, Chrome, Safari, Internet
Explorer, curl, wget,甚至于你的iPhone,
Android以及虽签纸上。它是web中之一个通用的语法。不要觉得就是自的。任何一个稍微懂点技术之用户都好浏览你的下之90%上述之组成部分如无用失去刻意记住那些URL的布局。要促成这样的功能,你需要考虑URLs的实用性。

  这意味着不管你想使拓展哪些的hacks或性能优化,作为web开发人员,你该讲究URL。而随着HTML5
History API的拉,我们可轻松地化解诸如上述示范中的有题材。

科普问题

  • 拿Ajax请求的地方嵌入到a标记的href属性中便是只对的呼吁。
  • 管教于JavaScript的click事件处理程序中return
    true,这样当有人利用中键点击或指令点击时莫会见招程序为意外覆盖。

补充

  • Mozilla有关操作浏览器history的文档
  • Ajax示例集锦Dive into
    HTML5
  • Twitter有关pushState的实现

浏览器支持

Chrome Safari Firefox Opera IE Android iOS
31+ 7.1+ 34+ 11.50+ 10+ 4.3+ 7.1+

原文地址:https://css-tricks.com/using-the-html5-history-api/

相关文章