在前端开发中，`XMLHttpRequest` 是一个非常基础且重要的工具，用于实现异步通信。简单来说，它可以帮助网页与服务器之间进行数据交换，而不会刷新整个页面。今天，让我们通过一个小例子来感受它的魅力！🌟
首先，创建一个简单的 HTML 页面，包含一个按钮和一个用于显示结果的区域。然后，在 JavaScript 中初始化 `XMLHttpRequest` 对象，并设置请求类型为 GET 或 POST，指向目标 API 地址。当请求成功时，使用回调函数更新页面内容。例如：你可以从一个 JSON 文件中获取用户信息并展示出来。🔍
代码结构如下：
```javascript
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data.json');
xhr.onload = () => {
if (xhr.status === 200) {
document.getElementById('result').innerText = xhr.responseText;
}
};
xhr.send();
```
这段代码的核心在于 `onload` 回调函数，它会在请求完成后执行。通过这种方式，我们可以轻松地加载外部数据并与页面交互。🌈
虽然现在更多人倾向于使用更现代的 Fetch API，但了解 `XMLHttpRequest` 的原理仍然很有价值。它就像一位老朋友，陪伴了互联网发展的许多重要时刻。🌟
前端开发 JavaScript XMLHttpRequest