如何使用JavaScript和AJAX根据邮政编码自动填充城市和州？

<input type="text" id="zipcode" placeholder="请输入邮政编码">
<input type="text" id="city" placeholder="城市" readonly>
<input type="text" id="state" placeholder="州" readonly>

function getCityAndState() {
  var zipcode = document.getElementById("zipcode").value;
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "getCityAndState.php?zipcode=" + zipcode, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var response = JSON.parse(xhr.responseText);
      document.getElementById("city").value = response.city;
      document.getElementById("state").value = response.state;
    }
  };
  xhr.send();
}

<?php
$zipcode = $_GET["zipcode"];
// 根据邮政编码查询数据库或调用第三方API获取城市和州信息
$city = "城市";
$state = "州";
$response = array("city" => $city, "state" => $state);
echo json_encode($response);
?>

document.getElementById("zipcode").addEventListener("input", getCityAndState);