原生html如何发送网络请求
原生HTML发送网络请求的核心方法是：使用XMLHttpRequest、Fetch API、表单提交、和WebSockets。在这些方法中，Fetch API因其简洁和现代化的特性最为推荐使用。下面我们详细展开描述Fetch API的使用方法，并进一步探讨其他方法的具体应用及其优缺点。
一、XMLHttpRequest
1.1 什么是XMLHttpRequest
XMLHttpRequest（XHR）是一个API，用于在后台与服务器进行数据交换。这意味着可以在不重新加载整个网页的情况下，更新网页的一部分内容。XHR是AJAX技术的核心，尽管Fetch API现在更被推荐，但XHR仍然在许多旧代码库和浏览器环境中广泛使用。
1.2 如何使用XMLHttpRequest
使用XMLHttpRequest非常灵活，但其代码结构相对繁琐。以下是一个基本的GET请求示例：
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};
xhr.send();
核心步骤：
创建实例: 使用new XMLHttpRequest()创建一个新的XHR对象。
设置请求方法和URL: 使用open()方法设置HTTP方法（如GET或POST）和目标URL。
定义回调函数: onreadystatechange属性设置一个函数，这个函数在readyState变化时被调用。
发送请求: 使用send()方法发送请求。如果是POST请求，可以在send()方法中传递数据。
1.3 优缺点
优点：
兼容性好：支持几乎所有主流浏览器。
控制力强：提供了对HTTP请求和响应的细粒度控制。
缺点：
语法复杂：代码结构相对较为复杂，容易出错。
不支持Promise：难以与现代JavaScript异步编程模式结合。
二、Fetch API
2.1 什么是Fetch API
Fetch API是现代浏览器提供的接口，用于发起网络请求并处理响应。它基于Promise设计，语法简洁，易于阅读和维护。Fetch API是对XMLHttpRequest的一种更现代化的替代。
2.2 如何使用Fetch API
以下是使用Fetch API进行GET请求的基本示例：
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('There was a problem with your fetch operation:', error));
核心步骤：
发起请求: 使用fetch()方法，并传入目标URL。
处理响应: fetch()方法返回一个Promise对象，then()方法用于处理响应。可以调用response.json()将响应转换为JSON格式。
错误处理: 使用catch()方法处理可能出现的错误。
2.3 优缺点
优点：
语法简洁：基于Promise，代码更易读和维护。
更现代：提供了更强大的功能，如支持跨域请求和流式处理。
缺点：
兼容性问题：不支持IE浏览器，需要使用Polyfill。
错误处理麻烦：需要手动检查HTTP状态码。
三、表单提交
3.1 什么是表单提交
表单提交是最传统的网络请求方式，通过HTML
核心步骤：
定义表单: 使用