前端必备基础知识之--------原生JS发送Ajax请求

原生JS发送Ajax请求

 ajax({
    type: 'POST',
    url: 'http://10.110.120.123：2222',
    // data: param,
      contentType: 'application/json; charset=utf-8',
    data: JSON.stringify(param),
      dataType:'json',
    // crossDomain: true,
    success: function (res) {
      console.log(JSON.stringify(res))
      } else {
      }
    },
    error: function (a, b, c) {
    },
  })
 //创建ajax函数
function ajax(options) {
  options = options || {}
  options.type = (options.type || 'GET').toUpperCase()
  options.dataType = options.dataType || 'json'
  let params

  //创建-第一步
  var xhr
  //非IE6
  if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest()
  } else {
    //ie6及其以下版本浏览器
    xhr = ActiveXObject('Microsoft.XMLHTTP')
  }

  //接收-第三步
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      var status = xhr.status
      if (status >= 200 && status < 300) {
        options.success && options.success(xhr.responseText, xhr.responseXML)
      } else {
        options.error && options.error(status)
      }
    }
  }

  //连接和发送-第二步
  if (options.type == 'GET') {
    params = formatParams(options.data)
    xhr.open('GET', options.url + '?' + params, true)
    xhr.send(null)
  } else if (options.type == 'POST') {
    xhr.open('POST', options.url, true)
    //设置表单提交时的内容类型
    xhr.setRequestHeader('Content-Type', options.contentType)
    params = options.data
    console.log(params)
    xhr.send(params)
  }
}

//格式化参数
function formatParams(data) {
  var arr = []
  for (var name in data) {
    arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]))
  }
  // arr.push(('v'=Math.random()).replace('.',''));
  return arr.join('&')
}