ajax怎么获取json数据

Ajax轻松获取JSON数据：从零开始的完整指南

在现代Web开发中，前后端数据交互是构建动态应用的核心，Ajax（Asynchronous JavaScript and XML）技术允许我们在不刷新整个页面的情况下，与服务器进行异步通信，从而实现流畅的用户体验，而JSON（JavaScript Object Notation）以其轻量、易读和易于解析的特性，成为了Web API数据交换的事实标准，如何使用Ajax来获取JSON数据呢？本文将带你一步步这项必备技能。

核心概念：Ajax与JSON的完美结合

在开始编码前,我们先理解两个主角：

Ajax (异步JavaScript和XML)：它不是一门新的语言，而是一种利用JavaScript在后台与服务器进行数据交换的技术，其核心是浏览器内置的 XMLHttpRequest 对象，现代开发则更推荐使用 fetch API。
JSON (JavaScript对象表示法)：一种轻量级的数据交换格式，它看起来非常像JavaScript中的对象和数组，可以被JavaScript轻松地解析成原生对象,非常便于操作。

Ajax负责“请求”和“接收”数据，而JSON负责“描述”和“格式化”数据，当Ajax从服务器拿到一段JSON格式的文本后，只需一步就能将其转换为可用的JavaScript对象,从而在页面上动态展示内容。

准备工作：搭建本地服务器环境

一个非常重要的前提是：出于安全考虑，浏览器禁止网页中的JavaScript直接向本地文件系统发起Ajax请求，这意味着，如果你的HTML文件是直接通过 file:// 协议打开的,你的Ajax请求会失败。

你需要一个简单的本地服务器环境,最简单的方法是：

将你的HTML、CSS和JavaScript文件放在一个文件夹中。
使用Visual Studio Code编辑器，安装 "Live Server" 插件。
在VS Code中右键点击你的HTML文件，选择 "Open with Live Server"，它会自动在 http://127.0.0.1:5500 这样的地址下打开你的网页。

方法一：使用传统的XMLHttpRequest对象

XMLHttpRequest (简称XHR) 是Ajax的“元老”，虽然语法稍显繁琐,但它在所有浏览器中都有非常好的兼容性。

步骤：

创建XHR对象
```
const xhr = new XMLHttpRequest();
```

配置请求 使用 open() 方法指定请求方式、URL和是否异步。

xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);
// 'GET' 是请求方法
// '...' 是要获取数据的API地址
// true 表示异步请求

设置响应数据类型 这是一个关键步骤！我们告诉服务器我们期望接收JSON数据，这样 xhr.response 就会被自动解析。
```
xhr.responseType = 'json';
```

定义回调函数 当请求状态发生变化时，onreadystatechange 事件会被触发，我们主要关心 readyState 为 4（请求完成）且 status 为 200（成功）的情况。

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // xhr.response 已经是一个JavaScript对象了！
        console.log('成功获取数据:', xhr.response);
        // 在这里操作数据，例如更新页面DOM
        document.getElementById('title').innerText = xhr.response.title;
        document.getElementById('body').innerText = xhr.response.body;
    } else if (xhr.readyState === 4) {
        // 请求失败
        console.error('获取数据失败:', xhr.status);
    }
};

发送请求 调用 send() 方法来执行请求。
```
xhr.send();
```

完整示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">Ajax获取JSON数据示例</title>
</head>
<body>
    <h1>使用 XMLHttpRequest 获取数据</h1>
    <h2 id="title">标题加载中...</h2>
    <p id="body">内容加载中...</p>
    <script>
        const xhr = new XMLHttpRequest();
        xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);
        xhr.responseType = 'json';
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                const data = xhr.response;
                document.getElementById('title').innerText = data.title;
                document.getElementById('body').innerText = data.body;
            } else if (xhr.readyState === 4) {
                document.getElementById('title').innerText = '数据加载失败';
                console.error('获取数据失败:', xhr.status);
            }
        };
        xhr.send();
    </script>
</body>
</html>

方法二：使用现代的Fetch API

fetch 是ES2015引入的现代API，它提供了更强大、更灵活、更符合Promise风格的接口,是目前更推荐的方式。

步骤：

调用 fetch() 函数 fetch() 返回一个Promise对象，我们使用 .then() 来处理成功响应，使用 .catch() 来捕获错误。
解析响应 fetch 返回的Response对象有一个 json() 方法，这个方法也会返回一个Promise，它会将响应体解析为JSON格式的JavaScript对象。注意：json() 是异步的，所以需要链式调用 .then()。

完整示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">使用Fetch API获取JSON数据</title>
</head>
<body>
    <h1>使用 Fetch API 获取数据</h1>
    <h2 id="fetch-title">标题加载中...</h2>
    <p id="fetch-body">内容加载中...</p>
    <script>
        fetch('https://jsonplaceholder.typicode.com/posts/1')
            .then(response => {
                // 检查响应状态是否成功
                if (!response.ok) {
                    // 如果响应不成功，抛出一个错误，会被 .catch 捕获
                    throw new Error(`HTTP error! Status: ${response.status}`);
                }
                // 调用 .json() 来解析响应体
                return response.json();
            })
            .then(data => {
                // 在这里操作解析后的数据
                console.log('成功获取数据:', data);
                document.getElementById('fetch-title').innerText = data.title;
                document.getElementById('fetch-body').innerText = data.body;
            })
            .catch(error => {
                // 捕获网络错误或上面抛出的错误
                console.error('获取数据时出错:', error);
                document.getElementById('fetch-title').innerText = '数据加载失败';
            });
    </script>
</body>
</html>

Fetch API 的 async/await 语法（更优雅）

如果你熟悉ES2017的 async/await 语法,可以将Promise链式调用转换为更易读的同步代码风格。

async function fetchJsonData() {
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
        if (!response.ok) {
            throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const data = await response.json();
        console.log('成功获取数据:', data);
        document.getElementById('fetch-title').innerText = data.title;
        document.getElementById('fetch-body').innerText = data.body;
    } catch (error) {
        console.error('获取数据时出错:', error);
        document.getElementById('fetch-title').innerText = '数据加载失败';
    }
}
// 调用函数
fetchJsonData();

总结与最佳实践

特性	XMLHttpRequest (XHR)	Fetch API
语法	回调函数，较繁琐	Promise，支持 async/await，更简洁
错误处理	需要手动检查 `status`	默认不拒绝HTTP错误状态码（如404, 500），需要手动检查 `response.ok`
响应解析	需要手动设置 `responseType = 'json'`	通过 `response.json()` 方法，返回一个Promise
兼容性	良好，支持所有浏览器	较新，IE浏览器不支持

核心要点回顾：

理解CORS：Ajax请求受同源策略限制，如果请求的API与你的网页域名不同，服务器必须返回正确的CORS头信息（如 Access-Control-Allow-Origin: *）才能成功。
设置正确的请求头：虽然fetch和xhr在获取JSON时能自动解析，但在发送JSON数据（如POST请求）时，你需要手动设置 Content-Type: application/json。
拥抱现代方法：对于新项目，强烈推荐使用 fetch API，特别是配合 `async/await