AJAX 自学练习请求与显示

让我来详细讲解一下“AJAX 自学练习请求与显示”的完整攻略。

简介

AJAX 技术是一种在不刷新整个页面的情况下，通过异步请求和解析服务器返回的数据来更新部分页面内容的技术。在现代 Web 开发中非常常见。

在这个自学练习中，我们将编写一个简单的前端页面，通过 AJAX 发送请求并显示服务端返回的数据。这个练习将帮助你掌握 JavaScript 和 AJAX 基础知识。

准备工作

在开始这个练习之前，你需要确保你已经掌握了以下技术：

HTML/CSS 基础知识：要编写显示页面的 HTML 和 CSS；
JavaScript 基础知识：要编写发送 AJAX 请求和处理返回数据的 JavaScript 代码；
一个 Web 服务器：可以使用 Node.js 的 http 模块来快速创建一个简单的 Web 服务器，也可以使用任何其他的 Web 服务器。

第一步：创建 HTML 页面

首先，我们需要创建一个 HTML 页面，用于显示 AJAX 请求返回的数据。可以创建一个简单的页面，里面包含一个按钮和一个用于显示数据的空元素：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>AJAX 自学练习</title>
</head>
<body>
  <button id="loadDataButton">加载数据</button>
  <div id="dataContainer"></div>
</body>
</html>

第二步：编写 AJAX 请求代码

现在，我们需要编写 JavaScript 代码来发送 AJAX 请求，并在返回数据后显示数据。

创建一个名为 ajax.js 的文件，并编写以下代码：

function loadData() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("dataContainer").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "data.txt", true);
  xhttp.send();
}

这个函数用于发送一个 GET 请求，请求名为 data.txt 的文件，并在请求返回后将文件内容显示在 ID 为 dataContainer 的元素中。

第三步：绑定按钮点击事件

我们需要在 HTML 页面中绑定按钮点击事件，点击按钮时调用 loadData 函数发送 AJAX 请求。

在 HTML 页面中添加以下代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>AJAX 自学练习</title>
  <script src="ajax.js"></script>
</head>
<body>
  <button id="loadDataButton" onclick="loadData()">加载数据</button>
  <div id="dataContainer"></div>
</body>
</html>

注意，我们在页面头部引入了之前编写的 ajax.js 文件，并在按钮元素中添加了一个 onclick 属性，该属性绑定了 loadData 函数，当用户点击按钮时会触发 AJAX 请求。

第四步：启动 Web 服务器并测试

现在，我们已经编写了 HTML 和 JavaScript 代码，我们需要启动一个 Web 服务器来展示我们的页面。

我们可以使用 Node.js 的 http 模块来快速创建一个简单的 Web 服务器。

在命令行中输入以下命令：

$ node server.js

这会启动一个监听在 8080 端口的 Web 服务器。

现在，我们就可以在浏览器中访问 http://localhost:8080，点击“加载数据”按钮，发送 AJAX 请求并在页面上显示返回的数据了。

示例

以下是一个简单的例子，使用 AJAX 发送 POST 请求，并在服务器端使用 Node.js 返回数据。这个示例展示了如何在客户端使用 AJAX 发送数据、在服务器端接收数据、并返回处理后的结果。

在客户端，我们需要编写一个名为 ajax.js 的文件，在文件中编写以下代码：

function postData() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("resultContainer").innerHTML = this.responseText;
    }
  };
  xhttp.open("POST", "/post", true);
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  var data = "name=John&age=30";
  xhttp.send(data);
}

这个函数用于发送一个 POST 请求，请求路径为 /post，请求内容为名为 name 和值为 John，名为 age 和值为 30 的数据。

在服务器端，我们需要编写一个名为 server.js 的文件，并使用 Node.js 的 http 模块创建一个简单的 Web 服务器。当服务器接收到请求后，在控制台中输出请求数据，并返回处理后的结果。

const http = require('http');
const port = 8080;

const server = http.createServer((req, res) => {
  if (req.method === 'POST' && req.url === '/post') {
    let body = '';
    req.on('data', data => {
      body += data;
    });
    req.on('end', () => {
      console.log('Received data:', body);
      const parsedBody = JSON.parse(body);
      const result = `Hello ${parsedBody.name}, you are ${parsedBody.age} years old.`;
      res.writeHead(200, {'Content-Type': 'text/plain'});
      res.write(result);
      res.end();
    });
  } else {
    res.writeHead(404, {'Content-Type': 'text/plain'});
    res.write('Not found');
    res.end();
  }
});

server.listen(port, () => {
  console.log(`Server is listening on ${port}`);
});

这个服务器会在接收到请求后输出请求数据，并返回处理后的结果。

在 HTML 页面中添加以下代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>AJAX 示例</title>
  <script src="ajax.js"></script>
</head>
<body>
  <button id="postButton" onclick="postData()">发送请求</button>
  <div id="resultContainer"></div>
</body>
</html>

这个页面包含一个按钮，当用户点击按钮时会触发 postData 函数，该函数发送一个 POST 请求，请求路径为 /post，请求内容为名为 name 和值为 John，名为 age 和值为 30 的数据，并将返回的结果显示在 ID 为 resultContainer 的元素中。

现在，我们启动服务器，在浏览器中访问页面，点击“发送请求”按钮，服务器会接收到请求并输出请求数据，然后返回处理后的结果，在页面上显示结果。

这是一个简单的示例，展示了如何在客户端使用 AJAX 发送数据，在服务器端处理数据，并返回处理后的结果。不同的应用场景中，我们会有更加复杂和多样化的需求，但核心技术和思想都是相通的。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：AJAX 自学练习请求与显示 - Python技术站

AJAX 自学练习 请求与显示

简介