HTML5Fetch获取JSON数据教程

本文深入讲解了在HTML5环境中使用Fetch API和XMLHttpRequest两种方式安全、高效地获取并解析JSON数据的核心实践，涵盖从基础请求发起、自动与手动JSON解析、跨域（CORS）配置、嵌套结构的安全访问，到错误响应的精细化处理等关键环节，既突出Fetch作为现代标准的简洁优势，也兼顾XHR的兼容性价值，为前端开发者提供一套完整、健壮且可落地的数据交互解决方案。

如果您在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字符串导致解析失败。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《HTML5Fetch获取JSON数据教程》文章吧，也可关注golang学习网公众号了解相关技术文章。