使用AJAX切换类似按钮颜色

<button id="colorButton">切换颜色</button>

document.getElementById("colorButton").addEventListener("click", function() {
  // 创建一个AJAX请求对象
  var xhr = new XMLHttpRequest();

  // 定义请求的类型、URL和是否异步
  xhr.open("GET", "changeColor.php", true);

  // 定义请求完成后的回调函数
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
      // 请求成功，根据返回的数据切换按钮的颜色
      var response = xhr.responseText;
      if (response === "red") {
        document.getElementById("colorButton").style.backgroundColor = "red";
      } else if (response === "blue") {
        document.getElementById("colorButton").style.backgroundColor = "blue";
      }
    }
  };

  // 发送AJAX请求
  xhr.send();
});

<?php
// 生成一个随机的颜色值
$colors = array("red", "blue");
$randomColor = $colors[array_rand($colors)];

// 返回颜色值
echo $randomColor;
?>