可通过Fetch API或XMLHttpRequest获取JSON数据：Fetch基于Promise，语法简洁；XMLHttpRequest兼容旧浏览器，需手动处理；均需错误处理、响应验证、跨域配置（CORS）及本地加载替代方案。
如果您在HTML5页面中需要获取并处理JSON格式的数据，则可以通过Fetch API或XMLHttpRequest（Ajax）发起HTTP请求。以下是实现此功能的具体步骤：
一、使用Fetch API请求JSON数据
Fetch API是现代浏览器推荐的异步网络请求方式，基于Promise，语法简洁，原生支持JSON响应解析。
1、在HTML文件的<script>标签内编写JavaScript代码。</script>
2、调用fetch()函数，传入JSON数据的URL地址。
立即学习“前端免费学习笔记（深入）”；
3、使用.then()链式处理响应，先调用response.json()方法将响应体解析为JavaScript对象。
4、在第二个.then()中接收已解析的JSON数据，并执行渲染或逻辑操作。
5、使用.catch()捕获网络错误或解析异常，防止脚本中断。
二、使用XMLHttpRequest（Ajax）请求JSON数据
XMLHttpRequest兼容性更广，适用于需支持较老浏览器的场景，需手动设置请求头与状态监听。
1、创建XMLHttpRequest实例：const xhr = new XMLHttpRequest();
2、调用xhr.open('GET', 'data.json', true);指定请求方式、URL和异步标志。
3、设置xhr.responseType = 'json';确保响应自动解析为JSON对象（现代浏览器支持）。
4、绑定xhr.onload事件，在状态码为200时读取xhr.response属性获取解析后的数据。
5、绑定xhr.onerror事件处理请求失败情况。
三、错误处理与响应验证
无论使用Fetch还是XMLHttpRequest，都必须验证响应有效性，避免因空值或结构不符导致运行时错误。
1、检查响应状态码是否在200–299范围内（Fetch需显式判断，XMLHttpRequest需检查xhr.status）。
2、确认解析后的数据为object类型且不为null，使用typeof data === 'object' && data !== null进行判断。
3、对预期字段做存在性校验，例如if (data && 'name' in data) { ... }。
4、在控制台输出原始响应文本（response.text()或xhr.responseText）便于调试，尤其当JSON解析报错时，该步骤可定位非法字符或编码问题。
四、跨域请求注意事项
当JSON资源位于不同源（协议、域名、端口任一不同）时，浏览器会触发CORS限制，必须由服务端配合设置响应头。
1、服务端需返回Access-Control-Allow-Origin: * 或指定允许的源。
2、若请求携带凭据（如cookies），服务端还需设置Access-Control-Allow-Credentials: true，且前端fetch需添加credentials: 'include'选项。
3、XMLHttpRequest需在open()后、send()前调用xhr.withCredentials = true。
4、未正确配置CORS时，浏览器控制台将显示“has been blocked by CORS policy”错误，此时前端代码无法绕过，必须协调后端修复。
五、JSON数据本地加载替代方案
在开发阶段或静态站点中，若无法启动HTTP服务，可将JSON内容直接嵌入HTML，规避跨域与网络依赖。
1、将JSON数据保存为.js文件，导出为全局变量，例如window.apiData = { "items": [...] };
2、在HTML中通过<script src="data.js"></script>引入。
3、直接访问window.apiData使用数据，无需异步请求。
4、也可使用<script type="application/json">标签内联JSON，再通过document.querySelector获取textContent并调用JSON.parse()解析。</script>
