HTML5页面需用JavaScript发起网络请求与后端交互，主流方式包括XMLHttpRequest（兼容旧浏览器，需手动设头、处理状态）和Fetch API（现代标准，基于Promise，语法简洁）。
如果您在HTML5页面中需要与后端服务器进行数据交互，则必须通过JavaScript发起网络请求。以下是使用Ajax（XMLHttpRequest）和Fetch API两种主流方式调用后端接口并传递数据的具体操作步骤：
一、使用XMLHttpRequest发送POST请求
XMLHttpRequest是传统且兼容性极强的原生API，适用于需支持旧版浏览器的场景。它允许手动设置请求头、处理状态码，并支持同步或异步通信。
1、创建XMLHttpRequest实例对象。
2、调用open()方法指定请求方式（如POST）、目标URL及是否异步（通常为true）。
立即学习“前端免费学习笔记（深入）”；
3、设置Content-Type请求头为application/json，确保后端能正确解析JSON数据。
4、将待发送的数据通过JSON.stringify()序列化为字符串。
5、调用send()方法传入序列化后的数据。
6、监听onload事件，在status为200时读取responseText或response属性获取响应内容。
二、使用Fetch API发送GET请求
Fetch API是现代浏览器推荐的标准接口，基于Promise设计，语法简洁，天然支持异步处理。GET请求通常用于获取资源，参数通过URL查询字符串传递。
1、构造包含查询参数的完整URL，例如"https://api.example.com/data?id=123&type=user"。
2、调用fetch()函数并传入该URL。
3、使用then()链式处理响应，先调用response.json()解析JSON格式响应体。
4、在后续then()中处理解析后的数据对象。
5、使用catch()捕获网络错误或解析异常，避免未处理的Promise rejection。
三、使用Fetch API发送带JSON数据的POST请求
Fetch默认不发送Cookie且不会自动设置Content-Type，因此需显式配置请求选项以匹配后端期望的格式。发送结构化数据时应确保头部与载荷一致。
1、定义待提交的数据对象，例如{username: "admin", password: "123456"}。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
2、将该对象通过JSON.stringify()转为字符串。
3、配置init对象，设置method为"POST"，headers中包含"Content-Type": "application/json"。
4、将序列化后的字符串赋值给body字段。
5、调用fetch(URL, init)发起请求。
6、依次调用response.json()和后续then()处理返回结果。
四、使用FormData上传表单数据
当需提交文件或混合类型表单（如文本字段+文件输入）时，FormData接口可自动编码数据并设置正确的multipart/form-data请求头，无需手动构造边界符。
1、创建新的FormData实例。
2、调用append()方法逐个添加键值对，例如form.append("name", "张三")。
3、若存在文件输入元素，获取其files[0]并append进FormData，键名与后端约定一致。
4、调用fetch()时直接将FormData实例作为body传入，此时不可设置Content-Type头，浏览器会自动生成带boundary的正确头信息。
5、响应处理方式与其他Fetch请求相同。
五、处理跨域请求与CORS预检
当前端页面协议、域名或端口与后端不一致时，浏览器会触发CORS机制。简单请求（如GET/POST且Content-Type为text/plain、application/x-www-form-urlencoded或multipart/form-data）可能免预检；含自定义头或application/json的POST则触发OPTIONS预检。
1、确保后端响应头中包含Access-Control-Allow-Origin，其值需匹配前端源或设为*（仅限无凭证请求）。
2、若需携带Cookie或认证头，前端fetch调用中必须设置credentials: "include"，且后端需返回Access-Control-Allow-Credentials: true。
3、对于预检失败的情况，检查后端是否正确响应OPTIONS请求，包括Access-Control-Allow-Methods、Access-Control-Allow-Headers等头字段。
4、确认请求中未出现浏览器禁止的头字段，例如Host、Content-Length等。
