AJAX 简明教程：如何实现不刷新页面的数据交互

yyt_
168 阅读4分钟

什么是 AJAX？

AJAX（Asynchronous JavaScript and XML）是一种允许网页在不重新加载整个页面的情况下发送和接收数据的技术。听起来有点复杂？别担心，让我们通过一个简单的例子来理解它。

比喻一下

想象你正在餐厅点餐。传统的方式是你告诉服务员你的订单，然后等待服务员返回并告诉你食物准备好了。这就像传统的网页请求：你点击一个链接，服务器处理请求，然后返回新的页面给你——这意味着你要等整个页面刷新。

现在，假设服务员给了你一个平板电脑，你可以随时查看厨房的状态，甚至可以在不打扰其他人用餐的情况下添加或修改你的订单。这就是 AJAX 的工作原理：它让你的网页可以“悄悄地”与服务器通信，而不必每次都刷新整个页面。

为什么 AJAX 很重要？

  1. 无需刷新页面：用户不需要等待整个页面重新加载就可以获取新信息。
  2. 提高用户体验：因为只有部分内容更新，所以页面看起来更快、更流畅。
  3. 减少带宽使用：只传输必要的数据，而不是整个页面，节省了网络资源。

在前端开发中，有多种方式可以发起网络请求（也就是我们常说的 AJAX 请求），常见的包括：

  • XMLHttpRequest
  • fetch
  • async/await（基于 fetch 的语法）

下面我们来一一介绍它们的特点和使用场景。

1. XMLHttpRequest：最原始的方式

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function () {
  if (xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log('成功获取数据:', data);
  } else {
    console.error('请求失败:', xhr.status);
  }
};
xhr.onerror = function () {
  console.error('网络错误');
};
xhr.send();

XMLHttpRequest 是最早期也是最原始的一种请求方式，它几乎兼容所有浏览器，包括一些老旧的版本，因此在过去被广泛使用。不过，它的语法较为繁琐，需要通过监听事件来处理响应，并且手动解析 JSON 数据，代码可读性和维护性较差。对于现代开发者来说，除非项目需要兼容 IE 等老式浏览器，否则一般不推荐使用这种方式。

2. fetch API：现代浏览器推荐方式

GET 请求示例：

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) throw new Error('请求失败');
    return response.json();
  })
  .then(data => console.log('获取到数据:', data))
  .catch(error => console.error('出错了:', error));

POST 请求示例：

fetch('https://api.example.com/submit', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Alice', email: 'alice@example.com' })
})
  .then(response => response.json())
  .then(data => console.log('提交成功:', data))
  .catch(error => console.error('出错了:', error));

fetch 是现代浏览器原生支持的一种更简洁、更强大的网络请求方式。它基于 Promise，使得异步操作结构更加清晰，逻辑也更容易理解。你可以用它轻松发起 GET、POST、PUT、DELETE 等各种类型的请求。但 fetch 也有一些不足之处，例如默认不会携带 Cookie，跨域时需要额外配置；而且即使服务器返回了错误状态码（如 404 或 500），也不会自动触发 catch，需要手动判断 response.ok 才能正确捕获异常。

3. async/await：让异步代码像同步一样写

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) throw new Error('请求失败');
    const data = await response.json();
    console.log('获取到数据:', data);
  } catch (error) {
    console.error('出错了:', error);
  }
}

async/await 则是在 fetch 基础上进一步优化的一种写法，它让异步代码看起来更像是同步代码，极大地提升了代码的可读性和可维护性。通过 try/catch 结构，我们可以非常直观地进行错误处理，也让整个请求流程更加清晰明了。虽然它不支持 IE 浏览器，但在现代开发中，特别是 React、Vue、Angular 这类主流框架中，async/await 已成为首选方式。

常见问题及解决方案

1. 浏览器历史记录

默认情况下，AJAX 请求不会改变浏览器的历史记录，这意味着用户不能通过“后退”按钮回到之前的状态。解决方法是使用 history.pushState() 或者第三方库如 react-router。

2. 跨域问题

如果请求的 URL 不同于当前页面的域名，可能会遇到跨域资源共享（CORS）问题。解决方法是在服务器端设置适当的 CORS 头信息。

3. SEO 不友好

搜索引擎爬虫通常不会执行 JavaScript，因此依赖 AJAX 动态加载的内容可能不会被正确索引。解决方法包括使用服务器端渲染（SSR）或者预渲染技术。

avatar
文章
阅读
粉丝