ajax点击显示隐藏—ajax查询并显示：示例代码

Ajax点击显示隐藏是一种常见的网页交互效果，通过点击某个元素，可以动态地显示或隐藏其他元素。这种效果通常用于展开或收起一些内容，以提供更好的用户体验。

实现Ajax点击显示隐藏的关键是使用JavaScript中的Ajax技术，通过发送异步请求来获取数据，并根据返回的数据来动态地显示或隐藏元素。

下面是一个示例代码，演示了如何使用Ajax查询并显示内容：

HTML部分：

<button id="showBtn">显示内容</button>
<div id="content" style="display: none;"></div>

JavaScript部分：

document.getElementById("showBtn").addEventListener("click", function() {
  // 创建一个XMLHttpRequest对象
  var xhr = new XMLHttpRequest();
  // 发送异步请求
  xhr.open("GET", "data.txt", true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 请求成功，获取返回的数据
      var data = xhr.responseText;
      // 显示内容
      var contentDiv = document.getElementById("content");
      contentDiv.innerHTML = data;
      contentDiv.style.display = "block";
    }
  };
  xhr.send();
});

在上面的代码中，首先我们在HTML部分定义了一个按钮和一个用于显示内容的div元素，并设置其初始状态为隐藏。

然后，在JavaScript部分，我们获取到按钮元素，并为其绑定了一个点击事件的监听器。当按钮被点击时，会执行回调函数。

在回调函数中，我们首先创建了一个XMLHttpRequest对象，用于发送异步请求。然后，我们使用open方法设置请求的类型、URL和是否异步。接着，我们定义了一个onreadystatechange事件处理函数，当请求的状态发生变化时会被调用。

在onreadystatechange事件处理函数中，我们首先判断请求的状态是否为4（即请求已完成），并且状态码是否为200（即请求成功）。如果满足这两个条件，说明请求成功，我们可以获取到返回的数据。

接下来，我们将返回的数据设置为内容div元素的innerHTML，即将数据显示在页面上。我们将内容div元素的display属性设置为block，以显示该元素。

通过以上的代码，当点击按钮时，会发送一个异步请求，获取到数据后将其显示在页面上。这样就实现了Ajax点击显示隐藏的效果。