ajax导航栏实例(ajax 跳转页面：示例代码)

Ajax导航栏实例是一种通过Ajax技术实现页面跳转的方法。传统的页面跳转会导致整个页面重新加载，而使用Ajax导航栏可以实现在不刷新整个页面的情况下加载新的内容。

我们需要一个导航栏，其中的每个导航链接都对应一个页面内容。当用户点击导航链接时，我们可以通过Ajax发送请求，获取对应页面的内容，并将其展示在页面中的某个区域，而不是重新加载整个页面。

下面是一个简单的示例代码，演示了如何使用Ajax导航栏实现页面跳转：

HTML代码：

<nav>
  <ul>
    <li><a href="#" onclick="loadPage('home')">Home</a></li>
    <li><a href="#" onclick="loadPage('about')">About</a></li>
    <li><a href="#" onclick="loadPage('contact')">Contact</a></li>
  </ul>
</nav>
<div id="content"></div>

在上面的代码中，我们创建了一个导航栏，其中的每个导航链接都有一个`onclick`事件，当用户点击链接时，会调用`loadPage`函数，并传递相应的页面名称作为参数。

JavaScript代码：

function loadPage(page) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("content").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", page + ".html", true);
  xhttp.send();
}

在`loadPage`函数中，我们创建了一个`XMLHttpRequest`对象，用于发送Ajax请求。当请求状态改变时，我们检查是否成功获取到了响应，并将响应内容设置为指定区域的HTML内容。

这里假设每个页面的内容都保存在以页面名称为文件名的HTML文件中，比如`home.html`、`about.html`、`contact.html`。通过拼接页面名称和`.html`后缀，我们可以构建出正确的页面URL，并通过Ajax请求获取页面内容。

这样，当用户点击导航链接时，页面会使用Ajax技术加载对应的页面内容，并将其展示在`content`区域，而不会刷新整个页面。这样可以提升用户体验，减少页面加载时间。