如何在此代码中使用AJAX或JSON？

Question

我正在创建一个网站应用程序，允许用户选择一个座位（如果尚未保留），并保留它。

我创建了一个非常简单的方法来获取之前使用iFrame保留的座位，但这是暂时的，现在我需要使其安全并且正确的javascript代码＆＃34;使用适当的做法。我不知道AJAX（或JSON）是什么，也不知道如何将它添加到此代码中，但它需要获取文件＆＃34; seatReserved＆＃34; + this.id（即日期）+＆＃34 ; Que.html＆＃34;并比较先前保留的席位的字符串，以查看要生成该元素的类。如果这太可怕了，或者如果其他任何事情都能更好地发挥作用，我会批评一切。谢谢大家！

以下是javascript代码：

一点注意事项，所有if语句都是由于每行中的席位数不同而导致的

<script>

  var i = " 0 ";
  var counter = 0;
  var leng=0;

  document.getElementById("Show1").addEventListener("click", changeDay);
  document.getElementById("Show2").addEventListener("click", changeDay);
  document.getElementById("Show3").addEventListener("click", changeDay);

  function changeDay() {

    var iFrame = document.getElementById("seatList");
    iFrame.src = "seatsReserved" + this.id + "Que.html";
    document.getElementById('date').innerHTML = this.id;
    var seatsTaken = iFrame.contentWindow.document.body.innerHTML;

    var k = 0;
    let = 'a';
    var lc = 0;
    for (lc = 1; lc <= 14; lc++) {

      if (lc == 1) {
        leng = 28;
      }
      else if (lc == 2) {
        leng = 29;
      }
      else if (lc == 3) {
        leng = 32;
      }
      else if (lc == 4 || lc == 6 || lc == 12 || lc == 14) {
        leng = 33;
      }
      else if (lc == 5 || lc == 13) {
        leng = 34;
      }
      else if (lc == 8 || lc == 10) {
        leng = 35;
      }
      else {
        leng = 36;
      }
      for (k = 1; k <= leng; k++) {
        if (seatsTaken.indexOf((" " +
                                let +k + " ")) <= -1) {
          seat = document.getElementById(let +k);
          seat.removeEventListener("click", selectedSeat);
        }
        else {
          document.getElementById(let +k).className = "openseat";
          document.getElementById(let +k).removeEventListener("click", doNothing);
        }
      }
      let = String.fromCharCode(let.charCodeAt(0) + 1);
    }

  }



  function loadChanges() {
    var iFrame = document.getElementById("seatList");
    var seatsTaken = iFrame.contentWindow.document.body.innerHTML;
    var k = 0;
    let = 'a';
    var lc = 0;
    var leng = 0;
    for (lc = 1; lc <= 14; lc++) {
      if (lc == 1) {
        leng = 28;
      }
      else if (lc == 2) {
        leng = 29;
      }
      else if (lc == 3) {
        leng = 32;
      }
      else if (lc == 4 || lc == 6 || lc == 12 || lc == 14) {
        leng = 33;
      }
      else if (lc == 5 || lc == 13) {
        leng = 34;
      }
      else if (lc == 8 || lc == 10) {
        leng = 35;
      }
      else {
        leng = 36;
      }

      for (k = 1; k <= leng; k++) {
        if (seatsTaken.indexOf((" " +
                                let +k + " ")) <= -1) {
          seat = document.getElementById(let +k);
          seat.addEventListener("click", selectedSeat);
          seat.className = "openseat";
        }
        else {
          document.getElementById(let +k).className = "notAvailible";
          document.getElementById(let +k).addEventListener("click", doNothing);
        }
      }
      let = String.fromCharCode(let.charCodeAt(0) + 1);
    }
    i = " 0 ";
    counter = 0;
    document.getElementById("seatString").innerHTML = i;
    document.getElementById("getSeats").value = i;
    document.getElementById("seatnums").innerHTML = counter;
  }

  i = document.getElementById("seatString").innerHTML;
  counter = document.getElementById("seatnums").innerHTML;

  function selectedSeat() {
    var w = this.id;
    var l = (" " + w);
    var b = (" " + w + " ");
    if (counter < 5) {
      if (i.indexOf(b) <= 0) {
        this.className = "closedseat";

        i = i + b;
        i = i.replace(" 0 ", " ");
        document.getElementById("seatString").innerHTML = i;
        document.getElementById("getSeats").value = i;
        counter = counter + 1;
        document.getElementById("seatnums").innerHTML = counter;
      }
      else if (i.indexOf(b) > 0) {
        this.className = "openseat";
        i = i.replace(b, "");
        document.getElementById("seatString").innerHTML = i;
        document.getElementById("getSeats").value = i;
        counter = counter - 1;
        document.getElementById("seatnums").innerHTML = counter;
      }
    }
    else if (i.indexOf(b) > 0) {
      this.className = "openseat";
      i = i.replace(b, "");
      document.getElementById("seatString").innerHTML = i;
      document.getElementById("getSeats").value = i;
      counter = counter - 1;
      document.getElementById("seatnums").innerHTML = counter;
    }
  }


  function doNothing() {
  }

  var rannum = Math.random() * 1000;
  document.getElementById('getConfirmation').value = rannum;
</script>