AJAX核心实现原理

  function ajax({
  method = 'GET',
  url,
  data = null,
  headers = {},
  timeout = 5000
} = {}) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()
    
    // 处理GET查询参数
    if (method === 'GET' && data) {
      const encodedParams = new URLSearchParams(data).toString()
      url = `${url}${url.includes('?') ? '&' : '?'}${encodedParams}`
    }

    xhr.open(method, url, true)

    // 设置请求头
    Object.entries(headers).forEach(([key, value]) => {
      xhr.setRequestHeader(key, value)
    })

    // 超时设置
    xhr.timeout = timeout
    xhr.ontimeout = () => reject(new Error('Request timeout'))

    // 响应处理
    xhr.onload = () => {
      if (xhr.status >= 200 && xhr.status < 300) {
        try {
          const response = xhr.responseText ? JSON.parse(xhr.responseText) : null
          resolve(response)
        } catch (e) {
          reject(new Error('JSON parse error'))
        }
      } else {
        reject(new Error(`HTTP Error ${xhr.status}`))
      }
    }

    // 网络错误处理
    xhr.onerror = () => reject(new Error('Network failure'))

    // 处理POST数据
    let body = null
    if (method === 'POST') {
      const contentType = headers['Content-Type']
      if (data instanceof FormData) {
        body = data
      } else if (contentType?.includes('application/json')) {
        body = JSON.stringify(data)
      } else {
        body = new URLSearchParams(data).toString()
      }
    }

    xhr.send(body)
  })
}