局部刷新之姿势研究

HTML5引进了history.pushState()方法和history.replaceState()方法，它们允许你逐条地添加和修改历史记录条目。这些方法可以协同window.onpopstate事件一起工作。

pushState()有三个参数：一个状态对象、一个标题（现在会被忽略），一个可选的URL地址。下面来单独考察这三个参数的细节：

状态对象（state object） — 一个JavaScript对象，与用pushState()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态，popstate事件都会被触发，并且事件对象的state属性都包含历史记录条目的状态对象的拷贝。


标题（title） — FireFox浏览器目前会忽略该参数，虽然以后可能会用上。考虑到未来可能会对该方法进行修改，传一个空字符串会比较安全。或者，你也可以传入一个简短的标题，标明将要进入的状态。

地址（URL） — 新的历史记录条目的地址。浏览器不会在调用pushState()方法后加载该地址，但之后，可能会试图加载，例如用户重启浏览器。新的URL不一定是绝对路径；如果是相对路径，它将以当前URL为基准；传入的URL与当前URL应该是同源的，否则，pushState()会抛出异常。该参数是可选的；不指定的话则为文档当前URL。

新的URL可以是任意的同源URL，与此相反，使用window.location方法时，只有仅修改 hash 才能保证停留在相同的document中。
根据个人需要来决定是否修改URL。相反，设置window.location='#foo'，只有在当前hash值不是foo时才创建一条新历史记录。
你可以在新的历史记录条目中添加抽象数据。如果使用基于hash的方法，你只能把相关数据转码成一个很短的字符串。

history.replaceState()操作类似于history.pushState()，不同之处在于replaceState()方法会修改当前历史记录条目而并非创建新的条目。

当你为了响应用户的某些操作，而要更新当前历史记录条目的状态对象或URL时，使用replaceState()方法会特别合适。

pjax是对ajax + pushState的封装，让你可以很方便的使用pushState技术。

同时支持了缓存和本地存储，下次访问的时候直接读取本地数据，无需在次访问。

并且展现方式支持动画技术，可以使用系统自带的动画方式，也可以自定义动画展现方式。

html：

  <div id="ajax-links">
    <ul>
      <li><a href="http://192.168.2.115:8888/plugin/samples/ajax/1.html">load 1.html</a></li>
      <li><a href="http://192.168.2.115:8888/plugin/samples/ajax/2.html">load 2.html</a></li>
      <li><a href="http://192.168.2.115:8888/plugin/samples/ajax/3.html">load 2333.html</a></li>
    </ul>
    <div id="content"></div>
    <hr />
  </div>
  
js:

jQuery(document).ready(function($) {
	function load(num) {
	  $('#content').load(num);
	}
	
	$.history.init(function(url) {
	      load(url == "" ? "1" : url);
	  });
	
	$('#ajax-links a').live('click', function(e) {
	      var url = $(this).attr('href');
	      console.log(url);
	      url = url.replace(/^.*#/, '');
	      $.history.load(url);
	      return false;
	  });
});

  //原来是对Url处理 但是为了直接在浏览器显示完整的url 去掉this.encoder(hash)

  (win || window).location.hash = hash;