在HTML中发送网络请求主要依赖于JavaScript，因为HTML本身不具备发送网络请求的能力，JavaScript提供了多种方法来发送网络请求，如使用XMLHttpRequest对象、fetch API以及第三方库如axios，以下是详细的技术教学：

1. 使用XMLHttpRequest对象

XMLHttpRequest是一个旧的API，用于在浏览器和服务器之间异步交换数据，它允许你发送HTTP请求并接收响应，而无需刷新页面。

创建XMLHttpRequest对象

你需要创建一个XMLHttpRequest对象：

var xhr = new XMLHttpRequest();

发送GET请求

要发送GET请求，你可以使用open方法初始化请求，然后调用send方法发送请求：

xhr.open('GET', 'https://api.example.com/data', true); // 第三个参数表示请求是否异步
xhr.send();

发送POST请求

发送POST请求时，需要设置请求头，并可能附带数据体：

xhr.open('POST', 'https://api.example.com/data', true);
xhr.setRequestHeader('ContentType', 'application/json;charset=UTF8');
xhr.send(JSON.stringify({ key: 'value' }));

处理响应

XMLHttpRequest对象的onreadystatechange属性可以用于处理响应，当readyState变为4且status为200时，表示请求成功完成：

xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
    }
};

2. 使用Fetch API

Fetch API是一个现代、更强大的替代XMLHttpRequest的API，它返回一个Promise，使得异步代码更容易写和理解。

发送GET请求

使用Fetch API发送GET请求非常简单：

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

发送POST请求

发送POST请求时，需要设置请求头，并可能附带数据体：

fetch('https://api.example.com/data', {
    method: 'POST',
    headers: {
        'ContentType': 'application/json'
    },
    body: JSON.stringify({ key: 'value' })
})
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

3. 使用第三方库（如axios）

第三方库如axios提供了更加简洁和强大的功能，它们通常具有更好的错误处理和拦截能力。

安装axios

你需要通过npm或yarn安装axios：

npm install axios
或
yarn add axios

发送GET请求

使用axios发送GET请求：

import axios from 'axios';
axios.get('https://api.example.com/data')
    .then(response => console.log(response.data))
    .catch(error => console.error('Error:', error));

发送POST请求

使用axios发送POST请求：

import axios from 'axios';
axios.post('https://api.example.com/data', { key: 'value' })
    .then(response => console.log(response.data))
    .catch(error => console.error('Error:', error));

总结

以上就是在HTML中发送网络请求的几种方法。XMLHttpRequest是较旧的API，但仍然广泛支持，Fetch API是现代浏览器提供的原生API，推荐使用，第三方库如axios提供了更多的功能和更好的用户体验，根据你的需求和项目情况选择合适的方法。