HTML如何调用后端接口_AJAX与Fetch技术详解【教程】

HTML页面中与后端交互需用JavaScript发起HTTP请求，主流方案为XMLHttpRequest（AJAX）和Fetch API；前者兼容旧浏览器且控制精细，后者更简洁现代，支持async/await、CORS配置及加载错误状态管理。

如果您希望在HTML页面中与后端服务器进行数据交互，例如获取用户列表、提交表单或刷新实时状态，则需要通过客户端JavaScript发起HTTP请求。以下是实现该目标的两种主流技术方案：原生XMLHttpRequest封装的AJAX与现代标准化的Fetch API。

一、使用XMLHttpRequest实现AJAX请求

XMLHttpRequest是浏览器内置对象，支持异步发送HTTP请求并处理响应，兼容性覆盖IE7及以上版本，适用于需精细控制请求生命周期的场景。

1、创建XMLHttpRequest实例：const xhr = new XMLHttpRequest();

2、配置请求参数：xhr.open('GET', '/api/users', true);

立即学习“前端免费学习笔记（深入）”；

3、设置响应类型（可选）：xhr.responseType = 'json';

4、定义onload回调函数处理成功响应：xhr.onload = function() { if (xhr.status >= 200 && xhr.status

5、定义onerror回调函数处理网络错误：xhr.onerror = function() { console.error('请求失败'); };

6、发送请求：xhr.send();

二、使用Fetch API发起请求

Fetch是基于Promise的现代接口，语法简洁，天然支持async/await，返回Response对象，需手动解析body内容，不支持IE浏览器。

1、发起基础GET请求：fetch('/api/posts')

2、链式调用then处理响应：.then(response => { if (!response.ok) throw new Error('网络响应异常'); return response.json(); })

3、继续处理解析后的JSON数据：.then(data => console.log(data))

4、捕获错误：.catch(error => console.error('请求出错:', error));

5、发起POST请求并携带JSON数据：fetch('/api/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username: 'admin', password: '123' }) });

三、使用async/await配合Fetch简化逻辑

利用async函数包装Fetch调用，可使异步代码呈现同步书写风格，提升可读性与错误处理一致性。

1、声明异步函数：async function loadUserData() { ... }

拾贝

一键同步微信读书所有笔记和划线，并在新标签页回顾

186

查看详情

2、在函数内部await fetch调用：const response = await fetch('/api/profile');

3、检查响应状态：if (!response.ok) throw new Error(`HTTP错误! 状态码: ${response.status}`);

4、解析JSON响应体：const userData = await response.json();

5、返回结构化数据供后续使用：return userData;

四、处理跨域请求（CORS）

当HTML页面所在域名与后端API地址不同时，浏览器会执行同源策略限制，需后端设置Access-Control-Allow-Origin响应头，前端可在Fetch中显式启用凭据支持。

1、在Fetch选项中添加credentials字段：fetch('https://api.example.com/data', { credentials: 'include' });

2、确保后端响应头包含：Access-Control-Allow-Origin: https://your-frontend-domain.com

3、若需自定义请求头，后端还需返回：Access-Control-Allow-Headers: Content-Type, X-Auth-Token

4、预检请求（OPTIONS）由浏览器自动触发，后端必须正确响应204状态码及对应CORS头。

五、错误边界与加载状态管理

真实项目中需明确区分网络失败、服务不可达、业务逻辑错误等情形，并向用户反馈当前状态，避免界面卡死或无响应。

1、定义加载状态变量：let isLoading = true, hasError = false;

2、发起请求前设置加载态：isLoading = true; hasError = false;

3、在fetch.then分支中更新成功状态：isLoading = false;

4、在fetch.catch分支中更新错误状态：isLoading = false; hasError = true;

5、根据状态变量动态渲染DOM元素，例如显示加载动画或错误提示框。

以上就是HTML如何调用后端接口_AJAX与Fetch技术详解【教程】的详细内容，更多请关注php中文网其它相关文章！