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() { … }
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技术详解【教程】的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1604442.html
微信扫一扫 
支付宝扫一扫 
