ajax切换div—js切换div：示例代码

1、AJAX是一种通过在后台与服务器进行数据交换的技术，可以在不重新加载整个页面的情况下更新部分页面内容。在网页开发中，我们经常会遇到需要切换显示不同的div元素的需求，而使用AJAX可以实现这一功能。

示例代码如下：

HTML部分：

<div id="div1">内容1</div>
<div id="div2">内容2</div>
<div id="div3">内容3</div>
<button onclick="loadDiv(1)">显示内容1</button>
<button onclick="loadDiv(2)">显示内容2</button>
<button onclick="loadDiv(3)">显示内容3</button>

JavaScript部分：

function loadDiv(divNum) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("div1").style.display = "none";
      document.getElementById("div2").style.display = "none";
      document.getElementById("div3").style.display = "none";
      document.getElementById("div" + divNum).style.display = "block";
    }
  };
  xhttp.open("GET", "divContent.php?div=" + divNum, true);
  xhttp.send();
}

上述示例代码中，我们首先在HTML部分定义了三个div元素，分别是div1、div2和div3，并设置了初始内容。接着，我们在页面中添加了三个按钮，分别对应着显示不同的div内容。

在JavaScript部分，我们定义了一个loadDiv函数，它接受一个参数divNum，用于指定要显示的div的编号。在函数内部，我们创建了一个XMLHttpRequest对象，并通过open方法指定了请求的URL和请求方式（GET）。然后，我们通过send方法发送请求。

在发送请求后，我们通过onreadystatechange事件监听XMLHttpRequest对象的状态变化。当状态变为4（请求已完成）且状态码为200（请求成功）时，我们使用getElementById方法获取到对应的div元素，并将其display属性设置为"block"，从而显示该div内容。我们将其他两个div元素的display属性设置为"none"，从而隐藏它们的内容。

通过以上的代码，我们可以实现在点击按钮时，通过AJAX切换显示不同的div内容。