HTML5中访问数据库中的数据主要有以下几种常见方式,每种方式都有其特点和适用场景：

通过JavaScript与后端API交互（推荐方案）

这是最主流且安全的做法,流程如下：

1. 前端发起请求
   使用XMLHttpRequest或更现代的fetch() API发送HTTP请求到服务器端的接口地址。

   // 使用Fetch API示例
   fetch('/api/data')
     .then(response => response.json())
     .then(data => {
       // 处理返回的数据（如渲染到页面）
       console.log("获取到的数据:", data);
     })
     .catch(error => console.error('请求失败:', error));

   或者传统AJAX写法：

   const xhr = new XMLHttpRequest();
   xhr.open("GET", "/get-database-info");
   xhr.send();
   xhr.onload = function() {
     if (xhr.status === 200) {
       const result = JSON.parse(xhr.responseText);
       // 更新DOM元素显示数据
       document.getElementById("container").innerHTML = formatData(result);
     }
   };

2. 后端处理逻辑
   服务器端脚本负责连接真实数据库并执行查询，以PHP为例：

   // database.php文件内容
   <?php
   header('Content-Type: application/json');
   try {
     $conn = new PDO("mysql:host=localhost;dbname=test", 'user', 'pass');
     $stmt = $conn->query("SELECT  FROM users");
     echo json_encode($stmt->fetchAll());
   } catch (Exception $e) { echo json_encode(['error' => $e->getMessage()]); }
   ?>

3. 数据格式建议
   通常采用JSON作为传输格式，因其轻量级且易于解析的特性，复杂场景可结合GraphQL实现精准字段获取。

WebSQL（已废弃但历史遗留方案）

注意：该规范已被W3C放弃，仅部分浏览器曾支持过，若必须使用需谨慎评估兼容性风险：

// 创建/打开数据库示例
var db = openDatabase('mydb', '1.0', 'Test DB', 2  1024  1024); // 最大2MB空间
db.transaction(function(tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS logs(id unique, msg)');
  tx.executeSql('INSERT INTO logs VALUES(?, ?)', [null, 'Hello World!']);
});
// 查询示例
db.readTransaction(function(tx) {
  tx.executeSql('SELECT  FROM logs', [], function(results) {
    for (let i=0; i<results.rows.length; i++) {
      console.log(results.rows.item(i).msg);
    }
  });
});

⚠️重要提示：由于安全性限制，大多数现代浏览器已移除对此API的支持，生产环境请勿依赖此方案。

（图片来源网络，侵删）

IndexedDB客户端存储方案

当需要离线存储大量结构化数据时可选择此方案：

1. 初始化数据库结构

   let dbPromise;
   function initDB() {
   return new Promise((resolve, reject) => {
    const request = indexedDB.open('localCache', 1);
    request.onupgradeneeded = event => {
      const db = event.target.result;
      if (!db.objectStoreNames.contains('entries')) {
        db.createObjectStore('entries', { keyPath: 'id' });
        db.createIndex('byDate', 'entries', { unique: false });
      }
    };
    request.onsuccess = () => resolve(request.result);
    request.onerror = reject;
   });
   }

2. CRUD操作示例

   async function addItem(item) {
   const db = await initDB();
   const trans = db.transaction(['entries'], 'readwrite');
   const store = trans.objectStore('entries');
   const addOp = store.add(item);
   addOp.onsuccess = () => console.log('添加成功');
   }

async function queryItems() { const db = await initDB(); const trans = db.transaction(['entries'], 'readonly'); const store = trans.objectStore('entries'); return new Promise(resolve => { store.getAll().onsuccess = event => resolve(event.target.result); }); }

> 此方案特别适合需要本地缓存的应用，如笔记类应用的内容草稿保存功能。
 四、混合架构设计实践
实际项目中常采用组合方案：
1. 分层策略  
   实时性要求高的部分用WebSocket推送更新
   基础数据首次加载后存入IndexedDB做缓存
   关键业务操作仍走RESTful API保证数据一致性
2. 性能优化技巧  
   对频繁访问的数据设置合理的过期时间（TTL）
   使用Service Worker预缓存API响应
   分页加载大数据量结果集
 相关问答FAQs
Q1: HTML5能否直接连接MySQL数据库？  
A: 不能，出于安全考虑，浏览器禁止网页直接建立数据库连接，所有数据库操作都必须通过服务器代理实现，即前端发送请求→后端服务程序执行SQL→返回处理结果给前端，这种设计有效防止了跨站脚本攻击等安全隐患。
Q2: 如果项目需要完全离线运行怎么办？  
A: 可采用PWA(渐进式网页应用)技术配合IndexedDB实现离线优先策略，具体步骤包括：①检测网络状态自动切换数据源；②定期同步机制确保重新在线时数据一致性；③使用背景同步(BackgroundSync)API暂存失败请求待网络恢复后重试，同时建议设置合理的缓存策略，例如对静态资源使用Cache-Control头控制