HTML5中获取服务器数据主要用Fetch API和XMLHttpRequest：Fetch基于Promise，语法简洁，自动解析JSON；XHR需手动解析；均需处理CORS、嵌套JSON安全访问及错误响应。
如果您在HTML5页面中需要从服务器获取数据，通常会通过HTTP请求与后端API交互并解析返回的JSON格式响应。以下是使用Fetch API和XMLHttpRequest（Ajax）两种主流方式实现数据获取的具体步骤：
一、使用Fetch API请求JSON数据
Fetch API是HTML5推荐的现代异步请求接口，基于Promise设计，语法简洁且原生支持JSON解析。
1、在JavaScript中调用fetch()函数，传入目标接口URL作为参数。
2、使用then()方法处理响应对象，调用response.json()将响应体解析为JavaScript对象。
立即学习“前端免费学习笔记（深入）”；
3、在第二个then()中接收已解析的JSON数据，并执行业务逻辑，例如更新DOM元素内容。
4、使用catch()捕获网络错误或解析异常，避免因请求失败导致脚本中断。
二、使用XMLHttpRequest发送Ajax请求获取JSON
XMLHttpRequest是较早的标准，兼容性更广，适用于需支持旧版浏览器的场景，需手动设置请求头并解析响应文本。
1、创建XMLHttpRequest实例：const xhr = new XMLHttpRequest();
2、调用open()方法配置请求方式（如GET）、接口地址及是否异步。
3、设置onload事件处理器，在请求成功时检查xhr.status是否为200，并调用JSON.parse(xhr.responseText)解析JSON字符串。
4、调用send()方法发起请求。
5、设置onerror事件处理器以响应网络层错误。
三、处理跨域请求（CORS）问题
当请求域名、协议或端口与当前页面不一致时，浏览器会因同源策略拦截响应，需确保服务端正确设置Access-Control-Allow-Origin等响应头。
1、确认后端响应头中包含Access-Control-Allow-Origin: *或指定允许的源。
2、若需携带Cookie，前端fetch需添加credentials: 'include'选项，后端还需设置Access-Control-Allow-Credentials: true。
3、检查浏览器开发者工具Network面板中预检请求（OPTIONS）是否返回200及正确CORS头。
四、解析嵌套JSON结构并提取字段
服务器返回的JSON可能包含多层嵌套对象或数组，需安全访问深层属性以避免TypeError。
1、使用可选链操作符（?.）访问嵌套属性，例如data?.user?.profile?.name。
2、对数组类型响应，使用Array.isArray()校验后再调用map()或forEach()遍历。
3、使用typeof或=== null判断关键字段是否存在，避免直接访问undefined的属性。
五、错误响应体的JSON解析与提示
部分接口在出错时仍返回200状态码但响应体为错误JSON（如{ "code": 500, "msg": "服务器异常" }），需统一判断业务错误码而非仅依赖HTTP状态。
1、在fetch的then()中先检查response.ok是否为true，再调用response.json()。
2、解析后检查返回对象中是否存在code字段且值不等于200，视情况抛出自定义错误。
3、使用try...catch包裹JSON.parse()调用，防止非法JSON字符串导致解析失败。
