ajax实现加载数据功能

2023年6月11日下午12:10 • JavaScript

下面是“ajax实现加载数据功能”的完整攻略：

什么是 AJAX？

Ajax即“Asynchronous JavaScript and XML”（异步 JavaScript 和 XML）。Ajax 可以在不重新加载整个网页的情况下，请求服务器返回不同的数据。比如，在一个搜索页面中，当用户输入关键字搜索时，可以通过 Ajax 在不刷新页面的情况下返回相应的搜索结果。

实现步骤

下面将介绍如何使用 Ajax 实现加载数据功能，具体步骤如下：

1. 创建 HTML 页面

首先，需要创建一个 HTML 页面来显示数据。这个页面可以使用任意 HTML 代码，但是必须有一个元素来显示获取到的数据。

<!DOCTYPE html>
<html>
  <head>
    <title>AJAX Demo</title>
  </head>
  <body>
    <h1>欢迎来到 AJAX Demo</h1>
    <button id="load-data">点击加载数据</button>
    <div id="data"></div>
  </body>
</html>

在上面的 HTML 代码中，有一个按钮和一个空的 div 元素。我们将使用 JavaScript 中的 Ajax 去请求数据，并在这个 div 元素中显示它。

2. 编写 JavaScript 代码

接下来，需要编写 JavaScript 代码来实现 Ajax。可以使用 jQuery 的 Ajax 方法，也可以使用 JavaScript 自带的 XMLHttpRequest 对象。

其中，jQuery 的 Ajax 方法使用起来较为简单：

$('#load-data').click(function() {
  $.get('/data.json', function(response) {
    $('#data').html(response);
  });
});

上面的代码中，当按钮被点击时，会发起一个 GET 请求，请求 /data.json 这个文件。成功返回后，response 变量会保存服务器返回的内容，$('#data').html(response) 将返回的内容显示到 div 中。

使用 XMLHttpRequest 对象时，需要先创建一个对象，然后使用它来发送请求和接收响应：

var xhr = new XMLHttpRequest();

xhr.open('GET', '/data.json');

xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      var response = xhr.responseText;
      document.getElementById('data').innerHTML = response;
    } else {
      console.log('请求失败');
    }
  }
};

xhr.send();

以上代码中，首先创建了一个 XMLHttpRequest 对象，然后使用 open() 方法设置请求方法和请求 URL。使用 onreadystatechange 事件监听器，当请求状态改变时触发回调函数。当状态码为 200 时，从响应文本中获取返回内容并显示在 div 元素中。

3. 创建服务器端程序

服务器端程序可以使用 PHP、Python、Node.js 等编写。下面提供一个使用 Express 框架写的 Node.js 示例程序。

var express = require('express');
var app = express();

app.use(express.static('public'));

app.get('/data.json', function(req, res) {
  res.send('Hello, AJAX');
});

var server = app.listen(3000, function() {
  console.log('服务器已启动');
});

以上代码中，首先使用 express.static() 方法指定静态资源目录为 public，并将 data.json 文件放在该目录下。然后使用 app.get() 方法来处理 GET 请求，当请求 /data.json 时，返回一个字符串 'Hello, AJAX'。