// 使用XMLHttpRequest
const xhr = new XMLHttpRequest();
xhr.open('GET', 'api/data', true);
xhr.onload = function() {
  if (xhr.status === 200) {
    // 请求成功完成
    console.log(xhr.responseText);
  }
};
xhr.send();

// 使用Fetch API
fetch('api/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('Error:', error);
  });

// 使用Promise.all
const request1 = fetch('api/data1');
const request2 = fetch('api/data2');

Promise.all([request1, request2])
  .then(responses => Promise.all(responses.map(res => res.json())))
  .then(data => {
    // 两个请求都已完成
    console.log(data[0], data[1]);
  })
  .catch(error => {
    console.error('Error:', error);
  });

// 设置超时
const controller = new AbortController();
const signal = controller.signal;

setTimeout(() => controller.abort(), 5000); // 5秒超时

fetch('api/data', { signal })
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('请求超时');
    } else {
      console.error('其他错误:', err);
    }
  });

fetch('api/data')
  .then(response => response.json())
  .then(data => {
    // 更新DOM
    document.getElementById('content').innerHTML = data.content;
    
    // 如果需要确保DOM已更新，可以使用MutationObserver
    const observer = new MutationObserver(() => {
      console.log('DOM已更新');
      observer.disconnect();
    });
    
    observer.observe(document.getElementById('content'), {
      childList: true,
      subtree: true
    });
  });

// 显示加载指示器
document.getElementById('loading').style.display = 'block';

fetch('api/data')
  .then(response => response.json())
  .then(data => {
    // 处理数据
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  })
  .finally(() => {
    // 隐藏加载指示器
    document.getElementById('loading').style.display = 'none';
  });