对接口数据的获取--AJAX

前言

在做项目的时候，前端需要通过接口从后台那里得到需要使用且不定期更换的一些资源，而如何获取就是至关重要的一步，一般都是通过AJAX来进行这一个操作！！

代码

如果自己在做练习，只需要获取一两次的可以用下面这个简单点的

var xmlhttp;
if (window.XMLHttpRequest) {
  xmlhttp = new XMLHttpRequest();
  /*一般情况下，我们会使用XMLHttpRequest 来发送 HTTP 请求以实现网站和服务器之间的数据交换。*/
} else {
  xmlhttp = new ActiveXObject("Microsoft XMLHTTP");
}
/*XMLHttpRequest.open() 方法初始化一个请求。该方法要从JavaScript代码使用；从原生代码初始化一个请求*/
xmlhttp.open("GET", "https://recruit-exam.topviewclub.cn/api/recruit/getBannerList", true);
/*XMLHttpRequest.send() 方法用于发送 HTTP 请求。如果是异步请求（默认为异步请求），则此方法会在请求发送后立即返回；如果是同步请求，则此方法直到响应到达后才会返回。XMLHttpRequest.send() 方法接受一个可选的参数，其作为请求主体；如果请求方法是 GET 或者 HEAD，则应将请求主体设置为 null。*/
xmlhttp.send();
xmlhttp.onreadystatechange = function () {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
  /*JSON.parse是将字符串转化成对象便于操作*/
   let responseText = JSON.parse(xmlhttp.responseText);
    console.log(responseText);
  }
}

如果需要多次调用不同接口数据，推荐封装一个获取函数

function formatParams(data) {
  let arr = []
  for (let name in data) {
    arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]))
  }
  arr.push(('v=' + Math.random()).replace('.', ''))
  return arr.join('&')
}
function ajax(options) {
  options = options || {} // 调用函数时如果options没有指定，就给它赋值{},一个空的Object
  options.method = (options.method || 'GET').toUpperCase() // 请求格式GET、POST，默认为GET
  options.dataType = options.dataType || 'json' // 响应数据格式，默认json
  options.timeout = options.timeout || 30000
  let params = formatParams(options.data) // options.data请求的数据
  let xhr
  // 考虑兼容性
  if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest()
  } else if (window.ActiveObject) {
    // 兼容IE6以下版本
    xhr = new ActiveXobject('Microsoft.XMLHTTP')
  }

  // 启动并发送一个请求
  if (options.method == 'GET') {
    xhr.open('get', options.url + '?' + params, true)
    xhr.send(null)
  } else if (options.method == 'POST') {
    xhr.open('post', options.url, false)
    // 设置表单提交时的内容类型
    // Content-type数据请求的格式
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
    xhr.send(params)
  }

  // 设置有效时间
  setTimeout(function () {
    if (xhr.readySate != 4) {
      xhr.abort()
    }
  }, options.timeout)
  /*
    接收
    options.success成功之后的回调函数  options.error失败后的回调函数
    xhr.responseText,xhr.responseXML  获得字符串形式的响应数据或者XML形式的响应数据
  */
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      let status = xhr.status
      if ((status >= 200 && status < 300) || status == 304) {
        options.success && options.success(xhr.responseText, xhr.responseXML)
      } else {
        options.error && options.error(status)
      }
    }
  }
}

这个函数的调用我给你们举个例子：

var a;
  ajax({
    url: "https://recruit-exam.topviewclub.cn/api/recruit/getWaterFallList",
    method: 'get',
    data: {
    },
    success: function (data) {
    /*将你要进行的赋值操作在里面进行，不过因为ajax请求是异步的所以会最后执行，所以如果你在下面输出a时是undefined的，不过还是可以正常操作！！*/
      let res = JSON.parse(data);
      a = res.data;
    },
  });
  console.log(a);

TIP:这里可以为了不至于每次刷新都要重新发送请求，我们可以利用本地存储将数据存进来！！

以第一个为例：

var xmlhttp;
if (window.XMLHttpRequest) {
  xmlhttp = new XMLHttpRequest();
} else {
  xmlhttp = new ActiveXObject("Microsoft XMLHTTP");
}

xmlhttp.open("GET", "https://recruit-exam.topviewclub.cn/api/recruit/getBannerList", true);

xmlhttp.send();
xmlhttp.onreadystatechange = function () {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
   let responseText = JSON.parse(xmlhttp.responseText);
   /*这里setItem存储的是字符串，不能存json对象！！*/
    localStorage.setItem('msg', xmlhttp1.responseText);
        console.log(localStorage.getItem('msg'));
  }
}

结尾

以上就是我用到的获取接口数据的方法，接下来我将会顺着上面提到的localstorage来讲一讲本地存储！！