js封装ajax

首先，我将介绍一种常见的封装Ajax的方法：

方法一：使用原生JavaScript封装Ajax

function ajax(url, method, data, successCallback, errorCallback) {
  var xhr = new XMLHttpRequest();
  xhr.open(method, url, true);
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        successCallback(xhr.responseText);
      } else {
        errorCallback(xhr.status);
      }
    }
  };
  xhr.send(JSON.stringify(data));
}

使用示例：

ajax('/api/data', 'POST', { name: 'John', age: 25 }, function(response) {
  console.log(response);
}, function(errorStatus) {
  console.error('Error: ' + errorStatus);
});

这种封装方法使用了原生的XMLHttpRequest对象，并通过回调函数来处理成功和失败的结果。

另外，还有一种常用的封装Ajax的方法是使用Promise对象。下面是使用Promise封装Ajax的示例代码：

方法二：使用Promise对象封装Ajax

function ajax(url, method, data) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open(method, url, true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.onreadystatechange = function() {
      if (xhr.readyState === XMLHttpRequest.DONE) {
        if (xhr.status === 200) {
          resolve(xhr.responseText);
        } else {
          reject(xhr.status);
        }
      }
    };
    xhr.send(JSON.stringify(data));
  });
}

使用示例：

ajax('/api/data', 'POST', { name: 'John', age: 25 })
  .then(function(response) {
    console.log(response);
  })
  .catch(function(errorStatus) {
    console.error('Error: ' + errorStatus);
  });

这种方法通过返回一个Promise对象，可以使用.then()方法处理成功的结果，使用.catch()方法处理失败的结果。

这两种方法都是常见的封装Ajax的方式，可以根据实际需求选择使用。