使用Ajax请求外部方法返回的数据

2023-12-23 00:32:12

使用 Ajax 请求外部方法，实现动态网页内容

何为 Ajax？

Ajax 是一种技术，可在不重新加载整个网页的情况下，与服务器交换数据。这意味着，前端开发人员可以在保持页面状态不变的情况下，异步更新网页内容。Ajax 通常使用 JavaScript 发送请求到服务器，服务器返回数据，然后 JavaScript 处理数据并更新页面。

使用 Ajax 请求外部方法

要使用 Ajax 请求外部方法，首先需要创建一个 XMLHttpRequest 对象。这是一个内置的 JavaScript 对象，用于与服务器交互。创建对象后，使用 open() 方法指定请求的 URL、请求类型和是否异步。

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/api/data", true);

下一步，使用 send() 方法发送请求。它可以接收一个参数，即发送到服务器的数据。如果没有数据要发送，可以将此参数留空。

xhr.send();

服务器收到请求后，会返回一些数据。可以通过 onload 事件监听器来监听服务器响应。在服务器返回数据后，会触发此监听器。

xhr.onload = function() {
  if (xhr.status == 200) {
    // 请求成功
    var data = xhr.responseText;
    // 处理数据
  } else {
    // 请求失败
  }
};

在 onload 监听器中，可以使用 xhr.responseText 属性获取服务器返回的数据。然后，使用 JavaScript 处理数据并更新网页内容。

示例

下面是一个使用 Ajax 请求外部方法的示例。它将使用 Ajax 请求外部 API，并使用返回的数据更新网页上的表格。

<!DOCTYPE html>
<html>
<head>
  <script src="ajax.js"></script>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>名称</th>
        <th>年龄</th>
      </tr>
    </thead>
    <tbody id="data"></tbody>
  </table>

  <script>
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "http://example.com/api/data", true);
    xhr.send();

    xhr.onload = function() {
      if (xhr.status == 200) {
        var data = xhr.responseText;
        data = JSON.parse(data);

        for (var i = 0; i < data.length; i++) {
          var row = document.createElement("tr");

          var cell1 = document.createElement("td");
          cell1.innerHTML = data[i].id;

          var cell2 = document.createElement("td");
          cell2.innerHTML = data[i].name;

          var cell3 = document.createElement("td");
          cell3.innerHTML = data[i].age;

          row.appendChild(cell1);
          row.appendChild(cell2);
          row.appendChild(cell3);

          document.getElementById("data").appendChild(row);
        }
      }
    };
  </script>
</body>
</html>