网页history ajax,使用ajax跟window.history.pushState无刷新改变页面内容和地址栏URL

使用ajax和window.history.pushState可以实现无刷新改变页面内容和地址栏URL。

步骤如下：

1. 给需要改变内容的元素绑定一个点击事件，使用ajax请求数据并将数据渲染到页面上。
2. 使用window.history.pushState方法改变地址栏URL，同时不刷新页面。
3. 监听window的popstate事件，当用户点击浏览器的后退或前进按钮时，重新发送ajax请求获取对应的数据，并渲染到页面上。

示例代码如下：

// 给元素绑定点击事件
$('.link').click(function(event) {
  event.preventDefault();
  var href = $(this).attr('href');
  // 发送ajax请求获取数据
  $.get(href, function(data) {
    // 将数据渲染到页面上
    $('#content').html(data);
    // 改变地址栏URL
    window.history.pushState(null, null, href);
  });
});

// 监听popstate事件
window.addEventListener('popstate', function() {
  var href = location.href;
  // 发送ajax请求获取数据
  $.get(href, function(data) {
    // 将数据渲染到页面上
    $('#content').html(data);
  });
});

注意事项：

1. 需要确保服务器端能够正确响应对应的URL请求。
2. 需要使用浏览器支持的HTML5 History API，不支持的浏览器可以使用hash方式实现。