html 怎么实现http请求

在HTML中实现HTTP请求主要依靠的是JavaScript，因为HTML本身不具备发送HTTP请求的能力，下面，我将详细介绍如何使用JavaScript中的XMLHttpRequest对象和Fetch API来发送HTTP请求。

使用XMLHttpRequest对象

XMLHttpRequest是一种在不刷新整个页面的前提下与服务器交换数据并更新部分网页内容的技术，它可以用来上传或下载数据，但并不仅限于XML数据，可以接收任何类型的文本数据。

创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

初始化请求

xhr.open('GET', 'https://api.example.com/data', true); // 第一个参数是请求方法，第二个参数是请求的URL，第三个参数表示是否异步处理请求

设置回调函数

请求状态改变时的回调：

xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText); // 请求成功时的处理
    }
};

请求发生错误时的回调：

xhr.onerror = function () {
    console.error('请求失败'); // 请求失败时的处理
};

发送请求

xhr.send(); // 对于GET请求，send()方法无参数

使用Fetch API

Fetch API提供了一个更现代、更强大、更灵活的方式来进行网络请求，并且它返回的是Promise对象，使得异步代码更容易写和理解。

发起请求

fetch('https://api.example.com/data')
    .then(response => response.json()) // 解析响应为JSON格式
    .then(data => console.log(data)) // 处理解析后的数据
    .catch(error => console.error('请求出错：', error)); // 捕获异常

自定义请求

添加请求头：

fetch('https://api.example.com/data', {
    headers: {
        'Content-Type': 'application/json'
    }
})

发送POST请求：

fetch('https://api.example.com/data', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ key1: 'value1', key2: 'value2' }) // 发送的数据
})

相关问题与解答

Q1: XMLHttpRequest和Fetch API有何不同？

A1: XMLHttpRequest是一个比较老的API，它是基于回调函数的异步模型，而Fetch API是一个较新的API，它基于Promise的异步模型，使得异步代码更加清晰易读，Fetch API提供了更多的功能，如请求和响应的自定义，以及检查网络状态等。

Q2: 如何取消一个使用Fetch API发起的HTTP请求？

A2: 要取消一个使用Fetch API发起的HTTP请求，可以使用AbortController接口，以下是一个简单的示例：

const controller = new AbortController();
const signal = controller.signal;
fetch('https://api.example.com/data', { signal })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => {
        if (error.name === 'AbortError') {
            console.log('请求被取消了');
        } else {
            console.error('请求出错：', error);
        }
    });
// 在某个时刻取消请求
controller.abort();