【JavaScript】Ajax简单封装

什么是Ajax？

AJAX 是异步的 JavaScript 和 XML(Asynchronous JavaScript And XML)。简单点说，就是使用 XMLHttpRequest 对象与服务器通信。 它可以使用 JSON，XML，HTML 和 text 文本等格式发送和接收数据。AJAX 最吸引人的就是它的“异步”特性，也就是说他可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。

Ajax基本代码实现

var xhr = new XMLHttpRequest()
xbr.open('GET', '/api', false)
xhr.onreadystatechange = function () {
  // readyState状态码变化：
  // 0(未初始化) 1(载入) 2(载入完成) 3(交互) 4(解析完成)
  if (xhr.readyState == 4) {
    // status状态码变化：
    // 2xx(请求成功)3xx(重定向)4xx(客户端请求错误)5xx(服务端错误)
    if (xhr.status == 200) {
      alert(xhr.responseText)
    }
  }
}
xhr.send()

基于Promise发送Ajax请求

/**
 * @description 基于Promise发送Ajax请求
 * @param {String} url 请求地址
 */
function queryDate(url) {
  const promise = new Promise(function (resolve, reject) {
    const xhr = new XMLHttpRequest()
    xhr.open('get', url)
    xhr.send()
    if (xhr.onload) {
      // onload 只有状态码为4时才能回调一次函数
      xhr.onload = function () {
        if (xhr.status === 200) {
          // 处理正常情况
          resolve(xhr.responseText)
        } else {
          // 处理异常的情况
          reject('服务器错误')
        }
      }
    } else {
      // 支持低版本ie
      // onreadystatechange是只要返回的状态码只要变化时就回调一次函数
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          // 处理正常情况
          resolve(xhr.responseText)
        } else {
          // 处理异常情况
          reject('服务器错误')
        }
      }
    }
  })
  return promise
}