AJAX 实例

作者likuolei

AJAX 实例（中文讲解）

以下是一个完整的 AJAX 实例，展示如何在 Node.js 环境中结合 MongoDB 和 Express 框架实现前后端数据交互，使用 JSON 格式传输数据。实例包括客户端（浏览器）使用 fetch 发送 AJAX 请求，服务器从 MongoDB 查询数据并返回 JSON 响应。代码清晰、实用，适合初学者和实际开发。

1. 实例概述

  • 目标：实现一个简单的用户查询功能。
  • 客户端：通过 AJAX（fetch）请求服务器，获取 MongoDB 中的用户数据并显示在页面上。
  • 服务器：使用 Node.js 和 Express，从 MongoDB 查询用户数据，返回 JSON 格式响应。
  • 技术栈：
  • 客户端：HTML + JavaScript（fetch）
  • 服务器：Node.js + Express + MongoDB
  • 数据格式：JSON

2. 环境准备

确保已安装以下工具：

  • Node.js：建议 LTS 版本（如 v20.x），运行 node -v 检查。
  • MongoDB：本地运行或使用 MongoDB Atlas（云服务）。
  • npm 依赖：Express 和 MongoDB 驱动。

安装依赖：

mkdir ajax-example
cd ajax-example
npm init -y
npm install express mongodb

3. 服务器端代码（Node.js + Express + MongoDB）

创建 server.js，实现从 MongoDB 查询用户数据并返回 JSON：

const express = require('express');
const { MongoClient } = require('mongodb');
const app = express();
const uri = 'mongodb://localhost:27017/myDatabase'; // 替换为你的 MongoDB 连接字符串
const client = new MongoClient(uri);

// 允许跨域（CORS）
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET, POST');
  next();
});

// 提供静态文件（如 HTML）
app.use(express.static('public'));

// API 端点：查询用户
app.get('/users', async (req, res) => {
  try {
    await client.connect();
    const db = client.db('myDatabase');
    const collection = db.collection('users');
    const users = await collection.find({}).toArray(); // 查询所有用户
    res.json(users);
  } catch (error) {
    console.error('查询失败：', error);
    res.status(500).json({ error: '服务器错误' });
  } finally {
    await client.close();
  }
});

app.listen(3000, () => {
  console.log('服务器运行在 http://localhost:3000');
});
  • 说明：
  • 使用 Express 创建服务器，监听 3000 端口。
  • /users 端点查询 MongoDB 的 users 集合，返回 JSON 数据。
  • 设置 CORS 头，允许跨域请求。
  • public 文件夹用于托管客户端 HTML 文件。

4. 客户端代码（HTML + JavaScript）

在项目根目录创建 public 文件夹，添加 index.html：

<!DOCTYPE html>
<html>
<head>
  <title>AJAX 用户查询</title>
  <style>
    pre { font-size: 16px; background: #f4f4f4; padding: 10px; }
    button { padding: 10px 20px; margin-bottom: 10px; }
  </style>
</head>
<body>
  <h1>用户查询</h1>
  <button onclick="loadUsers()">加载用户</button>
  <pre id="result">点击按钮加载用户数据...</pre>
  <script>
    async function loadUsers() {
      try {
        const response = await fetch('http://localhost:3000/users');
        if (!response.ok) throw new Error('网络错误');
        const users = await response.json();
        document.getElementById('result').innerText = JSON.stringify(users, null, 2);
      } catch (error) {
        document.getElementById('result').innerText = '错误：' + error.message;
      }
    }
  </script>
</body>
</html>
  • 说明：
  • 点击“加载用户”按钮，触发 fetch 请求到 /users。
  • 使用 response.json() 解析 JSON 响应。
  • 将结果格式化后显示在 <pre> 标签中。
  • 包含基本错误处理（如网络错误）。

5. MongoDB 数据准备

  1. 确保 MongoDB 运行（本地或 MongoDB Atlas）。
  2. 创建数据库 myDatabase 和集合 users，插入测试数据：
   // 在 MongoDB 客户端（如 mongosh）中运行
   use myDatabase
   db.users.insertMany([
     { name: "张三", age: 25, hobbies: ["读书", "旅行"] },
     { name: "李四", age: 30, hobbies: ["编程", "运动"] }
   ])
  • 数据示例：
  [
    {
      "_id": "someObjectId1",
      "name": "张三",
      "age": 25,
      "hobbies": ["读书", "旅行"]
    },
    {
      "_id": "someObjectId2",
      "name": "李四",
      "age": 30,
      "hobbies": ["编程", "运动"]
    }
  ]

6. 运行和测试

  1. 启动服务器：
   node server.js
  1. 访问客户端：
  • 打开浏览器，访问 http://localhost:3000。
  • 点击“加载用户”按钮，页面将显示 MongoDB 查询到的用户数据：
    json [ { "_id": "someObjectId1", "name": "张三", "age": 25, "hobbies": [ "读书", "旅行" ] }, { "_id": "someObjectId2", "name": "李四", "age": 30, "hobbies": [ "编程", "运动" ] } ]
  1. 调试：
  • 打开浏览器开发者工具（F12），在 Network 面板查看 /users 请求。
  • 检查响应是否为 JSON 格式。

7. 扩展：添加用户（POST 请求）

增强实例，支持通过 AJAX 添加用户。

7.1 更新服务器代码

在 server.js 中添加 POST 端点：

app.use(express.json()); // 解析 JSON 请求体

app.post('/users', async (req, res) => {
  try {
    await client.connect();
    const db = client.db('myDatabase');
    const collection = db.collection('users');
    const user = req.body; // 获取请求体中的 JSON 数据
    const result = await collection.insertOne(user);
    res.json({ message: '添加成功', id: result.insertedId });
  } catch (error) {
    console.error('添加失败：', error);
    res.status(500).json({ error: '服务器错误' });
  } finally {
    await client.close();
  }
});
  • 说明：express.json() 解析 POST 请求的 JSON 体。

7.2 更新客户端代码

修改 index.html，添加表单和 POST 请求：

<!DOCTYPE html>
<html>
<head>
  <title>AJAX 用户管理</title>
  <style>
    pre { font-size: 16px; background: #f4f4f4; padding: 10px; }
    button, input { padding: 10px; margin: 5px; }
  </style>
</head>
<body>
  <h1>用户管理</h1>
  <div>
    <input id="name" placeholder="姓名">
    <input id="age" type="number" placeholder="年龄">
    <button onclick="addUser()">添加用户</button>
  </div>
  <button onclick="loadUsers()">加载用户</button>
  <pre id="result">点击按钮加载用户数据...</pre>
  <script>
    async function loadUsers() {
      try {
        const response = await fetch('http://localhost:3000/users');
        if (!response.ok) throw new Error('网络错误');
        const users = await response.json();
        document.getElementById('result').innerText = JSON.stringify(users, null, 2);
      } catch (error) {
        document.getElementById('result').innerText = '错误：' + error.message;
      }
    }

    async function addUser() {
      const name = document.getElementById('name').value;
      const age = parseInt(document.getElementById('age').value);
      if (!name || !age) {
        alert('请输入姓名和年龄');
        return;
      }
      try {
        const response = await fetch('http://localhost:3000/users', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ name, age, hobbies: ['未知'] })
        });
        if (!response.ok) throw new Error('网络错误');
        const result = await response.json();
        alert(result.message);
        loadUsers(); // 刷新用户列表
      } catch (error) {
        alert('添加失败：' + error.message);
      }
    }
  </script>
</body>
</html>
  • 说明：
  • 添加表单输入姓名和年龄。
  • addUser() 使用 POST 请求发送 JSON 数据，添加新用户。
  • 添加成功后刷新用户列表。

8. JSON 在实例中的作用

  • 客户端：使用 JSON.stringify() 将用户输入转为 JSON 字符串发送到服务器；使用 response.json() 解析服务器返回的 JSON 数据。
  • 服务器：MongoDB 查询结果是 JavaScript 对象，res.json() 自动调用 JSON.stringify() 转为 JSON 字符串。
  • 数据格式：前后端交互全程使用 JSON，确保轻量和兼容性。

9. 注意事项与最佳实践

  1. 跨域问题：
  • 本例使用 CORS（Access-Control-Allow-Origin: *）允许跨域。
  • 生产环境中，限制允许的域名以提高安全性。
  1. 错误处理：
  • 客户端使用 try-catch 和 response.ok 检查错误。
  • 服务器返回明确的错误信息（如 { error: '服务器错误' }）。
  1. 性能优化：
  • 对于大量数据，使用分页查询（如 MongoDB 的 skip 和 limit）。
  • 示例：
    javascript const users = await collection.find({}).skip(0).limit(10).toArray();
  1. 安全性：
  • 验证用户输入，防止注入攻击。
  • 使用 HTTPS 保护数据传输。
  1. 调试：
  • 使用浏览器开发者工具（Network 面板）检查请求和响应。
  • 使用 JSON.stringify(data, null, 2) 格式化输出复杂数据。

10. 总结

  • 实例功能：通过 AJAX（fetch）实现用户查询和添加，Node.js + Express 处理请求，MongoDB 存储数据，JSON 作为数据格式。
  • 代码结构：
  • 服务器：提供 /users GET 和 POST 端点，返回 JSON。
  • 客户端：使用 fetch 发送 AJAX 请求，动态更新页面。
  • JSON 作用：前后端交互的核心数据格式，结合 JSON.stringify() 和 response.json()。
  • 扩展性：可添加分页、搜索、删除等功能。

如果你需要更复杂的功能（如搜索用户、分页显示、实时更新），或对某部分有疑问，请告诉我，我会提供更详细的代码或指导！

const express = require('express');
const { MongoClient } = require('mongodb');
const app = express();
const uri = 'mongodb://localhost:27017/myDatabase';
const client = new MongoClient(uri);

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET, POST');
  next();
});

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

app.get('/users', async (req, res) => {
  try {
    await client.connect();
    const db = client.db('myDatabase');
    const collection = db.collection('users');
    const users = await collection.find({}).toArray();
    res.json(users);
  } catch (error) {
    console.error('查询失败：', error);
    res.status(500).json({ error: '服务器错误' });
  } finally {
    await client.close();
  }
});

app.post('/users', async (req, res) => {
  try {
    await client.connect();
    const db = client.db('myDatabase');
    const collection = db.collection('users');
    const user = req.body;
    const result = await collection.insertOne(user);
    res.json({ message: '添加成功', id: result.insertedId });
  } catch (error) {
    console.error('添加失败：', error);
    res.status(500).json({ error: '服务器错误' });
  } finally {
    await client.close();
  }
});

app.listen(3000, () => {
  console.log('服务器运行在 http://localhost:3000');
});
<!DOCTYPE html>
<html>
<head>
  <title>AJAX 用户管理</title>
  <style>
    pre { font-size: 16px; background: #f4f4f4; padding: 10px; }
    button, input { padding: 10px; margin: 5px; }
  </style>
</head>
<body>
  <h1>用户管理</h1>
  <div>
    <input id="name" placeholder="姓名">
    <input id="age" type="number" placeholder="年龄">
    <button onclick="addUser()">添加用户</button>
  </div>
  <button onclick="loadUsers()">加载用户</button>
  <pre id="result">点击按钮加载用户数据...</pre>
  <script>
    async function loadUsers() {
      try {
        const response = await fetch('http://localhost:3000/users');
        if (!response.ok) throw new Error('网络错误');
        const users = await response.json();
        document.getElementById('result').innerText = JSON.stringify(users, null, 2);
      } catch (error) {
        document.getElementById('result').innerText = '错误：' + error.message;
      }
    }

    async function addUser() {
      const name = document.getElementById('name').value;
      const age = parseInt(document.getElementById('age').value);
      if (!name || !age) {
        alert('请输入姓名和年龄');
        return;
      }
      try {
        const response = await fetch('http://localhost:3000/users', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ name, age, hobbies: ['未知'] })
        });
        if (!response.ok) throw new Error('网络错误');
        const result = await response.json();
        alert(result.message);
        loadUsers();
      } catch (error) {
        alert('添加失败：' + error.message);
      }
    }
  </script>
</body>
</html>

类似文章

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注