用 HTML 与 AJAX 实现“无需刷新”的异步请求

在网页上做状态更新、搜索联想或实时计数，常需要在不刷新页面的前提下从服务器获取或发送数据。用 HTML 结合 AJAX 可以高效达成，既不中断用户操作，也能减少服务器压力。

场景引入

想象你在写一个待办事项清单，点击“添加”后不希望整页刷新，而是把新任务立刻提交到后端保存；或者在输入关键词时，能即时返回匹配的搜索建议。这些都离不开轻量的异步请求。

核心思路

借助浏览器内置的 XMLHttpRequest（XHR）或 Fetch API，我们能发起向服务器的请求，并在回调中处理响应，从而在不重载页面的情况下完成数据交互。

实战要点

1. 基础准备

确保后端接口能返回标准的 JSON 数据，便于解析；同时准备好请求的 URL、请求方法（GET/POST）与必要的参数。

2. 使用 XMLHttpRequest

<div id="result"></div>
<script>
  const xhr = new XMLHttpRequest();
  const url = '/api/search';
  const params = new URLSearchParams({
    query: '咖啡'
  });

  xhr.open('GET', url, true);
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.setRequestHeader('Accept', 'application/json');

  xhr.onload = function() {
    if (xhr.status === 200) {
      const data = JSON.parse(xhr.responseText);
      document.getElementById('result').innerHTML = `
        <ul>
          ${data.results.map(item => `<li>${item.name}</li>`).join('')}
        </ul>
      `;
    }
  };

  xhr.onerror = function() {
    document.getElementById('result').innerHTML = '请求失败，请稍后重试。';
  };

  xhr.send(params);
</script>

• 关键步骤：open 与 send 启动请求，onload 与 onerror 处理响应与错误。
• 注意：POST 通常用 xhr.send(JSON.stringify(params))，并确保服务器返回正确的 Content-Type。

3. 使用 Fetch API

<script>
  const url = '/api/search';
  const params = new URLSearchParams({
    query: '咖啡'
  });

  fetch(url, {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    },
    params: params
  })
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    document.getElementById('result').innerHTML = `
      <ul>
        ${data.results.map(item => `<li>${item.name}</li>`).join('')}
      </ul>
    `;
  })
  .catch(error => {
    document.getElementById('result').innerHTML = '请求失败，请稍后重试。';
  });
</script>
>
- **关键步骤**：`fetch` 发起请求，链式调用处理响应与错误。
- **注意**：Fetch 本身不支持 URLSearchParams，需在 `body` 里使用 `new FormData` 或 `JSON.stringify`。

## 常见问题与优化
- **CORS 跨域**：若接口与前端不在同源，需在后端配置合适的跨域响应头（如 `Access-Control-Allow-Origin`）。
- **错误处理**：区分 4xx 与 5xx 响应并给出用户可理解的提示，避免只返回“网络异常”。
- **加载状态**：在发起请求前显示“正在加载…”，提升交互的确定感。
- **节流与防抖**：搜索等高频输入场景，加入防抖以减少不必要的请求。
- **缓存与懒加载**：对不经常变更的数据可先命中缓存，再在后台定时刷新。

## 结尾
通过将 HTML 与 AJAX 结合，我们能在保持页面流畅的同时，灵活地与后端交互。理解请求生命周期、正确处理响应与错误，并根据场景加入加载提示与防抖节流，能显著提升用户体验与系统性能。