探索异步交互：JavaScript AJAX 的全面指南

在这个示例中，我们将使用JavaScript的fetch函数来替换XMLHttpRequest，这是现代浏览器中更现代、更简洁的AJAX实现方式。

// 使用fetch发送GET请求
fetch('https://api.example.com/data', { method: 'GET' })
  .then(response => {
    if (response.ok) {
      return response.json(); // 解析JSON响应
    }
    throw new Error('Network response was not ok.');
  })
  .then(data => {
    console.log('Request succeeded with JSON response:', data);
  })
  .catch(error => {
    console.error('Request failed:', error);
  });
 
// 使用fetch发送POST请求
fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ key: 'value' }), // 发送JSON数据
})
.then(response => {
  if (response.ok) {
    return response.json(); // 解析JSON响应
  }
  throw new Error('Network response was not ok.');
})
.then(data => {
  console.log('Post succeeded with JSON response:', data);
})
.catch(error => {
  console.error('Post failed:', error);
});

在这个示例中，我们使用了fetch函数来发送异步HTTP请求。这是目前在浏览器中实现AJAX的推荐方式，因为它使用了JavaScript的Promise对象，使得异步代码更加简洁和易读。同时，它也支持请求cancellation、timeout以及异步的I/O操作。