js封装ajax

在JavaScript中，封装AJAX（Asynchronous JavaScript and XML）可以简化HTTP请求的处理，提升代码的可维护性和复用性。以下是对AJAX封装的基础概念、优势、类型、应用场景以及常见问题的解答：

基础概念

AJAX是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过JavaScript的XMLHttpRequest对象或现代的fetch API，可以实现与服务器的异步通信。

优势

提升用户体验：页面无需刷新即可更新内容。
减少服务器负载：只请求必要的数据，减少数据传输量。
提高性能：异步通信避免阻塞页面加载。

类型

传统AJAX：使用XMLHttpRequest对象。
Fetch API：现代浏览器提供的更简洁的API。
第三方库：如Axios、jQuery等。

应用场景

实时搜索建议
分页加载数据
动态更新页面内容
表单验证

封装示例（使用Fetch API）

以下是一个简单的封装AJAX请求的示例：

class Ajax {
  constructor(baseUrl) {
    this.baseUrl = baseUrl;
  }

  get(endpoint, params = {}) {
    const url = new URL(endpoint, this.baseUrl);
    url.search = new URLSearchParams(params).toString();
    return fetch(url).then(response => response.json());
  }

  post(endpoint, data = {}) {
    return fetch(`${this.baseUrl}${endpoint}`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(data)
    }).then(response => response.json());
  }

  // 可以继续添加put, delete等方法
}

// 使用示例
const api = new Ajax('https://api.example.com');
api.get('/users', { page: 1 }).then(data => console.log(data));
api.post('/users', { name: 'John' }).then(data => console.log(data));