HTML5调用接口需用JavaScript发起网络请求：一、fetch GET请求默认获取资源，需检查response.ok；二、fetch POST需设headers和JSON序列化body；三、XHR兼容旧浏览器，用onload/onerror事件；四、跨域需服务端配CORS头；五、async/await优化异步流程，用try...catch统一捕获异常。
如果您在HTML5页面中需要与后端服务器交换数据，则必须通过JavaScript发起网络请求来调用接口。以下是HTML5环境下调用接口的具体步骤与常用API使用技巧：
一、使用fetch API发起GET请求
fetch是HTML5推荐的标准网络请求API，基于Promise设计，语法简洁且支持现代浏览器。它默认发送GET请求，适用于获取JSON、文本等资源。
1、在
2、使用then()方法处理响应对象，调用response.json()解析返回的JSON数据。
立即学习“前端免费学习笔记（深入）”；
3、在第二个then()中接收解析后的数据，并执行渲染或逻辑处理。
4、使用catch()捕获网络错误或解析异常，注意：fetch不会因HTTP状态码（如404、500）抛出错误，需手动检查response.ok。
二、使用fetch API发送POST请求
POST请求用于向服务器提交数据，需设置请求头Content-Type并提供请求体。fetch通过配置对象指定method、headers和body参数。
1、构造一个包含method: 'POST'的配置对象。
2、在headers中设置'Content-Type': 'application/json'，确保后端能正确识别数据格式。
3、将待提交的数据用JSON.stringify()序列化为字符串，并赋值给body字段。
4、务必确认后端接口接受JSON格式且已启用CORS，否则会触发跨域拒绝。
三、使用XMLHttpRequest传统方式
XMLHttpRequest（XHR）是HTML5之前就存在的接口调用方式，兼容性极强，适用于需支持IE9及以下版本的场景。其采用事件驱动模型，需监听onload与onerror事件。
1、创建XMLHttpRequest实例：const xhr = new XMLHttpRequest();
2、调用open()方法初始化请求，传入方法类型、URL和是否异步标识。
3、设置onload事件处理函数，在其中判断xhr.status是否为200，并读取xhr.responseText。
4、调用send()方法发送请求，若为POST则需在send()中传入序列化后的数据字符串。
5、注意：IE6-7中需使用ActiveXObject替代，但HTML5标准下无需兼容此类旧对象。
四、处理跨域请求（CORS）
当HTML5页面与接口部署在不同源（协议、域名、端口任一不同）时，浏览器会实施同源策略限制。服务端需配置CORS响应头才能允许前端访问。
1、检查响应头中是否存在Access-Control-Allow-Origin字段，其值应为请求来源或通配符*。
2、若需携带Cookie或认证信息，前端fetch需设置credentials: 'include'，且服务端必须指定具体域名而非*。
3、预检请求（OPTIONS）由浏览器自动发起，服务端必须正确响应Access-Control-Allow-Methods与Access-Control-Allow-Headers。
4、本地file://协议直接打开HTML文件时，所有跨域请求均被禁止，必须通过本地服务器（如Live Server）运行页面。
五、使用async/await优化异步流程
async/await是ES2017引入的语法糖，可让基于Promise的接口调用代码更接近同步写法，提升可读性与错误控制能力。
1、在函数声明前添加async关键字，使其返回Promise对象。
2、在调用fetch处使用await等待响应，避免嵌套then链。
3、使用try...catch包裹await语句，统一捕获网络异常与JSON解析失败。
4、await只能在async函数内部使用，不可直接写在全局脚本顶层（ES2022起支持顶层await，但需确认运行环境支持）。
