HTML5调用接口方法全解析

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《HTML5调接口方法详解》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

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"}。

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等。

理论要掌握，实操不能落！以上关于《HTML5调用接口方法全解析》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！