ajax完成跳转刷新—ajax 跳转：示例代码

1、Ajax是一种在不刷新整个页面的情况下，通过异步请求和响应来更新部分页面内容的技术。它可以实现无刷新的页面跳转和刷新操作，提升用户体验和页面加载速度。

下面是一个示例代码，演示了如何使用Ajax进行页面跳转和刷新：

function navigateTo(url) {
  var xhr = new XMLHttpRequest();  // 创建一个XMLHttpRequest对象
  xhr.open('GET', url, true);  // 使用GET请求打开目标页面的URL
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {  // 当请求完成且成功返回时
      var response = xhr.responseText;  // 获取响应内容
      document.documentElement.innerHTML = response;  // 更新页面内容
      history.pushState(null, '', url);  // 更新浏览器的URL
    }
  };
  xhr.send();  // 发送请求
}

在上面的示例代码中，我们定义了一个`navigateTo()`函数，它接受一个URL作为参数。我们创建了一个XMLHttpRequest对象，然后使用`open()`方法打开目标页面的URL，并指定使用GET请求。接着，我们通过`onreadystatechange`事件监听器来处理异步请求的状态变化。当请求的`readyState`变为4（表示请求完成）且`status`为200（表示请求成功）时，我们获取到响应的内容并将其赋值给`document.documentElement.innerHTML`，从而更新页面的内容。我们使用`history.pushState()`方法来更新浏览器的URL，以使其与目标页面的URL保持一致。

通过调用`navigateTo()`函数并传入目标页面的URL，即可实现使用Ajax进行页面跳转和刷新。这样，用户在浏览网页时就可以享受到无刷新的跳转和刷新效果。