李钟意讲前端

外观

咨询/接单/付费bug修复/学习交流群

实战制作一个简单的 AJAX 应用 ​

要制作一个简单的 AJAX 应用，你可以按照以下步骤进行操作：

1. 设计一个简单的 HTML 页面 ​

我们设计一个简单的 HTML 页面，页面中有一个按钮，点击按钮时会触发 AJAX 请求并将返回的数据显示在页面上。

html
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>简单的 AJAX 应用</title>
  </head>
  <body>
    <button id="loadDataBtn">加载数据</button>
    <div id="dataContainer"></div>

    <script src="app.js"></script>
  </body>
</html>

2. 使用 JavaScript 创建一个 XMLHttpRequest 对象 ​

在 app.js 文件中，我们将写 JavaScript 代码来处理 AJAX 请求。

javascript
document.getElementById("loadDataBtn").addEventListener("click", function () {
  var xhr = new XMLHttpRequest();

  xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);

  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      if (xhr.status >= 200 && xhr.status < 300) {
        var data = JSON.parse(xhr.responseText);
        displayData(data);
      } else {
        console.error("Failed to load data. HTTP Status:", xhr.status);
      }
    }
  };

  xhr.send();
});

function displayData(data) {
  var container = document.getElementById("dataContainer");
  container.innerHTML = "<h2>" + data.title + "</h2><p>" + data.body + "</p>";
}

在这个实例中，我们使用了 JSONPlaceholder 提供的一个在线 API，这个 API 会返回 JSON 数据。

3. 连接到一个在线 API ​

在上面的 app.js 代码中，我们已经连接到了一个在线 API。下面是 open 方法中的 API URL：

javascript
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);

4. 接收和展示数据 ​

当我们接收到 API 返回的数据后，我们解析 JSON 数据，并将其显示在我们的 HTML 页面上：

javascript
function displayData(data) {
  var container = document.getElementById("dataContainer");
  container.innerHTML = "<h2>" + data.title + "</h2><p>" + data.body + "</p>";
}

这就是一个简单的 AJAX 应用的全部内容。你可以用类似的方法获取和展示来自其他 API 的数据。记得检查 API 的文档，了解如何正确使用它们。