【原生ajax封装】

/**
 * Ajax的Get请求辅助方法
 * @param {String} url  请求后台的地址
 * @param {Function} callback  请求成之后,返回数据成功,并且调用此方法,这个方法接受一个参数就是后台返回的数据。
 * @return undefined
 */
function ajaxGet(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.send();

  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
      callback(xhr.responseText);
    }
  }
}

// 调用
ajaxGet('/user.json', function (data) {
  console.log(data);
});


function ajaxPost(url, data, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('POST', url, true);
  xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  xhr.send(data);

  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
      callback(xhr.responseText);
    }
  }
}

// 调用
ajaxPost('/api/user', 'id=9&com=aicoder', function (data) {
  // 后台返回的数据就是 字符串类型。要转成json,必须自己手动转换。
  var user = JSON.parse(data);
  console.log(user.id);
  console.log(user.com);
});
 

 

上一篇:知识细化 8》》ajax工作原理


下一篇:微信小程序 ajax请求同步