如何实现JavaScript原生封装ajax请求和Jquery中的ajax请求

JavaScript原生封装Ajax请求

在JS中实现Ajax请求有一定的复杂性，需要我们手动创建XMLHttpRequest对象、设置HTTP请求参数、监听请求状态等一系列操作。为了方便封装Ajax请求，我们可以创建一个Ajax类，用于封装常用的Ajax方法。

1. 创建Ajax类

class Ajax {
  constructor(options) {
    this.options = options;
    this.xhr = new XMLHttpRequest();
    this.init();
  }
  init() {
    let { method, url, data, async, success, error } = this.options;
    method = method || 'GET'; // 默认请求方式为GET
    async = async || true; // 默认为异步请求
    data = data || null; // 默认请求数据为空

    this.xhr.onreadystatechange = () => {
      if (this.xhr.status === 200 && this.xhr.readyState === 4) {
        success && success(this.xhr.responseText);
      } else {
        error && error(this.xhr.status);
      }
    }
    this.xhr.open(method, url, async);
    this.xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    this.xhr.send(data);
  }
}

2. 使用Ajax类进行封装

// GET请求
const ajax = new Ajax({
  url: '/api',
  success: (res) => {
    console.log(res);
  },
  error: (status) => {
    console.log(status);
  }
})

// POST请求
const ajax = new Ajax({
  url: '/api',
  method: 'POST',
  data: {
    username: 'Tom',
    password: '123456'
  },
  success: (res) => {
    console.log(res);
  },
  error: (status) => {
    console.log(status);
  }
})

以上就是一个最基本的Ajax类的封装，需要注意的是我们一般都是需要JSON数据，但这里默认设置Content-Type类型为x-www-form-urlencoded，所以我们需要在请求头部增加此设置。

3. 进阶的Ajax类

为了避免每次请求都需要重新定义一个Ajax类，我们可以将Ajax类封装成一个通用的方法，使得在其他地方使用时更加方便。

function ajax(options) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    const { method, url, data, async } = options;
    const isSuccess = status => {
      return (status >= 200 && status < 300) || status === 304;
    }
    xhr.onreadystatechange = () => {
      if (xhr.readyState !== 4) return;
      if (isSuccess(xhr.status)) {
        resolve(JSON.parse(xhr.responseText));
      } else {
        reject(xhr.status);
      }
    }
    xhr.open(method, url, async);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(data);
  })
}

以上是一个常用Ajax请求的封装方法，可以跨域请求，支持Promise实现异步操作。调用方式如下：

// GET请求
ajax({
  url: '/api',
  method: 'GET'
}).then(res => {
  console.log(res)
}).catch(status => {
  console.log(status)
})

// POST请求
ajax({
  url: '/api',
  method: 'POST',
  data: JSON.stringify({
    username: 'Tom',
    password: '123456'
  })
}).then(res => {
  console.log(res)
}).catch(status => {
  console.log(status)
})

Jquery中的Ajax请求

Jquery中的Ajax请求也非常简单，支持GET和POST两种请求方式，具体调用方式如下：

// GET请求
$.get('/api', function(data) {
  console.log(data)
})

// POST请求
$.post('/api', {username: 'Tom', password: '123456'}, function(data) {
  console.log(data)
})

Jquery中的Ajax请求支持跨域请求，还可以通过$.ajaxSetup()方法配置全局默认设置，这个静态方法是一个全局的AJAX默认值设置函数，在每次使用Jquery的AJAX调用时，它都会用AJAX调用的选项覆盖此默认设置，示例如下：

$.ajaxSetup({
  type: 'POST',
  contentType: "application/json; charset=utf-8"
})

以上就是Jquery中常用的Ajax请求的封装方法，与JavaScript原生的Ajax封装类似，但是少了很多繁琐的操作。而且Jquery中的Ajax请求更加稳定和强大，API也比较完整，适合用于大型项目中。