javascript ajax原生封装

Posted 2021-05-04

function Ajax (url, options) {
  // 创建ajax对象
  var xhr = null
  if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest()
  } else {
    xhr = new ActiveXObject('Microsoft.XMLHTTP') // 兼容ie6
  }

  var type = options.type ? options.type.toUpperCase() : 'GET'
  var data = options.data
  var success = options.success
  var fail = options.fail
  // 用于清除缓存
  var timeStamp = new Date().getTime()
  // data = ['a', 'b', 'c']
  var s = []
  if (typeof data === 'object') {
    for (var key in data) {
      s[ s.length ] = encodeURIComponent(key) + '=' + encodeURIComponent(data[key])
    }
    data = s.join('&')
    // console.log(data)
  }

  if (type === 'GET') {
    if (data) {
      xhr.open('GET', url + '?' + data, true) // 第三个参数async,一个可选的布尔值参数，默认为true,意味着是否执行异步操作
    } else {
      xhr.open('GET', url + '?t=' + timeStamp, true)
    }
    xhr.send()
  } else if (type === 'POST') {
    xhr.open('POST', url, true)
    // 如果需要像 html 表单那样 POST 数据，请使用 setRequestHeader() 来添加 http 头。
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded') // jquery 默认为application/x-www-form-urlencoded
    xhr.send(data)
  }

  // 处理返回数据
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        success && success(xhr.responseText)
      } else {
        if (fail) {
          fail && fail(xhr.status)
        }
      }
    }
  }
}

// 测试调用
var sendData = {name: 'asher', sex: 'male'}
Ajax('data/data.html', {
  data: sendData,
  success: function (data) {
    console.log(data)
  },
  fail: function (error) {
    console.log(error)
  }
})