javascript Ajax 类实现代码

关于"javascript Ajax 类实现代码"，可以分为以下步骤来实现：

准备工作

在实现 Ajax 类之前，需要确保先引入了 XMLHttpRequest 对象来实现 XMLHttpRequest(Ajax) 请求。

在此基础上，我们可以开始着手创建 Ajax 类了。

实现 Ajax 类

1. 创建一个 Ajax 类：

class Ajax {

}

1. 在类中添加一个构造函数，用于初始化 Ajax 类：

class Ajax {
  constructor() {
    this.xhr = new XMLHttpRequest();
  }
}

1. 接下来实现发送 Ajax 请求的方法，比如这里我们实现了一个 get 请求方法：

class Ajax {
  constructor() {
    this.xhr = new XMLHttpRequest();
  }

  get(url, callback) {
    this.xhr.open('GET', url, true);

    this.xhr.onreadystatechange = function () {
      if (this.readyState !== 4) return;

      if (this.status === 200) {
        callback(null, JSON.parse(this.responseText));
      } else {
        callback(new Error('Request error!'));
      }
    };

    this.xhr.send();
  }
}

我们可以将请求结果通过回调函数返回，这里以 JSON 数据为例，如果请求成功，我们将解析后的 JSON 数据传给回调函数，如果请求失败，则返回错误信息。

同样的，我们可以实现一个 post 请求方法：

class Ajax {
  constructor() {
    this.xhr = new XMLHttpRequest();
  }

  get(url, callback) {
    this.xhr.open('GET', url, true);

    this.xhr.onreadystatechange = function () {
      if (this.readyState !== 4) return;

      if (this.status === 200) {
        callback(null, JSON.parse(this.responseText));
      } else {
        callback(new Error('Request error!'));
      }
    };

    this.xhr.send();
  }

  post(url, data, callback) {
    this.xhr.open('POST', url, true);

    this.xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

    this.xhr.onreadystatechange = function () {
      if (this.readyState !== 4) return;

      if (this.status === 200) {
        callback(null, JSON.parse(this.responseText));
      } else {
        callback(new Error('Request error!'));
      }
    };

    this.xhr.send(data);
  }
}

在这里我们通过 setRequestHeader 方法设置了请求头信息，同时将数据 data 作为参数传入 send 方法中，这里也以 JSON 数据为例。

使用 Ajax 类

在实现了 Ajax 类之后，我们可以通过实例化一个 Ajax 对象来使用它。这里我们以调用后端 API 为例：

const ajax = new Ajax();

// get 请求示例
ajax.get('/api/users', (err, data) => {
  if (err) {
    console.error(err);
    return;
  }

  console.log(data);
});

// post 请求示例
const postData = {
  name: 'Lucy',
  age: 18
};

ajax.post('/api/users', JSON.stringify(postData), (err, data) => {
  if (err) {
    console.error(err);
    return;
  }

  console.log(data);
});

以上是一个简单的示例，通过实例化一个 Ajax 对象，我们可以调用 get 和 post 方法分别发送请求，并通过回调函数获取响应结果。

希望这篇文章对你有所帮助！