封装原生Ajax请求

封装get请求

  1. /**
  2.  * Ajax的Get请求辅助方法
  3.  * @param {String} url  请求后台的地址
  4.  * @param {Function} callback  请求成之后，返回数据成功，并且调用此方法，这个方法接受一个参数就是后台返回的数据。
  5.  * @return undefined
  6.  */
  7. function ajaxGet(url, callback) {
  8.   var xhr = new XMLHttpRequest();
  9.   xhr.open('GET', url, true);
  10.   xhr.send();
  12.   xhr.onreadystatechange = function () {
  13.     if (xhr.readyState == 4 && xhr.status == 200) {
  14.       callback(xhr.responseText);
  15.     }
  16.   }
  17. }
  19. // 调用
  20. ajaxGet('/user.json', function (data) {
  21.   console.log(data);
  22. });

封装post请求

  1. function ajaxPost(url, data, callback) {
  2.   var xhr = new XMLHttpRequest();
  3.   xhr.open('POST', url, true);
  4.   xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  5.   xhr.send(data);
  7.   xhr.onreadystatechange = function () {
  8.     if (xhr.readyState == 4 && xhr.status == 200) {
  9.       callback(xhr.responseText);
  10.     }
  11.   }
  12. }
  14. // 调用
  15. ajaxPost('/api/user', 'id=9&com=aicoder', function (data) {
  16.   // 后台返回的数据就是 字符串类型。要转成json，必须自己手动转换。
  17.   var user = JSON.parse(data);
  18.   console.log(user.id);
  19.   console.log(user.com);
  20. });