pb.ajax.js

var pb = {}
pb.ajax = (url, opts) => {
  const _bust = () => Math.round(new Date().getTime()),
    // canvas csrf removal
    _csrf = csrf => csrf.replace(/^while\(1\);/, ''),
    // canvas csrf add token
    _csrf_token = () => {
      let token = (document.cookie.match('(^|;) *_csrf_token=([^;]*)') || '')[2];
      return decodeURIComponent(token);
    },
    // parse query string params for get request
    _qsp = params => {
      if (typeof params === 'undefined' || params == null)
        return '';
      else return '?' + Object.keys(params)
        .map(key => `${key}=${encodeURIComponent(params[key])}`)
        .join('&');
    },
    // last attempt to parse data that isn't JSON
    _params = data => {
      var ret = '';
      Object.keys(data).forEach(p => {
        if (data[p] instanceof Array) {
          ret += Object.keys(data[p])
            .map(k => `${p}[]=${data[p][k]}`).join('&');
        } else if (data[p] instanceof Object) {
          ret += Object.keys(data[p])
            .map(k => `${p}[${k}]=${data[p][k]}`).join('&');
        } else {
          ret += `${p}=${data[p]}&`;
        }
      })
      return ret.replace(/\&$/, '');
    },
    // xhr status
    _status = (xhr, cb) => {
      switch (xhr.status) {
        case 200:
          cb(JSON.parse(_csrf(xhr.responseText)));
          break;
        case 400:
          console.log(xhr.status + ' - ' + xhr.statusText);
          break;
        case 401:
          console.log(xhr.status + ' - ' + xhr.statusText);
          break;
        case 403:
          console.log(xhr.status + ' - ' + xhr.statusText);
          break;
        case 404:
          console.log(xhr.status + ' - ' + xhr.statusText);
          break;
        case 422:
          console.log(xhr.status + ' - ' + xhr.statusText);
          break
      }
    };

  // jQuery-esque function params
  if (typeof url === 'object') {
    opts = url,
      url = typeof opts.url !== 'undefined' ? opts.url : window.location.pathname;
  }
  if (opts instanceof Function)
    opts.callback = opts;
  else opts = opts || {};

  var data = '',
    method = typeof opts.method !== 'undefined' ? opts.method : 'GET';

  // for GET requests
  if (method == 'GET') {
    // check for cache setting
    if (opts.cache == false) {
      opts.params._ = _bust;
    }
    data = _qsp(opts.params);
  }

  // handle xhr requet
  let xhr = new XMLHttpRequest();
  xhr.open(method, url + data, true);

  if (method !== 'GET') {
    let _token = _csrf_token();
    if (_token) xhr.setRequestHeader('X-CSRF-Token', _token);

    if (opts.params != null && opts.params instanceof Object) {
      data = JSON.stringify(opts.params);
      xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
    } else if (opts.params != null) {
      data = _params(opts.params);
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
    }
  }

  if (opts.headers != null) {
    Object.keys(opts.headers).forEach(header => {
      xhr.setRequestHeader(header, opts.headers[header]);
    });
  }

  xhr.onload = () => {
    if (xhr.readyState === 4) {
      _status(xhr, opts.callback);
    }
  }

  xhr.onerror = () => {
    console.log(xhr);
  }
  xhr.send(data);
  return xhr;
};

pb.ajax.unit-tests.js

// ajax unit tests

// get params
pb.ajax._qsp({
  test: true
})
// "?test=true"
pb.ajax._qsp()
// null

// post/put params
var one = { 'hexcode': '#FDC010' };
pb.ajax._params(one);
var two =  { 
  'user' : {
    "name" : "RobotCars",
  }
};
pb.ajax._params(two);
var tri =  { 
  'course' : {
    "name" : "RobotCars - WKRM",
    'course_code':'sdafasdf'
  }
};
pb.ajax._params(tri);
var four = [1,2,3,4];
pb.ajax._params(four);

// get
var callback = response => console.log(response);
// basic callback
pb.get('/api/v1/accounts', callback)

// basic callback, params
var callback = response => console.log(response);
var params = {
  per_page: 100,
  recursive: true,
  page: 1
}
pb.get('/api/v1/accounts/self/sub_accounts', {
  callback: callback,
  params: params
});

// basic callback, params, headers
var callback = response => console.log(response);
var params = {
  per_page: 100,
  recursive: true,
  page: 1
};
var headers = {
  'content-type': 'application/json; charset=utf-8',
  'accept': 'application/json+canvas-string-ids'
};
pb.get({
  url: '/api/v1/accounts/self/sub_accounts',
  callback: callback,
  params: params,
  headers: headers
});

// basic callback, params, headers, cache
var callback = response => console.log(response);
var params = {
  per_page: 100,
  recursive: true,
  page: 1
};
var headers = {
  'content-type': 'application/json; charset=utf-8',
  'accept': 'application/json+canvas-string-ids'
};
pb.get({
  url: '/api/v1/accounts/self/sub_accounts',
  callback: callback,
  params: params,
  headers: headers,
  cache: true
});

// basic callback, params, headers, cache
var callback = response => console.log(response);
pb.get('/api/v1/accounts/self/sub_accounts', {
  callback: callback,
  params: {
    recursive: true,
    per_page: 100,
    page: 1
  },
  headers: {
    'content-type': 'application/json; charset=utf-8',
    'accept': 'application/json+canvas-string-ids'
  },
  cache: true
});


// put
// basic callback, params
var callback = response => console.log(response);
var params = { hexcode: '#FDC010' };
pb.put('/api/v1/users/self/colors/course_1266609', {
  callback: callback,
  params: params
});



var callback = response => console.log(response);
var params = { 'hexcode': '#FDC010' };
pb.put('/api/v1/users/self/colors/course_1266609', {
  callback: callback,
  params: params
});


var callback = response => console.log(response);
var params =  { "course": { "name" : "RobotCars - WKRM" }};
pb.put('/api/v1/courses/1266609', {
  callback: callback,
  params: params
});

var callback = response => console.log(response);
var params =  { 
  'course' : {
    name : 'RobotCars!!! - WKRM',
    course_code:'sdafasdf'
  }
};
pb.put('/api/v1/courses/1266609', {
  callback: callback,
  params: params
});

var callback = response => console.log(response);
var params =  { 
  'user' : {
    "name" : "RobotCars"
  }
};
pb.put('/api/v1/users/self', {
  callback: callback,
  params: params
});



//// refactor

// get  is default
var callback = response => console.log(response);
// basic callback
pb.ajax('/api/v1/accounts', callback);

var callback = response => console.log(response);
// basic callback
pb.ajax({
  url: '/api/v1/accounts',
  method: 'GET',
  callback: callback,
})

// get
var callback = response => console.log(response);
var params = {
  per_page: 100,
  recursive: true,
  page: 1
}
pb.ajax('/api/v1/accounts/self/sub_accounts', {
  method: 'GET',
  callback: callback,
  params: params
});


var callback = response => console.log(response);
var params =  { 
  'user' : {
    "name" : "RobotCars"
  }
};
pb.ajax('/api/v1/users/self', {
  method: 'PUT',
  callback: callback,
  params: params
});


var callback = response => console.log(response);
var params =  { 
  'course' : {
    name : 'RobotCars!!! - WKRM',
    course_code:'sdafasdf'
  }
};
pb.ajax('/api/v1/courses/1266609', {
  method: 'PUT',
  callback: callback,
  params: params
});